PDA

View Full Version : firefox border



cooldaddy
Nov 28th, 2006, 09:34 AM
Hi, I'm using the code below to show some highlighted stuff on my site. Works ok in IE however Firefox seems to display only the top of the bordered div. (only the top of the border is visible in firefox )... How come, and how to solve it ?


<div style="margin-top: 50px;"></div>

<div style="margin: 0 auto; width: 300px; border: 1px dotted #ccc;">
<div style="float: left; padding-top:20px;padding-left: 20px;">
Todays highlighted:
</div>
<img style="float: right;padding-right:20px;" src="http://www.mysite.com/blabla/bla.gif">
</div>

<div style="clear:both; margin-bottom: 50px;"></div>

ahallicks
Nov 28th, 2006, 09:39 AM
Try creating a separate class called spacer or something and sticking the clear: both; in that then put

<div class="spacer"></div>

at the bottom of the page where you want the border to go to.

cooldaddy
Nov 28th, 2006, 11:12 AM
i tried that but it didnt solve the problem..

ronaldb66
Nov 28th, 2006, 01:21 PM
Elements that only contain floated content will collapse to nothingness--as FireFox renders correctly, and IE does not.

Stick the clearing element inside the container div:

<div style="margin: 50px 0;"></div>

<div style="margin: 0 auto; width: 300px; border: 1px dotted #ccc;">
<div style="float: left; padding-top: 20px;padding-left: 20px;">
Todays highlighted:
</div>
<img style="float: right;padding-right:20px;" src="http://www.mysite.com/blabla/bla.gif">

<div style="clear:both;"></div> <-- inside outer div
</div>

cooldaddy
Nov 28th, 2006, 05:18 PM
That solved the problem ;) bedankt !!