Why is IE 7 adding more padding here?

Megan posted this at 16:19 — 16th March 2007.

Joined: Jun 1999

Here is my page:

http://www.housing.uwaterloo.ca/fees/index.html

This is my CSS:

	#innercontent ul.inline {margin: 0 0 0 60px;}
	#innercontent ul.inline li {display: inline; list-style-type: none; display: block; float: left; width: 300px;}
	#innercontent h3 {clear: both;}
	#innercontent ul + h3 {margin: 0; padding: 20px 0 0;}

What I am trying to do is put in some space between the set of links in the middle and the heading immediately below it. That's what the #innercontent ul + h3 bit is doing. That works fine in Firefox and Opera. In IE I get way more than 20 pixels of padding. Why is it doing that????

(I am also interested in any ideas for a better way to select just that heading without putting in an ID or class. Just being pendantic )

Megan
Connect with us on Facebook!

Roo posted this at 17:43 — 16th March 2007.

She has: 840 posts

Joined: Apr 1999

I don't know the answer, but it's doing the same thing in IE6, also in IE6 there isn't as much padding on the left of that block of links are there is in Firefox.

Roo

Megan posted this at 18:53 — 16th March 2007.

She has: 11,421 posts

Joined: Jun 1999

Roo;216557 wrote: I don't know the answer, but it's doing the same thing in IE6, also in IE6 there isn't as much padding on the left of that block of links are there is in Firefox.

That's interesting, because I'm not seeing the extra padding on the header in IE 6. It really shows when you try to select the text in IE 7. There's a whole bunch of extra space there.

Thanks for pointing out the difference in the padding on the list... I'm not sure if that bothers me enough to fix it...

Thanks for the effort, jGirlyGirl!

Megan
Connect with us on Facebook!

Jacine posted this at 18:31 — 16th March 2007.

They have: 27 posts

Joined: Mar 2007

Hi Megan,

That's an odd one. I was just playing around with it and couldn't figure it out myself.

The only way I was able to get it to display correctly was to put all bullets in one

(you had two) and set height and width attributes manually. That's probably not feasible and definitely not the best way to do it, but it does achieve the look you want in IE and FF, and doesn't mess with the tag at all.

#innercontent ul.inline {margin: 0 0 0 60px; padding:0px; width:600px; height:40px;}
#innercontent ul.inline li {display: inline; list-style-type: none;}
#innercontent ul.inline li a {display: block; float:left; width:300px;}
#innercontent h3 {clear:both;}

If you don't use this code, and end up figuring it out please let us know

demonhale posted this at 05:27 — 17th March 2007.

He has: 3,278 posts

Joined: May 2005

Actually without that CSS above it still doesn't matter, tried clearing it, removing it and whatnots, the display on both ie and FF is still the same. That means that css does nothing... Although adding a tag on the html in between the link and the heading might give you the space you need...