2 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 31 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I know this question has been asked many times but even when I use a universal code for margin 0 and padding 0 - I still have rendering problems. FF displays a lesser margin height than IE. Forgive me if this is a stupid question. I did research previous questions but with no real solution. Please advise.

SAMPLE TEMPLATE

* { margin:0; padding:0 }
div { margin:0; padding:0 }
BODY {
font-size: .75em;
background: #000 url(images/bg.gif) top repeat-x;
font-family: Tahoma, Helvetica, sans-serif;
color: #333;
}
.whiteBg { background:#fff; height:100%; width:700px; overflow:hidden }
.currentEvents { padding:14px 14px 20px 14px; background:#fff; border-left:1px solid #333; font-size:90% }
.cellBox { width:100%; margin:0 0 15px 0; }
.cellBox img { border:1px solid #505059; float:left; margin:0 8px 0 0 }

Duis autem vel eum
Vulputate velit esse molestie consequat, vel illum eu feugiat nulla.
Exerci tation ullamcorper
suscipit nisl ut aliquip ex ea commodo consequat velit esse molestie.
Vel illum dolore eu feugiat
nulla facilisis at vero velit esse molestie consequat accumsan.
Autem vel eum
Vulputate velit esse molestie consequat, vel illum eu feugiat nulla.


wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE is incorrectly expanding

IE is incorrectly expanding cellbox to contain the floating image, while Firefox allows the image to 'hang' outside it's container. Add overflow: hidden; to .cellbox to have Firefox contain the image.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 31 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Great!

Thank you very much! It worked like a charm. This info was very helpful.