IE not displaying border around text correctly?

@AmberiteAug 13.2007

Hello,

I have the following CSS style applied to a certain span I want to use:

{ font-weight: bold; background-color: #FFF; border: 1px solid #000; padding: 0 2px 0 2px; }

This displays fine in Firefox (with a black border around the text, forming a box). However, in IE, for some reason the top and bottom borders of the box don’t appear. Only the left and right sides.

Does anyone know why this is happening?

to post a comment

CSS

11 Comments(s) _↴

@TJ111Aug 13.2007 — #It might have to do with your padding declaration. Try giving 1px top and bottom padding to see what happens. If that works try just adding a "px" statement after the 0's. Also just for reference here's how to do shorthand padding.

<i>
 </i>padding:1px; = 1px 1px 1px 1px;
 
 padding:1px 2px = 1px 2px 1px 2px;
 
 padding 1px 2px 3px; = 1px 2px 3px 1px;

@AmberiteauthorAug 13.2007 — #Hi TJ,

First, thanks for the heads up on the shortcut for padding / margins! ?

Secondly, I tried what you said, but it seems to have no effect whatsoever on IE. The padding and entire look remains the same (even if I put padding to be 5px, etc). Here is the complete HTML and the CSS for this element:

Just so you know, this is for a page selector inside of a search results page.

[code=html]
 <ul class="horizontal">
 <li class="current">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li class="spacer">...</li>
 <li>620</li>
 <li>621</li>
 </ul>
 [/code]

[CODE]
 ul.horizontal { display: inline; list-style-type: none; margin: 0; padding: 0; }
 ul.horizontal li { display: inline; list-style-type: none; margin: 0; padding: 0; }
 
 ul li { font-weight: bold; background-color: #FFF; border: 1px solid #000; padding: 0 2px; }
 ul li.current { background-color: #AD0005; color: #FFF; }
 ul li.spacer { background-color: #ECECDF; border: 0; }
 [/CODE]

@TJ111Aug 13.2007 — #IE sometimes has issues with inherit styles. If you have other styles described previously for <ul> it might have display issues. Also it might be caused by some overlap. Try adding some padding to <ul> on the top and bottom and see what happens. I had an issue like this about 2 weeks ago, but can't for the life of me remember exactly what it was. Ponder I will.

@AmberiteauthorAug 13.2007 — #Well I did some playing around with this, and it seems that it's the inline display of the list that is screwing up IE. If I take the inline out it displays the box correctly... You gotta love IE.

So I guess I will have to do this without an inline list.

@TJ111Aug 13.2007 — #Yeah here's how I do my "inline" lists. The float:left property makes it appear inline, without having to declare it as such.

<i>
 </i>#mainMenu ul {
 list-style-type: none;
 display:block;
 float:left;
 width:8500px;
 margin:3px 0px 3px 5%;
 padding:0;
 }
 #mainMenu li {
 padding: 0;
 margin: 0;
 float: left;
 display: block;
 padding-top:3px;
 }

@AmberiteauthorAug 13.2007 — #Wow that works! Although floating a list kind of sucks (have to make everything on that line float now as well), but I guess with IE being the hack it is, hacks to make it work are necessary ?

Thanks!

@TJ111Aug 13.2007 — #Yeah its really annoying, especially if there's any kind of z-index involved. If a z-index is involved then you have to put "position:relative" into everything that is floated to make it display in IE6 (ugh).

Glad to help

@toicontienAug 13.2007 — #padding 1px 2px 3px; = 1px 2px 3px 1px;[/QUOTE]
As a side note:
padding: 1px 2px 3px; = padding: 1px 2px 3px [B]2px[/B]
If the 4th measurement is missing for padding and margins, then it is assumed to be equal to the "right hand" measurement.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. [B]If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third[/B] (emphasis mine). If there are four values, they apply to the top, right, bottom, and left, respectively.[/quote]

Source: 'padding' in the W3C Box Model

@TJ111Aug 13.2007 — #Woops sorry! Good catch, that was a typo.

@toicontienAug 13.2007 — #No probs. ? When I was originally writing my post, I thought it just repeated the last value you gave for the padding, but even I was wrong. I still had to look up the correct way on W3.org.

@CentauriAug 13.2007 — #All this is due to IE6 not being able to have an element larger than it's container - in this case, the line height. Setting a line height will enable the top and bottom borders to be displayed without floating.

[CODE]ul.horizontal li {
 display: inline;
 list-style-type: none;
 margin: 0;
 padding: 0;
 [COLOR="Red"]line-height: 1.5em;[/COLOR]
 }[/CODE]

Floating works as it converts the element to block display (so there is no need to assign block display when using float), however if you use a left margin you invoke IE6's doubled margin bug so the display will have to be set as inline anyway (other browsers ignore this as a float is always block display).

Also in #CSS _↴

IE 6.0 positioning problem (7.0 fine)Is Safari 3 widely used anymore, since the Safari 4 update?Beginner Question: Centering image

Success!

Help @Amberite spread the word by sharing this article on Twitter...

Tweet This

IE not displaying border around text correctly?

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE not displaying border around text correctly?

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴