?
Solved

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

Posted on 2008-10-14
3
Medium Priority
?
206 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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Following on from our article on "The Murky World of Consent and opt in", we thought we would issue some helpful guidance, not only on consent itself but knowing what information you are capturing, what you are doing with this data and how you can p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

807 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