Member Avatar for Philippe.Lahaie

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.

  • 3 Contributors
  • 6 Replies
  • 97 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Philippe.Lahaie
Member Avatar for drjohn

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?

Member Avatar for lps

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

Member Avatar for Philippe.Lahaie

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">
...
Member Avatar for Philippe.Lahaie

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

Member Avatar for Philippe.Lahaie

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.

Member Avatar for Philippe.Lahaie

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 <asp: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 <a> 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.

Edited by Philippe.Lahaie because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.