IE9 display problem

Hello,

I am currently creating a master page with a fixed with of 960px, under the header i have a left column, a placeholder, and a right column, all 3 are set to float:left; and have fixed widths of respectively 150 , 615 and 195 pixels. The page displays perfectly in chrome and firefox but i need to use the "older browser compatibility" button in IE9 for it to display correctly, other wise both the placeholder and right column get kicked under the left column.

At width 965px IE9 allows the placeholder and right column back up where they belong. but the rest of the site thinner so my question here is : Why is Internet Explorer 9 messing up with my div's fixed width by 5 pixels & how can i fix this?

I have another css problem concerning this very same page but I will create another thread please check it out too.

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

4 Months Ago

And how can we help you???
With no sample page to examine what can we suggest?

Upload your page somewhere that we can examine it.
But just to get things rolling - have you bothered to declare a doctype?

drjohn

Posting Pro in Training

448 posts since Mar 2010

Reputation Points: 76

Solved Threads: 80

3 Months Ago

Maybe you should try display:inline instead of float everything to left.

lps

Junior Poster

117 posts since Jul 2011

Reputation Points: 13

Solved Threads: 22

3 Months Ago

And how can we help you??? With no sample page to examine what can we suggest?

Upload your page somewhere that we can examine it. But just to get things rolling - have you bothered to declare a doctype?

I didnt post any code because i've read that IE has some problems with the way it handles css margin/padding rules of floating divs, so i just thought the description of the problem could ring a bell to some more experimented webmaster that would inspire some advice.

as far as the doctype yes i have, actually not i but vs2010 did :

<%@ Master Language="VB" CodeFile="Publique.master.vb" Inherits="Publique" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
...

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

3 Months Ago

Maybe you should try display:inline instead of float everything to left.

I would rather not change my whole layout for 1 version of 1 browser even tho this is just experimental, the way i learnt ASP.NET and css was with float:left; i do use display inline for many other things but the layout of my columns isn't usualy one of them.

I have a feeling if i don't find out why and how to fix the problem itself, i will need to simply write a bit of css that is only applied in IE9 that would increase my site's width by 5px :S

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

3 Months Ago

to both posters above me : P.I.E.

althought this is IE6 i believe they are talking about, i was suspecting a similar issue in my case for IE9.

and to Ips : it seems they suggest to use display:inline aswell, but i still feel reluctant to the idea of setting my layout this way.

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

3 Months Ago

fixed!

so there was a little bit more to the picture than just my 3 columns but i didn't wanna make the question too complicated so i skipped a part of my structure. Turns out it was the faulty part so for future reference here's what happened :

i have a header up top, then a left column , then a top_container div that has a top_menu in it, and THEN the content column and a right column last.

now i changed arround the top menu and top container id names, but didnt switch my css rules, so now the top_container was simply float:left, while the asp:Menu within it, was float:left and width 810px (960 website width - 150 left menu width ), the thing is asp:Menu creates some invisible element called SkipLink, and that usualy takes no space at all or so i thought but switching the menu back to just "float:left" and its container to 810px fixed it,

[ fixing the menu to 809px also fixed it, so that is why i suspect the invisible SkipLink was taking a pixel somewhere]!

Thanks for the replies.

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

This question has already been solved

You