Why does nav look different in IE?

For some reason my navbar looks messed up in Internet Explorer and Firefox it looks fine.. How can I fix this???

Here is my page http://www.loansafe.org/jobs/

 

I'd say play with the padding here:

#qm0 div a, #qm0 ul a
{
padding:2px 40px 2px 5px;

and here:

#qm0 a
{
padding:5px 20px 5px 8px

in your http://www.loansafe.org/blog/wp-includes/js/ls-big-nav.css file, particularly the 20px and 40px values. I just took a quick look at it though.

 

Originally that's what I did, and it worked for IE but when I looked at FF it looked like crap as you can see in the thumbnails I attached..


Internet Explorer:



Firefox:

 

Validate your html and css for those lists of errors.

 

I found a solution. I've attached the two files I had to modify. I removed the padding, then set the width of each nav item in the HTML file. It appears that setting the width of each nav item did not affect the IE page.

 

You said you've attached 2 files? When I extracted the file there was only one.. I tried the code but it didn't work maybe it needs the corresponding file that you modified?

 

Step 1: First thing first, to test why is this happening just go to your css and change padding to 0 for #qm0
Now test the page in FF and IE (8); total space taken for all items in FF is less and in IE (8) is more, Because when you assign a width for block and some horizontal padding, in ie those two gets added. think a block of a width 100px and padding in left and right is 10 px, then IE will consider as (left padding+block width+right padding) ie (10px+100px+10px) =120px (IE consider padding right after the edge of the block where as FF consider padding inside the edge of block)

[Here is a great resource on box model : http://www.quirksmode.org/css/box.html]

Step 2:
Now remove the inline style width mentioned for all the base li items.
for example:

<li><a style="width: 36px;" href="http://www.loansafe.org/" class="qmparent">HOME</a></li>
<li><a style="width: 40px;" href="http://www.loansafe.org/forum/" class="qmparent">FORUM</a>
-
-
-
-
-
<li><a style="width: 40px;" href="http://www.loansafe.org/forum/register.php" class="qmparent">JOIN US</a>

Step 4: Check the page on IE and FF; total space taken by main nav items should be same as FF and IE(8)

Step 5:
now in the css, play around with padding for #qm0 a to get the right space between the items

#qm0 a {
padding:6px 8px;
}

I am unable to attache the test file, I can send to your email though, please pm ur email id. Hope you get this done.

 

Of course you're paying attention to all these amateurish attempts to fix the unfixable. The W3C validator can't even read your page but you're trying to fix it with padding. Lol!

 

check your code.

 

Sorry about that. I see you got the HTML file, which wouldn't do anything on its own.

Use the nav menu code from the file I attached. Then, go into http://www.loansafe.org/blog/wp-includes/js/ls-big-nav.css and edit:

#qm0 a
{
padding:5px 20px 5px 8px;

Change the 20 to an 8. That's what worked for me with the modified widths on the nav items.

 

Hey there.

If you really want to make that public... I just can say that this code/style/design is not very good.
It is even impossible to check that site with validator.w3.org.

Even your main site is horrible coded and designed. 11 errors with validator.

Well anyway. You should learn CSS to fix your navbar problems.
IE is parsing CSS differently.

You should use conditional comments for IE users and link to an external CSS file for IE only.

And by the way, to check sites in different browsers you could use browsershots.org ... one of my favourites

Regards,

Michael
---

Front-End Developer / System Engineer
Studenten-Vermittlung International S.L.U.

Umzugshelfer, Nachhilfe und vieles mehr - Studenten-Vermittlung International S.L.U.