Forum Moderators: not2easy

Message Too Old, No Replies

simple margin-top not applying in IE (first post ever, thx!)

margin-top not applying in IE

         

waXpoet

4:49 am on Oct 27, 2006 (gmt 0)

10+ Year Member



Hi everyone, I've never posted a message before asking for help so I hope I've included everything needed here. Thanks guys!

Simple little "margin-top: 28px" is only applying 14px in IE. All other styles on the page are working flawlessly.

I've posted the generated source code and relevant css- there really isn't anything else that could possibly be affecting this.
This seems like it should be so simple! #*$! IE? :p

--------------------------------------------------

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #e5e5e5; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#wrapper {
MARGIN: auto; WIDTH: 940px
}
#nav {
MARGIN-TOP: 28px
}
#nav UL {
DISPLAY: inline; FLOAT: right
}
#nav LI {
PADDING-RIGHT: 28px; DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: white; FONT-FAMILY: verdana, arial
}

<TABLE id=wrapper cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD id=top colSpan=2>
<DIV id=nav>
<UL>
<LI>Home
<LI>Project Gallery
<LI>About Us
<LI>Contact Us </LI></UL>
</DIV>
</TD>
</TR>
</TABLE>

tangor

10:42 am on Oct 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



One solution follows... I inserted a background color to show the div. Also suggested a floating width...browsers set smaller than the 940px won't show the last part of the menu items. Was there a reason for the table? (Removed in example)

BODY {
BACKGROUND: #e5e5e5; PADDING: 0px; MARGIN: 0px;
}
#wrapper {
margin : 0; width : 100%;
background-color : #000000;
}
#nav {
margin : 28px;
}
#nav UL {
DISPLAY: inline; FLOAT: right
}
#nav LI {
PADDING-RIGHT: 28px; DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: white; FONT-FAMILY: verdana, arial
}

<div id="wrapper">
<DIV id=nav>
<UL>
<LI>Home
<LI>Project Gallery
<LI>About Us
<LI>Contact Us </LI></UL>
</DIV>
</div>

waXpoet

4:51 pm on Oct 27, 2006 (gmt 0)

10+ Year Member



Thank you! Actually, your solution did not work but it made me think about the float as part of the problem.
I realized that if I remove the float the margin-top disapeared in firefox too, so I just used "align:right" and "text-align:right" on the divs and it worked.

Thanks for your post!