homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Text padding issues between FF and IE7
Megalith

5+ Year Member



 
Msg#: 3293904 posted 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

5+ Year Member



 
Msg#: 3293904 posted 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

5+ Year Member



 
Msg#: 3293904 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved