homepage Welcome to WebmasterWorld Guest from 107.22.37.143
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Text padding issues between FF and IE7
Megalith




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

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.

 

Setek




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

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 :)

Megalith




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

Thanks...got it working just fine now.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved