7 replies [Last post]
maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

My site www.studioprofessor.com looks fine when viewed using IE7 or Firefox, but when I tried IE6 the layout gets messed up.

The main problem is that the gray horizontal line just below the navigation list disappears when the "current" tab is moused over and then the mouse is dragged somewhere on the page other than another element of the navigation list. The navigation is still functional, but it looks sloppy.

Of less importance, the blue bar on the right margin of the screen doesn't appear (the blue bar is the background of the div "rmargin", I think it's not appearing because IE6 is stacking divs in a different order or because IE6 is not recognizing all of "rmargin"'s stylesheet settings).

I have no experience with the differences between how IE6 and IE7 interpret code, so diagnosing the problem is difficult for me. Can anyone suggest a way to fix these two problems?

HTML

StudioProfessor (847)987-2519







logo



The Situation:

You bought a computer, software, and/or some other equipment to record or produce music.


The Problem:

It won't work!


Let me solve your technical problems so you can start making music.


Usually the software or equipment is simply configured incorrectly.
Most problems of this sort can be solved in under an hour.


I serve the entire Chicagoland area. My rate is $30 per hour. I make house calls for an extra $20.


To make an appointment or for more information, please call or email:


Erik

(847)987-2519
[email protected]





CSS (updated)

* { margin: 0; padding: 0;} p {padding-top: 1em;} body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;} html>body #wrapper { height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/} html, body, #wrapper { min-height: 100%; /*Sets the min height to the height of the viewport.*/ width: 100%; height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/} #wrapper { background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent; position: absolute; top: 0; left: 0;} #main { position: relative; height: auto; padding-bottom: 3em; /*Keeps content above footer. Originally used margin, but a bug in Opera7 seemed to add spurious margin, pushing the footer beyond the viewport even with short content. */ width: 100%; margin: 0 auto;} div.header { background: white url("images/headerbg.jpg") repeat-x 0 0;}

/*Navlist styling*/
#navcontainer {
background-color: white;
padding-top: 5px;}
#navlist {
text-align: center;
padding: 3px;
border-bottom: 1px solid #778;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;}
#navlist li {
list-style: none;
display: inline;}
#navlist li a {
padding: 3px 0.5em;
margin-left: 0px;
border: 1px solid #778;
border-bottom: none;
background: #DFF1FA;
text-decoration: none;}
#navlist li a:link { color: #667; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #565669;
background: #B7E1F5;
border-color: #778;}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;}
/*end Navlist styling*/

#contentmargin {
margin-left: 10%;
margin-right: 10%;}
h3 {
padding-top: 1em;
text-align: center;
font-size: 12pt;}
img.notheader {padding-top: 1em;}
#rmargin {
background: url("images/marginrepeater5.jpg") repeat-y 0px 0px transparent;
position: absolute;
top: 0;
right: 0;
min-height: 100%;
width: 9px;
height: auto;}
#footer {
position: absolute;
bottom: 0;
width: 100%;
font-size: 9px;}
#footer p {
text-align: center;}

isharis
Offline
newbie
Pakistan
Last seen: 12 years 31 weeks ago
Pakistan
Joined: 2008-02-11
Posts: 4
Points: 0

Remove IE default margin and paddings.

Add

* { margin:0; padding: 0; }

maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

what class or div id should

what class or div id should i add this to? I already have it in a few places..

I experimented with adding it to a few elements of the navigation list, but it messes up the list..

The only problem with the list in IE6 occurs when the "current" tab is moused over and then the mouse is dragged somewhere on the page other than another element of the navigation list. When this is done, then the grey line at the bottom of the navigation list disappears, which looks sloppy

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

No, if you use that code,

No, if you use that code, the * IS the element-- it doesn't get added to any particular div. * is a regular expression character that means "everything" (though it doesn't seem to get inside lists for some reason).
Usually people put it at the top of their CSS sheets:

* {
margin: 0;
padding: 0;
}

body {
stuff
}
rest of page...

Adding it WILL change your page... the browsers you're looking in have default margins and paddings set on every element in your page... the * reset sets everything to ZERO. This means you'd have to go back and re-add what you want.

The reason we use this is because if you don't start at zero, then everything you set is different from browser to browser (for instance, I forget which, but IE uses either margins or padding on lists, and FireFox uses the other... try getting that the same in both!).

Dang, I wish I could see the whole thread while posting... this might be one of those IE bugs to do with anchors. There are a couple of bugs involving Haslayout, background images, etc...

I'm no expert, but I fake one on teh Internets

maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Thanks a lot Stomme, that

Thanks a lot Stomme, that makes sense.

I added * {
margin: 0;
padding: 0;
}

to my stylesheet, and I made adjustments to my other styles so that the page looks right in FF and IE7. However, I still have the same problem with my navigation menu in IE6.

Any idea how I can fix it?

Thanks again

maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Anyone?

Anyone?

maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

I got the code for this

I got the code for this navlist, which is giving me trouble in IE6, from here:

http://css.maxdesign.com.au/listamatic/horizontal05.htm

The browser support chart says it's supported by IE6, and when I look at the navlist in the above link using IE6, it works fine. That must mean I'm implementing it incorrectly on my site. But I copied the code exactly as it appears in the above link. So, something on my site must be interfering with the navlist.

I'm trying to figure it out, but am not making progress. Please if anyone can tell what it is on my page that might be interfering with my navlist when viewed using IE6, I would be eternally grateful. Thank you

Edit: The problem has to do with the div "main"'s styling. I figured this out by removing "main" and testing in IE6. If anyone can see how the div "main"'s styling may be interfering with the navlist in IE6, please tell me

maxplanck735
Offline
Enthusiast
Last seen: 12 years 24 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

SOLVED: I had to remove the

SOLVED: I had to remove the width: 100%; from "main." The navbar works perfectly in IE6 now.