Solved

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

Posted on 2008-10-14
3
197 Views
Last Modified: 2013-12-08
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/
0
Comment
Question by:MeridianManagement
  • 2
3 Comments
 
LVL 7

Accepted Solution

by:
mltsy earned 500 total points
ID: 22712641
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
 
LVL 2

Author Comment

by:MeridianManagement
ID: 22714039
Wow, thanks, that helps a lot. You're a lifesaver!!!

Did that fix the javascript menu? It was not appearing on my page.
0
 
LVL 7

Expert Comment

by:mltsy
ID: 22717808
Oh, I didn't even try the menus.  I'll try to get to that if I have time ;)
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question