1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Padding on inline elements

Applied by Internet explorer but not Firefox

         

rphil

2:35 pm on Feb 14, 2011 (gmt 0)

10+ Year Member



Hello,
Could anybody explain to me why Firefox (using 3.6.6) does not have the same as IE8 when I read this horizontal tab menu that is using 2 images, one for the left side and the other for the right side.

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="tab.css" />
</head>
<body>
<ul class="basictab">
<li class="selected" ><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Next</span></a></li>
<li><a href="#"><span>Last</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
</body>
</html>

CSS:


body {
background-color:#000000;
}
.basictab{
font: bold 1.0em Arial;
text-align: left;
padding : 2em;
}
.basictab li{
display: inline;
margin: 0px;
}
.basictab li a{
color: #EEE5DE;
background: url("images/tab2left_b.png") left top no-repeat;
text-decoration: none;
padding-left: 30px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;

}
.basictab li span{
color: #EEE5DE;
background: url("images/tab2right_b.png") right top no-repeat;
text-decoration: none;
padding-left: 0px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 10px;

}

birdbrain

3:32 pm on Feb 14, 2011 (gmt 0)



Hi there rphil,

and a warm welcome to these forums. ;)

It is better to firstly code for a compliant browser, like Firefox, Opera or Safari, then tweak
the code for IE rather than the other way round. :)

Try it like this... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>horizontal navigation</title> 
 
<style type="text/css"> 
body { 
 background-color:#000; 
 } 
.basictab { 
 font:bold 1.0em arial,sans-serif; 
 text-align:left; 
 padding:2em; 
 margin:0; 
 list-style-type:none; 
} 
.basictab li { 
 display:inline; 
 float:left; 
 } 
.basictab li a { 
 float:left; 
 height:50px; 
 padding-left:30px; 
 color:#eee5de; 
 background:url(images/tab2left_b.png) left top no-repeat; 
 text-decoration:none; 
 } 
.basictab li span { 
 display:block; 
 line-height:50px; 
 padding-right:30px; 
 color:#eee5de; 
 background:url(images/tab2right_b.png) right top no-repeat; 
 text-decoration:none; 
 }  
</style> 
 
</head> 
<body> 
 
<ul class="basictab"> 
 <li class="selected"><a href="#"><span>Home</span></a></li> 
 <li><a href="#"><span>Next</span></a></li> 
 <li><a href="#"><span>Last</span></a></li> 
 <li><a href="#"><span>Contact us</span></a></li> 
</ul>  
 
</body> 
</html>

birdbrain

[edited by: birdbrain at 4:27 pm (utc) on Feb 14, 2011]

Fotiman

3:42 pm on Feb 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld!
The problem is that you're attempting to apply vertical padding to an inline element (the span):

padding-top: 20px;
padding-bottom: 10px;

Inline elements can not be styled with vertical margins/padding. Per the CSS spec [w3.org]:

Horizontal margins, borders, and padding are respected between these boxes


IE unfortunately ignores the standard in this particular case. Firefox (and Chrome, Opera, Safari) will exhibit the CORRECT behavior.

rphil

3:57 pm on Feb 14, 2011 (gmt 0)

10+ Year Member



Thanks for quick replies.
..it's funny coz in my mind I was applying vertical padding without knowing it was out of spec, but IE somehow was doing what I was thinking!...anyway thanks for the tips.
and Birdbrain, your solution seems to work using heights, I'll have to go way and understand the mechanics behind that.

R.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026