Absolute bottom positioned blocks off by one pixel?

Question

It appears that position: absolute blocks that are positioned relative to the bottom of the containing block are off by one pixel in some browsers.

WebKit browsers (Safari and Chrome) render it with a one pixel gap between the bottom of the nav block and the body block.

Is there a browser independent way to get bottom positioned absolute blocks to be positioned the same way?

The markup:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
   <head>
     <title>gap test</title>
     <style type="text/css">
 body {
     margin: 0;
 }

 #header {
     position: relative;
 }

 #logo {
     background-color: #f88;
     height: 100px;
 }

 #nav {
     position: absolute;
     bottom: 0px;
 }

 #nav ul {
     margin: 0;
     padding: 0;
 }

 #nav li {
     list-style-type: none;
     display: inline;
 }

 #nav li a {
     background-color: #ccf;
     margin: 0 10px;
     padding: 0 10px;
     border: none;
 }

 #body {
     background-color: #8f8;
     height: 100px;
 }
     </style>
   </head>

   <body>
     <div id="header">
       <div id="logo">
         Logo.
       </div>
       <div id="nav">
         <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
         </ul>
       </div>
     </div>
     <div id="body">
       Body.
     </div>
   </body>
 </html>

score 3 · Accepted Answer · answered Jan 27 '11 at 18:16

3

Add float: left to your #nav li a css rule and it will eliminate the space. You will need to increase your left and right margins to 15px to get the same amount of space between items though.

answered Jan 27 '11 at 18:16

Adrian

2,911
1
17
24

Awesome, that worked. I never would have thought of floating to fix the problem. Any idea why that makes a difference? – Aoife Jan 27 '11 at 18:20
I suspected that in chrome and safari there was a margin or padding pushing off the anchor element inside the li. By floating it only other floated elements can "push off" it in this way. I didn't dig real deep into it to see what the root cause is but this fixes it in chrome/safari and as far as I could tell doesn't have any negative side effects in FF or IE – Adrian Jan 27 '11 at 18:25

score 0 · Answer 2 · answered Jan 27 '11 at 18:14

0

It seems to be working fine in all browsers on my Mac. The problem may be due to javascript of you have any.

Screenshot

answered Jan 27 '11 at 18:14

ChuckJHardy

6,956
6
35
39

Interesting that it's different on the Mac. I tried with Chrome and Safari on Windows. – Aoife Jan 27 '11 at 18:30

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Sadly, you'll probably need to implement one of the answers provided to this question: Is there any way to do "if IE" inside of a CSS file?

You can count on different browsers to render things slightly differently. So, you'll almost always need to pull out CSS instructions that you didn't expect to (whether they're hacks or not).

edited May 23 '17 at 11:59

Community

1
1

answered Jan 27 '11 at 18:15

John Fisher

22,355
2
39
64

Nice technique for handling IE oddities, which there seem to be a lot of. In my case, IE *and* Firefox were different than WebKit so IE conditionals won't help. – Aoife Jan 27 '11 at 18:25
Nope conditional comments only work for IE http://www.quirksmode.org/css/condcom.html . You can target non-IE browsers as a group using a conditional comment that is not a comment but can't target FF but not Chrome/Safari with them. – Adrian Feb 05 '11 at 05:07
@Aliester: You can cheat with JQuery, then. On page load, just alter the body (or some other) tag to include an ID that the CSS can work with. – John Fisher Feb 06 '11 at 18:28
1

You could I guess but seems like a lot of work to avoid just fixing the root problem in the css. Anyway my comment was just to point out that conditional comments are only honored by IE so you can target IE and non-IE but you can't get more specific with conditional comments. If you write your css and html well it is really really rare to need tweaks between ff, chrome, safari and IE8. IE7 is usually the odd one out that need some different values for. – Adrian Feb 07 '11 at 06:36

Absolute bottom positioned blocks off by one pixel?

3 Answers3