...

View Full Version : Top margin seemingly incorrectly calculated in IE7



gsnedders
03-31-2009, 10:09 PM
In http://secret.gsnedders.com/foo3.html the date beside the header appears (vertically) down below it, as if the margin isn't being set to zero on the date. Without a copy of IE (of any version, yet alone 7 specifically, where this issue occurs) to play with, I'm rather lost about possible causes. Any ideas?

QBall777
03-31-2009, 10:36 PM
Not quite sure what you mean. Is your div tag wide enough for the header and date?

After looking at your code I think its because Lead Developer, Anolis is in a <h3> tag. This will automatically give you a line break.

gsnedders
03-31-2009, 10:54 PM
After looking at your code I think its because Lead Developer, Anolis is in a <h3> tag. This will automatically give you a line break.

Compare IE7 with any other browser with CSS 2.1 selectors support. The h3 has is floated left, and the paragraph following it has no margins, thus should appear along side.

QBall777
03-31-2009, 11:12 PM
If you remove the <p> or set the <p> margin-bottom: 0ex; it will work fine.

<p><abbr class=dtstart title=20080216>February 2008</abbr>
<abbr class=dtend title=20081119>present</abbr>.

Excavator
03-31-2009, 11:17 PM
There seems to be a lot going on here I don't recognize. It validates (???) as HTML5, I've never seen a + sign used in the CSS like that and I always hated how html lets you leave elements open like that.

A ul that only contains the title of the next ul, I wonder if that shouldn't be a dl instead?

This seems to work though. Swapped out the + for a comma but the + seemed to work too -

h3, p {
margin-top: 0;
float: left;
}

QBall777
03-31-2009, 11:23 PM
Yeh I agree with Excavator looks very crowded in there.

h3, p {
margin-top: 0;
float: left;
}

Works fine this end.

gsnedders
03-31-2009, 11:25 PM
A ul that only contains the title of the next ul, I wonder if that shouldn't be a dl instead?

I'd argue that it isn't a name-value grouping though (as implied by a definition list).


This seems to work though. Swapped out the + for a comma but the + seemed to work too -

h3, p {
margin-top: 0;
float: left;
}

, and + are very different in CSS. "," allows more than one selector to match a group of rules, and "+" is a the adjacent sibling combiner (i.e., the selector on the right is a sibling with no element siblings in between of the selector on the left), so that doesn't fix the problem (there are other things that'll break).

abduraooft
04-01-2009, 08:14 AM
html {
font: 0.95em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
padding: 5ex 5em;
color: black;
background-color: white;
} Did you mean em? btw, I wouldn't apply padding/margin directly on html selector.

gsnedders
04-01-2009, 02:27 PM
So, I've made both the h3 and p inline-block in things that support it, and inline in things that don't, which basically works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum