0

Could someone explain me what's going on with this small piece of HTML ?

http://jsbin.com/akome5

On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :

enter image description here

Meh?! I don't understand why ?! Why aren't the height and width as big as the visible box (orange+red spaces) ?

Adding a "display:inline-block;" to the element doesn't seems to really fix it. How can I fix it ?

Thx!!

TiTi
  • 363
  • 1
  • 7
  • 15
  • "Why aren't the height and width as big as the visible box" height and width of what? – Ashwini Dhekane Apr 07 '11 at 16:31
  • The blue box highlights the element, while the OP is asking why the blue box doesn't span the *entire* height of the red-and-orange box. – Blender Apr 07 '11 at 16:37
  • Exactly :) Width & Height & Position of the blue box (firebug hover) are not those expected. – TiTi Apr 08 '11 at 07:34

4 Answers4

1

Try adding the following styles.

a.button {
    display: block;
    float: left;
    overflow: auto;
}
a.button span {
    display: block;
    float: left;
}
Danyal Aytekin
  • 4,106
  • 3
  • 36
  • 44
  • This seems to work. But is overflow: auto; really necessary? Moreover I need to add an element after the button(s) to stop the float (something like
    ), that can become somewhat complex to manage.     – TiTi Apr 08 '11 at 07:55
  • The { overflow: auto } just makes the container (a.button) wrap its floated contents (the spans). Otherwise, it won't respect the spans' heights. You can use { clear: left } on the next following element to end the float. But I was just trying to ask your question in a simple manner, and have not looked ahead to other issues that might arise in a page that used this code. Good luck :p – Danyal Aytekin Apr 08 '11 at 13:29
1
Community
  • 1
  • 1
Luca Filosofi
  • 30,905
  • 9
  • 70
  • 77
0

I'd propose a different approach involving no spans

html:

<a class="button2" href="#">Text Text Text</a>

css:

/* Button 2 */
.button2 {
    background-color:red;
    border:solid 10px orange;
    border-top:0;
    border-bottom:0;
    display:inline-block;
    color:#fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    padding:0 3px;
}

old (top) new (bottom)

old (top) new (bottom)

http://jsfiddle.net/pxfunc/vr7gJ/

MikeM
  • 27,227
  • 4
  • 64
  • 80
  • Thx but this is not what I asked in the first place! I'm trying to understand WHY dimensions are not those expected. Moreover I need 3 element because in the real button I'm using background images & more styles. – TiTi Apr 08 '11 at 07:33
0

For information I manage to do it without float:left, here is the whole CSS :

a.button{
    display: inline-block; /* <- added */
    text-decoration: none;
}

a.button span{
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
    line-height: 30px; /* <- added */
    text-decoration: none;
}

a.button .left, a.button .right{
    background-color: orange;
    width: 10px;
}

a.button .text{
    background-color: red;
    color: white;
}

The line-height instruction was the key.

TiTi
  • 363
  • 1
  • 7
  • 15
  • Nicely done. I don't want to pee on your bonfire but bear in mind that IE 6 & 7 and Firefox 2 don't support { display: inline-block }. On Firefox 2 you can use -moz-inline-block and there are various hacks around the web for IE 6 & 7. I doubt you're supporting FF2 though, and IE 6 & 7 will soon be dead, if we're lucky. Well done. – Danyal Aytekin Apr 08 '11 at 13:34