Sent by Jukka K. Korpela on 12 March 2007 14:02
On Mon, 12 Mar 2007, Phillip Cavaco wrote:
> I'm having a problem with margin-top in a div.
You don't specify what the problem is, but it seems that it's the lack of
top margin for a <div> element despite explicitly setting a 30px margin.
> Must be something with the float properties under IE.
That's generally a good guess when IE and float are involved, but
apparently the guess is wrong this time.
> </p>
> <br clear="left" />
> <div class="division"></div><----problem is here
On IE 6, and on IE 7 in Quirks mode, there is no margin between the <div>
and preceding content, despite this setting:
> .division{
> width:100%;
> height:1px;
> border-top:#adadad dotted 2px;
> margin:30px 0px 35px 0px;
> }
The explanation is that width:100% and height:1px (or either of them
alone) puts the browser into a mode where it makes the <div> one line
high. Don't ask me why.
Anyway, removing those declarations removes the problem.
The setting width:100% is effectively the default, but setting it
triggers the bug. And the default height is zero but trying to make the
height one pixel turns its much bigger. (You could deal with the problem
by setting line-height: 1px, but it's easier to remove the problematic
settings than add a someone odd setting.)
Since an empty <div> is usually not good markup (though might be needed in
some dynamic contexts) and since it may cause styling issues, as here, you
might consider setting the border for some "natural" element instead. You
could wrap the preceding elements inside a <div> and set bottom padding
and bottom border for it. Alternatively, you could set a top border (and a
top margin) for the element that comes next in the sequence.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
