Header is messed up in IE but ok in FF

HTML & CSS
1

Hello,

Would you please help me fix this issue. The header is messed up in IE but ok in FF

http://4t.testriva.com/

TIA,

2

The html code has been written very well, looks like your problem may be CSS, try the W3C validation

http://jigsaw.w3.org/css-validator/validator

Mozilla’s browser probably has more coding capabilities than any other browser, a lot of what is designed for FF doesn’t work at all in IE. Both have their ups and downs and things the other cannot do.

So far designing for Safari browser has worked best for me, it seems to have the least capabilities, but it also seems to always work in other browsers without any problems.

the other fix I commonly use is if then statements (if firefox then load this css file) IMO this is the only true way to give the user a look at your work the way it was truly intended to be seen. But requires a lot of extra coding.

IDK if you know already or not but here is a site that will generate screen shots in every browser

Please remember I am a nub and speaking from my own personal experiences with rendering problems I could be wrong altogether

3

I don’t really see the problem, but what I see is one of the most common errors: starting the web page code with a comment:

[COLOR="Red"]<!-- START: including template: design/aa/templates/pagelayout.tpl (design:pagelayout.tpl) -->[/COLOR]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It’ll throw IE in quirks mode.

4

Hello,

Thank you so much.

Removing the comment, fixed IE8 but not IE7.

Any more ideas?

Thank you

OOzy

5

OOzy,
leaving aside the fact that your page is difficult to work with and debug (due to having a bazillion CSS files… you know that’s a lot more bandwidth cost for you too, right? you really want ONE css file and then maybe something for IE6), your page is not terribly accessible and seems to have a lot of code for a simple page.

I can’t even get to the IE stylesheets, and can’t tell if there’s a valid path there. I don’t know your directory structure. So I can only go on the CSS I can actually see. I see lots and lots of stuff getting floated but no clearing.

I think if quickmenu is clear: both, it’ll stop snagging on the searchbox and uppermenu goes all the way to the left then, which should then make enough room for the logo to come back up (it’s being pushed down because there’s not enough room). Actually this would mean the quickmenu and uppermenu should not be floated at all. If you must float them to get them into position, they’ll have to all be bunched into a non-floated container box to get around IE’s floats-can’t-clear-floats-in-the-same-direction bug.

I strongly encourage you to pull all those stylesheets together into one (because each @import is another call to the server, so that’s 10 calls to the server just for styles. This also means, the jQuery css should get incorporated into this single stylesheet).

I encourage you to put text in the alt attributes you have in the clickable images at the top and throughout your site. Not everyone sees images, so what are they supposed to do with the link? The title should have المستشاراﻷكاديمي at the least, the English button should say “English” and the f should have “Facebook” or something. Those “alt=” things are there for a reason.

I don’t know what’s in the IE stylesheets so I don’t know if you really need them (possibly do for IE6 and maybe 7 if they’re having trouble with rtl, but your page width is static so I’m leaning to just IE6), but IE8 shouldn’t need anything special.

Removing the comment did take all IE’s out of quirks mode. But it seems that currently your header problem is just float snag and ride-up.

I also notice IE7 is giving your whole page a ginormous scrollbar. I don’t know what’s causing it.