I have some problem with "pagenavi" - which is displaying correct in FF, and no proper in IE. Here is a picture: HTML: <span class="pagenumh">1</span> <a class="pagenum" href="?&sort=tt&start=10">2</a> <a class="pagenum" href="?&sort=tt&start=20">3</a> <a class="pagenum" href="?&sort=tt&start=100">11</a> <span class="pagenum">...</span> <a class="pagenum" href="?&sort=tt&start=10">»</a> </div> </div> <div class="right" style="margin-left: 20px;"/> HTML: CSS: #pagenavi{ background: #914b99; height: 22px; text-align: right; color: #ffffff; margin: 0px; padding-top:5px; } .pagenum{ background: #f3e3f5; border: 1px solid #000; color: #914b99; font-family:Tahoma,Trebuchet MS,Helvetica,Verdana,sans-serif; font-size:11px; margin:3px; padding:2px 4px; } HTML: Any suggestion is more than welcome
Well... your problem seems to be that you aren't declaring line-heights, as well as that IE and FF round off numbers differently - though there are a slew of other things 'wrong' here, and some stuff that's just plain waste. WAY too much HTML for something so simple. You've got a list here, so it only needs ONE class. You've got a monster case of classitus, throwing classes at elements that shouldn't have classes - This is quite obviously a LIST of pages, so maybe some form of list tags are in order? Tahoma is part of the M$ core fonts - as such the odds of it being present without Trebuchet MS or Verdana are next to zero so declaring those two is pointless. To do this, I'd make each of those items a LI. Put the styling for the current page on all LI, then the styling for just those with links on them on... that's right, the links. We float the links left to put them in the correct order, then float the list right to put it over on the side we want it. Your bar around it would be a separate div, which lets us apply the top/bottom spacing as padding instead of margins avioding that whole nasty collapsing-margin issue should other elements interact poorly. Since it's floats we'll need overflow:hidden to wrap floats in standards compliant browsers, and trip haslayout so IE6/earlier will do the same. (width:100%; should do the trick here). To avoid the line-height rounding bug we need to use a line-height that is an odd number, so we're going to end up at 23 px tall instead of 22. (15px line-height + 6px for top/bottom padding + 2px top/bottom border). If we make the anchors inline-block we can declare a height on them to overwrite the contents of their parent container, letting us do a full box hover effect too. Doing this reduces the amount of markup greatly making that part clearer, and making better use of the caching model. You use this on multiple pages on a site (like a forums) and put the CSS in an external file, smaller HTML + bigger CSS == better use of browser cache. So something like this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Page list test </title> <style type="text/css"> * { margin:0; padding:0; } .pageList { overflow:auto; /* wrap floats */ width:100%; /* trip haslayout, wraps floats IE 6/earlier */ padding:3px 0; margin:1em 0; /* just move it down the page a bit so we can see it clearer */ background:#949; } .pageList ul { list-style:none; float:right; } .pageList li { float:left; overflow:hidden; /* chop off inline element padding */ font:bold 11px/15px tahoma,helvetica,sans-serif; margin:0 3px; padding:0 4px; color:#000; background:#EEE; border:1px solid #000; } .pageList a { /* inline-block lets us actually set the height */ display:-moz-inline-block; display:-moz-inline-box; display:inline-block; height:15px; padding:0 4px; margin:0 -4px; text-decoration:none; font-weight:normal; color:#849; background:#FEF; } .pageList a:active, .pageList a:focus, .pageList a:hover { color:#FFF; background:#F0F; } </style> </head><body> <div class="pageList"> <ul> <li>1</li> <li><a href="?&sort=tt&start=10">2</a></li> <li><a href="?&sort=tt&start=20">3</a></li> <li><a href="?&sort=tt&start=100">11</a></li> <li><a href="?&sort=tt&start=10">»</a></li> </ul> <!-- .pageList --></div> </body></html> Code (markup): Valid XHTML 1.0 Strict, tested working in IE 5.5, 6 & 7, Firefox 2 & 3, Opera 9.27 and 9.51, and Safari 3.