Forum Moderators: not2easy

Message Too Old, No Replies

Inner Div Margin Pushing Outer Div Around

margin's on div's offseting other div's.

         

RobSil

3:45 pm on Jan 6, 2009 (gmt 0)

10+ Year Member



Hey all,

Has anyone ever seen margin's on a div apparently push the containing div around a bit, but in Firefox only? I have the following structure...

<div id="topTwoThirds">
<div id="topTwoThirdsLeft">
<div id="topLeftTop"></div>
<div id="topLeftMid">

<div id="leftcurveinstructiontext">Please enter your username and password in the fields to the right to log in. Fields marked with a '*' are required.</div>

</div>
<div id="topLeftBottom"></div>

</div>
<div id="topTwoThirdsRight">
<div id="topTwoThirdsRightContent">

<div id="emailrow"><span class="loginprompt">email</span><input class="loginfield" id="email" name="email" type="text" value="" />*</div>
<div id="passwordrow"><span class="loginprompt">email</span><input class="loginfield" id="email" name="email" type="text" value="" />*</div>

</div>

<div id="topTwoThirdsRightFooter"></div>
</div>
</div>
<div id="bottomOneThird"></div>

Although that's a bit cluttered... from the core of that comes...
<div id="topTwoThirdsRight">
<div id="topTwoThirdsRightContent">

<div id="emailrow"><span class="loginprompt">email</span><input class="loginfield" id="email" name="email" type="text" value="" />*</div>
<div id="passwordrow"><span class="loginprompt">email</span><input class="loginfield" id="email" name="email" type="text" value="" />*</div>

</div>

<div id="topTwoThirdsRightFooter"></div>
</div>

When I assign a margin to div#emailrow, the background-image of div#topTwoThirdsRightFooter seems to be pushed down by an equal ammount. I know this isn't a full page link, but there is quite a bit to the page this is occurring on. The entire page is a bit tricky to post here in 1 thread but if anyone want's to see it live, check out <snip>. I'll edit this post and remove that link as soon as people are able to view the issue. I have validated the page using the W3C validator and it is valid html and css.

Thx,
Rob

p.s. Can an admin verify if the posting of that URL is appropriate to the guidelines for this forum or not? I was not certain, but felt it was much more effective of a demonstration than posting a large ammount of html/css to this thread. Thx!

[edited by: RobSil at 3:48 pm (utc) on Jan. 6, 2009]

[edited by: swa66 at 4:17 pm (utc) on Jan. 6, 2009]
[edit reason] No personal URLs, please see ToS [/edit]

simonuk

12:54 pm on Jan 9, 2009 (gmt 0)

10+ Year Member



Better post the css as well...