3 replies [Last post]
bdk
Offline
newbie
Last seen: 16 years 5 weeks ago
Joined: 2005-06-29
Posts: 6
Points: 0

I'm designing a page:

http://www.imsuden.f2s.com/fall/news/

In IE6 the 'News Archive' <h2> headline doesn't have a line break (or a margin?) above it. Is there any reason for this, and can I remedy the problem?

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[fixed] IE6 omits a line break; Firefox and Opera fine

I have had suspicions that IE does not properly collapse margins, and I think that's the case here. Two things should keep the h2 in #archive from having its margin collapsed. First, #archive is float, and floats should not collapse margins. Second, there is top padding which should stop collapse. But, IE is still doing it. Over in #news, the h2 margin should collapse except for the padding and IE does that right.

My untested suggestion is to make the h2 {margin-top: 0;} in both #archive and #news, and use top padding in those divs to adjust position of the h2.

Now, you have this in your stylesheet;

 
#archive h2 h3 { 
	font-size: 1em; 
} 
 
#news h2 h3 { 
	font-size: 1em; 
}
where I think you mean, with my suggested change;
 
#archive h2, #archive h3 { 
    margin-top: 0; 
    font-size: 1em; 
    } 
 
#news h2, #news h3 { 
    margin-top: 0; 
    font-size: 1em; 
    }
Check your h3, you may not want 0 margin on it.

One other thing you might try first, make #archive {position: relative;}. That will cure a number of IE float issues. Test well, it can also cause a number of IE float issues. Hey! It's IE, what else would you expect?

Did I say these were all untested? Good.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bdk
Offline
newbie
Last seen: 16 years 5 weeks ago
Joined: 2005-06-29
Posts: 6
Points: 0

[fixed] IE6 omits a line break; Firefox and Opera fine

Cheers Gary, setting the h2 margin-top in both divs to 0 worked a treat

btw, was my original code:

#news h2 h3

not correct?

Ta.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[fixed] IE6 omits a line break; Firefox and Opera fine

bdk wrote:
Cheers Gary, setting the h2 margin-top in both divs to 0 worked a treat

Good, thought it might.

Quote:
btw, was my original code:
#news h2 h3
not correct?

Assuming you want the h2s and h3s in the #news group to be {font-size: 1em;}[1], no. What you said is make any h3 that is nested in an h2 that is nested in #news {font-size: 1em;}. It will have no effect on h2. In addition, it's an illegal construct, since a heading may contain only inline elements.

cheers,

gary

[1] To treat them separately, you need a comma delimited list.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.