CODEWITHSUNDEEP
htmlcsslayoutcross-browser
user1537927
user1537927

Reputation: 66

Why is my layout broken only in Firefox and IE8 (not 9)?

I noticed today that a website that I've completed months ago was not showing well on Firefox and IE8 (works fine in IE9). It's quite old now and I'm pretty sure that I tested browser compatibility at the time but I guess one does make mistakes.

Problem is I can't seem to understand the problem. Basically I have a left floated sidebar with a fixed position but it renders on the right (outside its container) on FF and IE8. I could always build the layout again from scratch (it uses Skeleton Grid system) but would still like to understand the problem.

Example page that's broken on the website.

Try to open it with various browsers and see for yourself. Also, if someone views it right on FF, I'm interested too.

Thanks a lot!

Edit: I'm not asking for a whole debugging. Just if someone knows of this issue.

Edit2: Validator links are irrelevant here. I checked it already and they're basically prefixes for css and CMS-related for html.

Edit3: I fixed it and prepared a kinda complete answer to post but as I'm a new user, I can't answer my own question in the next 7 hours... so here it is:

I just sorted the whole thing out with hints from your answers (thank you!).

Basically, it's something to do with how browsers handle floats on fixed elements. Imagine we're dealing with successive "float:left" element, which is the case in most grid system (960gs, bootstrap, etc.).

Here's how browser will handle these elements without fixed positioning: http://jsfiddle.net/cPjdK/ And with float:right : http://jsfiddle.net/cPjdK/1/

Now what if we have a very long third column and want to fix the first (my example)? Well it basically disables the floats because fixed elements are out of the flow. http://jsfiddle.net/cPjdK/9/

So you have to position them absolutely (or with margins in my case) http://jsfiddle.net/cPjdK/6/

Now what about my website? The fixed elements were floated anymore and the whole grid system kinda fell apart. Fixing this appeared to be a long work. But, for some reason, replacing my "float:left" properties on floated elements with "float:right" basically fixed it. Why did it fix it? Why was it not working on FF and IE8 but appeared fine on IE9 and Chrome.

I have no idea.

But it looks fine now (after a few tweaks) and I've already been paid so...

Problem solved but question unanswered, sorry...

Upvotes: 0

Views: 828

Answers (1)

Pablo Rincon
Pablo Rincon

Reputation: 1039

You have a FIXED positioned element without giving it any coordinates.

Try giving it something like:

#side-right{
position:fixed;
top:0;
left:0;
}

Upvotes: 1

Related Questions