Soldato
- Joined
- 16 Nov 2003
- Posts
- 9,682
- Location
- On the pale blue dot
I'm putting together a basic site for a friend's company, a few static pages formatted using CSS. The layout is pretty much done and works on both IE and Firefox except for one thing.
I have a 'body' div that has a padding of 20px, in IE this looks uniform but in Firefox the top and bottom are a bit too large as it seems to adding the paragraph block height to the padding. No problem he says, get rid of the top and bottom padding: this makes the text touch the top edge of the body. Ahhh! Any ideas?
Site: http://www.sidtheturtle.co.uk/ocuk/cssissue/
CSS:
HTML:
I have a 'body' div that has a padding of 20px, in IE this looks uniform but in Firefox the top and bottom are a bit too large as it seems to adding the paragraph block height to the padding. No problem he says, get rid of the top and bottom padding: this makes the text touch the top edge of the body. Ahhh! Any ideas?
Site: http://www.sidtheturtle.co.uk/ocuk/cssissue/
CSS:
Code:
div.header
{
background: #FFFFFF;
background-image: url(logo.gif);
background-repeat: no-repeat;
background-position: center top;
border: 1px solid #593B53;
height: 200px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 20px;
padding-top: 0;
padding-bottom: 0;
width: 850px;
}
div.navigator
{
border: 0;
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 892px;
}
div.body
{
background: #FFFFFF;
border: 1px solid #593B53;
border-top:0;
padding: 20px;
margin: 0;
margin-left: auto;
margin-right: auto;
width: 850px;
}
div.footer
{
background: #FFFFFF;
border: 1px solid #593B53;
font-size: smaller;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
width: 850px;
}
#navlist
{
border: 0;
border-bottom: 1px solid #593B53;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0;
margin-left:auto;
margin-right:auto;
padding: 0;
padding-bottom: 3px;
text-align: center;
}
#navlist li
{ display: inline;
list-style: none;
margin: 0;
}
#navlist li a
{
background: #8E6B8B;
border: 1px solid #593B53;
border-bottom: none;
padding: 10px;
padding-bottom: 3px;
padding-top: 5px;
text-decoration: none;
}
#navlist li a:link,
#navlist li a:visited
{
color: #FFFFFF;
}
#navlist li a:hover
{
background: #593B53;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
color: #000000;
}
body
{
background: #8E6B8B;
font-color: #000000;
font-family: arial, sans-serif;
font-size: medium;
margin: 0;
text-align: justify;
}
img.amphlettchatterton
{
border: 1px solid #593B53;
float:right;
margin-left: 20px;
}
img.contactmap
{
border: 1px solid #593B53;
float:left;
margin-right: 20px;
}HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Placeholder</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="header">
</div>
<div class="navigator">
<ul id="navlist">
<li id="active"><a id="current" href="index.html">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="'">Link 7</a></li>
</ul>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eu enim. Morbi viverra risus non ante. Curabitur euismod consequat lacus. Quisque eget arcu et odio luctus sodales. Praesent sollicitudin sapien sed est. Suspendisse elit risus, eleifend a, consectetuer sit amet, suscipit vitae, tortor. Nullam varius tellus. Etiam pharetra nisl elementum augue. Praesent congue ante. Nam mauris. Etiam tempor. Integer ut lacus in risus laoreet condimentum. Praesent volutpat.</p>
<p>Suspendisse libero neque, vehicula dignissim, commodo euismod, elementum vel, diam. Vivamus eu magna. Pellentesque tempor purus a nisi. Etiam eget erat a dui pellentesque dapibus. Fusce placerat ultricies nulla. Nunc ante elit, ultrices sed, fermentum ultricies, semper id, quam. Suspendisse potenti. Etiam lacus nibh, bibendum nec, ultrices ut, tincidunt vitae, ante. Nunc accumsan. Nam porta dolor eget urna. Vivamus arcu metus, pharetra non, ullamcorper accumsan, tincidunt in, metus. Etiam feugiat convallis mauris. Duis lectus.</p>
<p>Integer convallis, neque vel gravida aliquam, felis leo ornare ligula, vel porta tortor tellus et dolor. Duis eu odio eget nulla eleifend ornare. Aliquam lorem turpis, faucibus eu, tincidunt ut, tempor vitae, libero. Morbi tristique odio in tellus. Praesent aliquet fringilla diam. Proin id velit. Nunc vulputate mauris consectetuer nunc. Aliquam ut mauris. Nulla hendrerit metus nec ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam venenatis lorem in eros. Mauris eu tellus non lacus gravida consectetuer. Aliquam id lectus nec est sollicitudin vehicula. Maecenas nulla. In tincidunt dapibus risus. Sed tellus arcu, viverra vitae, sagittis vel, viverra at, turpis. Etiam condimentum velit iaculis tortor. Quisque ultricies nulla vel pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Sed tincidunt. Aliquam porta. Nam quis mi. Quisque tincidunt. Sed vitae velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum magna arcu, malesuada bibendum, sodales sit amet, malesuada sit amet, urna. Aliquam erat volutpat. Aliquam posuere, magna nec scelerisque sagittis, dui risus dapibus purus, eu placerat massa massa sit amet quam. Aliquam dignissim. Vestibulum pede. In dictum vulputate pede. Cras eu velit. Sed lobortis pretium enim. Aenean tincidunt pretium massa. Duis egestas, nulla vel venenatis adipiscing, eros ante placerat erat, a fringilla ligula purus vel ligula. In hac habitasse platea dictumst.</p>
<p>Sed adipiscing dignissim mi. Maecenas arcu. Nulla ut magna. Vivamus eget leo vitae erat pharetra porta. Sed justo nunc, pretium non, laoreet id, fringilla sit amet, dolor. Pellentesque interdum. Integer at urna. Aenean sodales neque vitae lacus. Aenean id tellus quis quam lacinia vestibulum. Curabitur blandit nisi sit amet mauris. Curabitur placerat justo ut tortor. Vivamus condimentum dolor a sapien. Pellentesque metus lectus, mollis in, faucibus at, tincidunt vitae, nisi.</p>
</div>
<div class="footer">
Footer text
</div>
</body>
</html>
Same effect, just shorthand...