Welcome to WebmasterWorld Guest from 174.129.96.175

Forum Moderators: not2easy

Text padding issues between FF and IE7

   
2:47 am on Mar 27, 2007 (gmt 0)

5+ Year Member



I've got a simple little div going with some text inside:

HTML:

<div class="slot">
<p class="stext">
<u>3/10/07</u>: This is filler.<br />
<u>3/21/07</u>: This is filler.<br />
<u>3/25/07</u>: This is filler.<br />
<u>3/27/07</u>: This is filler.<br />
<u>3/29/07</u>: This is filler.<br />
</p>
</div>

CSS:

.slot {width:236px;
background:#CCCCCC;
height:100px;
border-top:6px double gray;
border-bottom:6px double gray;}

p.stext {font-size:.8em;
line-height:15px;
padding-left:10px;}

In FF, there seems to be a good amount of padding at the top of the div, but not in IE7.

I assume that the <p> tag is what is applying artificial padding in FF, but it seems to be ignored in IE7? Is there a solution for this? Apparently html>body doesn't work with IE7, as a means of creating seperate padding styles for each browser.

3:31 am on Mar 27, 2007 (gmt 0)

10+ Year Member



Sounds like you're using the initial margin and padding values of the browser.

By default, IE vs. Firefox et al. all have differing default margins on elements. The best way to fix this is by resetting every element you've got:

* { margin: 0;
padding: 0; }

... before any other rules, and then setting them yourself:

p { margin: 10px 0; }
h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
table { margin: 10px 0; }
ul, ol { margin: 10px 0 10px 40px; }

... etcetera :)

9:17 pm on Mar 27, 2007 (gmt 0)

5+ Year Member



Thanks...got it working just fine now.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month