HTML Javascript Webpage looks fine in firefox but mangled broken in Internet Explorer

I hope it's just the way I've referenced something but the header for this URL looks devastating in IE7.0

http://www.6seconds.org/login/
LVL 2
MeridianManagementAsked:
Who is Participating?
 
mltsyConnect With a Mentor Commented:
I find the best way to solve issues like this is to copy the source to a test page, and then start taking stuff our until all you have is the part you're having a problem with.  The first thing I noticed was you were missing the closing tag for a div that opens right after "<!-- BEGIN CONTENT -->".  That didn't seem to affect too much, but you'll probably want to fix it in any case.

The second problem was that there was no doctype definition (DTD), so IE was probably rendering in quirks mode, which doesn't help you at all (doesn't follow all the standards for CSS rules, etc).  So, I would use:
<!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">

This solved a couple problems.  After that was fixed, the first layout problem I noticed was that the title was a dramatically different side in IE7 than Firefox.  This is because you didn't define a style for H2.  Not a huge problem - that's easily fixed by giving it a style.

The next problem was that the div containing the title (Six Seconds' EQ Network: Certified Associates Login) was overlapping the edges of the table, so I just gave the div a style of "width:850px;margin:auto;" to shrink and center it.  I also changed the container of the "BODY" section from a table to a div, since it was being used as a single block element for layout purposes.  I don't frown on tables as much as many people, but I do believe they should be used only when you need to display... well, a table :)  I don't know if that change was necessary or not, though.

With that out of the way, the only problem left is the background of the search box.  Aha!  another table, hehe ;)  That's okay - however, it is what's causing your problem.  That, and $#!&@% Internet Explorer - which takes the background property of a TR element and applies it to each cell.  If I were you I'd make one image of the whole background of that table, and apply it to the whole table.

If I were more ambitious, I would replace all those outer tables with divs, and make one div outside them all as a container div that displays the repeating vertical background - that's up to you ;)

Done! :)
0
 
MeridianManagementAuthor Commented:
Wow, thanks, that helps a lot. You're a lifesaver!!!

Did that fix the javascript menu? It was not appearing on my page.
0
 
mltsyCommented:
Oh, I didn't even try the menus.  I'll try to get to that if I have time ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.