Solved

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

Posted on 2008-10-14
3
196 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Hyper V cluster 2 31
Need to click button twice to get results 2 32
.php tree directory? 5 54
Javascript: How to show value of a specific value 5 44
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

947 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now