...

View Full Version : Div Border Causing Positioning Problems



Doctor_Varney
03-05-2009, 02:51 PM
Can anyone please explain to me why this is happening?

With the border on (http://www.joolzfx.com/test_area/problemborder/html/border-on.html)

With the border off (http://www.joolzfx.com/test_area/problemborder/html/border-off.html)



It is driving me insane and I cannot work out why a border should affect my layout so terribly. The red border was originally put around the nested div, just to help as a visual aid whilst positioning. Now I am unable to remove it, as you can see. Without the border, all of my positioning calculations are shot to the wall, leaving me completely lost. So I desperately need to know why this is happening and how to fix it.

I would be so grateful for any advice.

Many thanks!

abduraooft
03-05-2009, 02:57 PM
See http://complexspiral.com/publications/uncollapsing-margins/

Doctor_Varney
03-05-2009, 03:14 PM
See http://complexspiral.com/publications/uncollapsing-margins/

Thanks, Abdura - but I'm sorry, I just don't understand what collapsing margins have to do with this border problem...?

abduraooft
03-05-2009, 03:45 PM
I think you need it like

#varneyepitaph {/*border-o...style.css (line 9)*/
background:transparent url(../images/interface/staff-swap_varney.jpg) no-repeat scroll 50% 0;
/*border:1px solid #990000;*/
height:370px;
margin:103px 0 0 275px;
padding-top:258px;
width:246px;
}
#varneyepitaph p, #hylandepitaph p {/*border-o...style.css (line 14)*/
color:#000000;
font-size:0.7em;
font-weight:bolder;
line-height:0.9em;
margin-left:15px;
/*margin-top:258px;*/
text-align:justify;
width:190px;
}
?

Doctor_Varney
03-05-2009, 04:12 PM
WOW! Thank you VERY much, Abdura. I followed that and it has completely fixed the problem.

I'm still a bit lost on exactly why it should have happened in the first place, but I can tell this is something to do with using padding and 'transparent' I don't know how it's worked - but it has. I just hope I can remember this, for future reference. Thanks again!

The margin collapse issue is very difficult for me to get my head around. Is it related, because if it is, I'll try and study it.

Doctor V



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum