Need help with a little website debugging

[Illusio]

I've got a website I've just about finished but have one bit of cross browser compatibilty that is giving me issues. Everything works fine in IE 7, Firefox (mac and PC) and Safari, but I can't figure out why its not working in IE 6.

http://www.illusionaryglass.com/fd

There is a gap between the top links area and the header image that only appears in IE 6. The two areas should be flush.

Can any CSS experts help me fix this?

 

[txrandom]

I don't see any differences, can you take a screen shot in both, so I can see what you are trying to fix?

 

[Illusio]

Sure, screenshot here. The front one is in firefox, the back image is from IE 6:

http://illusionaryglass.com/fd/screens.jpg

 

[AgentZap]

I really really hate cross browser issues. By luck I found this when I was wondering why my divs were rendering differently in IE6 as well. IE6 has bugs with this http://www.positioniseverythin...lorer/floatIndent.html

 

[911paramedic]

😕

Why are you using separate tables? (Tables at all for that matter.)

Anyways, there is a margin between the tables that is not collapsing the way it should be in newer browsers. I noticed a few pixel difference in what you specified and what the actual div height was/is.

Other than that, I can't get into it because tables make my brain hurt after using CSS only for so long.

 

[skrilla]

Did you create that CSS?

It looks like there is already an unordered list defined in the CSS, but in the actual HTML you are using a table. Why not just use:

<ul>
<li><a href="services.html">services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="about.html">about FDAS</a></li>
</ul>

instead of your table?

 

[Hmongkeysauce]

get rid of all the table tags in the "links" div. that should fix it.

 

[Illusio]

Thanks Hmongkeysauce! That solved my problem.