Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-10-14
3
Medium Priority
?
205 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

636 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