Anyone really good at debugging IE 6 & 7?

[ekcetera]

I’m designed a site that works pretty well in all other browsers except IE 6 & 7. Sure enough, client keeps coming back to me – he has no clue what browser he’s in – he swears up and down it’s 7, but what he describes, I can only see in 6. Anyway, is anyone really good at those particular browsers – I need to improve my skills there. Willing to give me some tips?

Here’s the site: http://www.thunderhook.com/thunderhook/index.php

Here’s the main CSS if you’re not able to access it:

Code:

/* Styles for all pages */

body {background-color: #C2B59B; margin-top: 0px; margin-bottom: 0px; font-family: Arial, Helvetica, sans-serif;}
a:link {color: #036;}
a:visited {color: #009;}
a:hover {color: #A11A21;}
.container {width: 980px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px;}
.logo {
position: absolute;
top: 30px;
}
.whitebackground {
background-color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
margin-bottom: 0px;
}
.mininav {
text-align: right;
width: 835px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #036;
margin-top: 10px;
height: 40px;
padding-bottom: 10px;
}
.mininav a:link {text-decoration: none;}
.mininav a:visited {text-decoration: none; color: #009;}
.mininav a:hover {text-decoration: none; color: #A11A21;}
.header {
background-image: url(images/header.jpg);
width: 835px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
height: 180px;
}
.plantrip {
position: relative;
float: right;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.mainnav {
height: 25px;
width: 835px;
clear: both;
padding-top: 82px;
}
.footer {
text-align: center;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
line-height: 16px;
background-color: #FFF;
padding-bottom: 20px;
padding-top: 30px;
clear: both;
}
.footer a:link {text-decoration: none;}
.footer a:visited {text-decoration: none; color: #009;}
.footer a:hover {text-decoration: none; color: #A11A21;}
h1 {font-family: Georgia, “Times New Roman”, Times, serif; font-size: 16px; text-transform: uppercase; color: #A41320;}
h2 {
font-style: normal;
color: #036;
font-weight: bold;
font-size: 14px;
display: inline;
}
.rightpic {float: right; margin-left: 20px;}
.mediaicon {
height: 35px;
width: 35px;
margin-right: 10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.mediaiconrow {
float: left;
margin-left: 200px;
}

/* Dropdown Menu Styling */

ul.menu { /* The entire menu wrapper */
list-style:none;
padding-left: 123px;
height: 30px;
margin-top: -5px;
}
ul.menu * {
margin:0px;
padding:0px
}
ul.menu a { /* The entire menu link (text) */
color:#333;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 30px;
}
ul.menu li { /* Each main menu item -remember everything cascades*/
float: left;
position: relative;
}
ul.menu ul { /* The entire drowdown as a group */
position:absolute;
left:0;
display:none;
list-style:none;
}
ul.menu ul li { /* Each item in the dropdown */
position:relative;
border-top:none;
width:200px
}
ul.menu ul li a { /* The links in the dropdown */
display:block;
background-color:#E6E1D7;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 15px;
padding-top: 3px;
line-height: 17px;
}
ul.menu ul li a:hover { /* Links in the dropdown hover effect */
background-color:#CDC4B3
}
ul.menu ul ul { /* Any dropdown submenu as a whole */

}
ul.menu .menulink { /* The Main class of the main items */
padding-right: 15px;
padding-left: 15px;
padding-top: 7px;
padding-bottom: 7px;
}
ul.menu .menulink:hover, ul.menu .menuhover {
background-color: #C2B59B;
}
ul.menu .sub {
}
ul.menu .topline {
}

/* Home Page Styles */

.welcomewilderness {
text-align: center;
margin: 0px;
padding: 0px;
height: 85px;
}
.welcomethunderhook {
text-align: center;
clear: both;
}
#welcomep {
padding-right: 70px;
padding-left: 70px;
font-size: 14px;
line-height: 25px;
margin-top: 10px;
text-align: center;
}
.insidebody {
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
font-size: 12px;
text-align: left;
overflow: hidden;
}
.googlemap {
float: left;
margin-right: 20px;
margin-bottom: 10px;
border: none;
}

/* Team Page */
.bios {
float: right;
width: 590px;
}

.biophoto {
float: left;
clear: left;
}

.biocontainer {
clear: both;
margin-bottom: 25px;
overflow: hidden;
}

.bioheader {
width: 200px;
float: left;
margin-bottom: 10px;

}
.bioheader h2 {
margin: 0px;
padding: 0px;
}

/* Moose page */
.moosetext {
width: 370px;
float: left;
margin-right: 15px;
height: 750px;
}

/* Aircraft Page */
.column1 {
width: 300px;
float: left;
margin-left: 75px;
margin-top: 25px;
}
.column2 {
width: 300px;
float: right;
margin-right: 75px;
margin-top: 25px;
}
.aircraftcontainer {
margin-bottom: 25px;
}

/* Brochure Request Form Styling */
table.basic {
width: 400px;
margin-left: auto;
margin-right: auto;
}
table td.noborder {
border: 0px;
}

What I’m seeing in IE 7:
•The navigation seems to be all off. It looks like it’s just a width/height problem – like 7 is measuring differently, but it’s certainly not working like it’s supposed to.

IE 6:
• Same issues with navigation
• Spacing is off on very top navigation – just the text links Home | Contact Us, etc.
• Transparency doesn’t seem to work correctly on my PNGs. I know they weren’t compatible that far back – should I make transparent gifs?
•Spacing on the Aircraft page is off
•Spacing is slightly off on "The Team" page

Hopefully these are pretty easy fixes. Do I just need to make an alternate IE 6/7 stylesheet? I’ve heard that’s bad practice, but I don’t know of any other way to do it.

SUGGESTIONS WELCOME PLEASE!!!!

[jamygolden]

This won’t fix all your problems, but add this to your <head> tag just before it closes.

Code:

And for your IE6 .png problems, have a look at http://jquery.andreaseberhard.de/pngFix/.

[virtual]

Using an IE specific stylesheet is not bad practice at all and the best way to fix certain problems. It is bad practice to use hacks or conditional comments in each page. If I have time later I will take a look at your problems.

[virtual]

For the dropdown menu add the following into your IE specific stylesheet

Code:

ul.menu ul {
top: 31px;
}

You can actually add it into your main stylesheet, it works in Firefox (Mac) and IE8.

IE specific stylesheet change to

Code:

ul.menu {
padding-left: 75px;
}

It would be easier to use the png fix that Jamy told you about rather than change to gifs. The quality is not the same and would be a pity to use them just because of IE6.

[birdrockdesigns]

Also, try a CSS reset in your stylesheet. Sometimes, there are browser intrinsic things like default margin and padding for form items and list items.

Just a thought.

[ekcetera]

Thanks everyone! Re-setting the stylesheet worked for the left/right alignment and virtual’s worked for the vertical spacing….now the dropdown is hiding behind the image slideshow – I’m assuming it will be some sort of z-index thing, but not exactly sure what.

[ekcetera]

woot! I think I got it

Code:

ul.menu { /* The entire menu wrapper */
position: absolute;
z-index: 30;
}

[ekcetera]

The jquery transparency fix works, except it pushed my white background div down about 150 px or so in IE6. Any ideas?

[virtual]

Try giving IE6 a negative top margin for .whitebackground.

[boss]

To set a level playground across all the browsers, use the RESET CSS stylesheet, before defining your own styles.. This will resolve most of your issues. But if still there is a problem with ie6 and ie7, then use the "Browser Selector Javascript" which is extremely useful and will resolve almost all of your browser compatibility issues.

[Author]

Posts