Sensibilium
Programmer
I have recently put together a new layout for my personal site, but since this morning I have been struggling to make Firefox (1.0.5) produce the same output over one page (IE & Opera display correctly).
The XHTML involved consists of a DIV holding a couple of headers (H1/H2), a subtitle (P class="title"), a few normal paragraphs. This is then directly followed by a DIV containing an Unordered List (UL), setting the list items (LI) to display:inline.
Here's the relevent XHTML:
And following is the relevent CSS:
The problem occurs on the bodyboxbuttons class, causing the top position of the unordered list to either end up 1 pixel above it's expected location, as well as 1 pixel below.
See below for example screenshots.
Shows result in Firefox at standard font size.
Shows problem when font-size increased using CTRL+Mousewheel.
Any help greatly appreciated, I've been ripping my hair out all day on this one.
Ahdkaw
The XHTML involved consists of a DIV holding a couple of headers (H1/H2), a subtitle (P class="title"), a few normal paragraphs. This is then directly followed by a DIV containing an Unordered List (UL), setting the list items (LI) to display:inline.
Here's the relevent XHTML:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Page description" />
<meta name="keywords" content="Page keywords" />
<style type="text/css" media="all">
@import url(/css/mycss.css);
</style>
</head>
<body>
<div id="threecols">
<div class="content">
<div class="bodyboxcontain">
<h1>Welcome!</h1>
<p class="title">A bit of descriptive text describing the site.</p>
</div>
<div style="clear:both"> </div>
<div class="bodyboxcontain">
<h2>News Item 1</h2>
<p class="timestamp">Monday 15 August 2005</p>
<p>News item content here.</p>
</div>
<div class="bodyboxbuttons">
<ul>
<li><a href="#" title="View Previous Comments">VIEW COMMENTS [0]</a></li>
<li><a href="#" title="Add New Comment">ADD COMMENT</a></li>
</ul>
</div>
<div style="clear:both"> </div>
<div class="bodyboxcontain">
<h2>News Item 2</h2>
<p class="timestamp">Wednesday 27 July 2005</p>
<p>News item content goes here.</p>
</div>
<div class="bodyboxbuttons">
<ul>
<li><a href="#" title="View Previous Comments">VIEW COMMENTS [0]</a></li>
<li><a href="#" title="Add New Comment">ADD COMMENT</a></li>
</ul>
</div>
</div>
<div id="sideA">
<div class="boxcontain">
<h4>Side Box Title</h4>
<p>Side Box content</p>
<p class="footbox">Footer link area</p>
</div>
<div class="boxcontain">
<h4>Side Box Title</h4>
<p>Side Box content</p>
<p class="footbox">Footer link area</p>
</div>
</div>
<div id="sideB">
<div class="boxcontain">
<h4>Side Box Title</h4>
<p>Side Box content</p>
<p class="footbox">Footer link area</p>
</div>
<div class="boxcontain">
<h4>Side Box Title</h4>
<p>Side Box content</p>
<p class="footbox">Footer link area</p>
</div>
</div>
</div>
<div id="footer">
<p><a href="#" title="Footer links">Footer links</a></p>
</div>
</body>
</html>And following is the relevent CSS:
Code:
/* Main BODY stylings */
body{color:#333;background-color:#99C;margin:0;padding:0;font:300 .73em verdana,arial,helvetica,sans-serif;line-height:normal;}
/* Stylings for three-column content section */
/* Provides relative position for child absolute positions */
div#threecols{float:left;width:100%;padding:0;margin:0;position:relative;border-top:1px solid #336;}
/* Stylings for center column (content column) */
/* All the content boxes belong to the content class. */
div.content{position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;height:auto;min-width:120px;margin:0 190px 0;padding:10px 0 30px;
background-color:white;border-left:1px solid #336;border-right:1px solid #336;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
.content>p{margin:0px;}
.content>p+p{text-indent:30px;}
/* Stylings for left-hand column */
...
/* Stylings for right-hand column */
...
/* Stylings for footer bar */
...
/* END MAIN DIV STYLINGS (toplogo, topnav, content, sideA, sideB, & footer) */
/* Stylings for top navigation inline unordered list */
...
/* Headers and Paragraph stylings */
h1{font-weight:800;font-size:1.63em;line-height:normal;margin:0;padding:0;}
h2{font-weight:800;font-size:1.23em;line-height:normal;margin:0;padding:0;}
h3{font-weight:800;font-size:1.13em;line-height:normal;margin:0;padding:0;}
h4{font-weight:800;font-size:1.03em;line-height:normal;margin:0;padding:0;}
h5{font-weight:800;font-size:1.03em;line-height:normal;margin:0;padding:0;}
h6{font-weight:800;font-size:0.93em;line-height:normal;margin:0;padding:0;}
p{font-weight:300;font-size:0.93em;line-height:normal;margin:0;padding:0;}
/* Stylings for ordinary links (within content) */
...
/* Stylings for content boxes (centre column) */
div.bodyboxcontain{padding:0;margin:0 10px;font-weight:300;border:1px solid #336;}
.bodyboxcontain h1{border-bottom:1px solid #336;background:#336 url(/images/title_bg_drkblu.png) repeat-y left;padding:1px 1px 1px 6px;margin:0;color:#FFF;}
.bodyboxcontain p.title{font-size:.93em;line-height:1.33em;padding:2px 2px 2px 6px;margin:1px;}
.bodyboxcontain h2{border-bottom:1px solid #336;background:#336 url(/images/title_bg_drkblu.png) repeat-y left;padding:1px 1px 1px 6px;margin:0;color:#FFF;}
.bodyboxcontain p.timestamp{border-bottom:1px solid #336;background:#66C url(/images/button_bg_blu.png) repeat-y left;color:#FFF !important;font-size:.93em;line-height:normal;padding:2px 6px;margin:0;}
.bodyboxcontain p{font-size:1.13em;line-height:1.53em;background-color:#FFF;padding:6px;margin:0px;}
.bodyboxbuttons{padding:0;margin:0 10px;}
.bodyboxbuttons ul{text-align:right;white-space:nowrap;margin:3px 0;padding:0;font-size:.93em;font-weight:800;line-height:normal;list-style-type:none;}
.bodyboxbuttons ul li{display:inline;margin:0;padding:0;}
.bodyboxbuttons ul li a{padding:3px 6px 3px 3px;margin:0;text-decoration:none;border-left:1px solid black;border-right:1px solid black;border-bottom:1px solid black;background:#66C url(/images/button_bg_blu.png) repeat-y right;}
.bodyboxbuttons ul li a:link{color:#FFF !important;background-color:#66C;}
.bodyboxbuttons ul li a:visited{color:#CCC !important;background-color:#66C;}
.bodyboxbuttons ul li a:active{color:#CCF !important;background-color:#66C;}
.bodyboxbuttons ul li a:hover{color:#66C !important;background:#CCF url(/images/button_bg_blu_on.png) repeat-y right;}
/* Stylings for linking/other boxes (flanking columns) */
...
/* Form stylings */
...The problem occurs on the bodyboxbuttons class, causing the top position of the unordered list to either end up 1 pixel above it's expected location, as well as 1 pixel below.
See below for example screenshots.
Shows result in Firefox at standard font size.
Shows problem when font-size increased using CTRL+Mousewheel.
Any help greatly appreciated, I've been ripping my hair out all day on this one.
Ahdkaw