[css] IE 7 block element niet 100% breed?

[DeEindbaas]

Hallo,

Ik probeer een layout IE 7 proof te maken alleen stuit ik op een probleem en dat is dat een div element met een display block in elke browser netjes 100% breed is alleen IE 7 faalt hierin.

Hier heb ik een voorbeeldje gemaakt: http://jsfiddle.net/mvUNz/

Wie kan mij hierbij helpen? De progressbar div moet dus gewoon 100% zijn maar niks wilt lukken lijkt het?

[IceBlackz]

Je bedoelt tussen de bar en het witte vlak in de box zegmaar?

Cascading Stylesheet:

.box .content{
    display : block;
    background-color : #FFFFFF;
    border : 4px solid #f2f4f7;
    padding : 15px;
}

die padding zorgt daarvoor

edit: Oh, IE7.. even overheen gelezen x)

[ Voor 8% gewijzigd door IceBlackz op 10-01-2012 13:34 ]

[DeEindbaas]

IceBlackz schreef op dinsdag 10 januari 2012 @ 13:25:
Je bedoelt tussen de bar en het witte vlak in de box zegmaar?

Cascading Stylesheet:

.box .content{
    display : block;
    background-color : #FFFFFF;
    border : 4px solid #f2f4f7;
    padding : 15px;
}

die padding zorgt daarvoor

Nope, die heeft er niks mee te maken de progressbar div blijft klein al verwijder je deze.

[erikvdv1]

Het werkt als ik die css regels met een * weghaal

Cascading Stylesheet:

.small {
    float : left;
    width : 25%;
}

[DeEindbaas]

erikvdv1 schreef op dinsdag 10 januari 2012 @ 13:34:
Het werkt als ik die css regels met een * weghaal

Cascading Stylesheet:

.small {
    float : left;
    width : 25%;
}

Klopt, dat zag ik ook. Het nadeel ervan is als ik 4 boxen van 25% naast elkaar zet in IE 7 dan faalt IE weer. Hij gaat namelijk dan op bepaalde moment dat de user de browser resized de laatste box onder de andere 3 plaatsen.

Maar met die min en max waarde dan zet hij ze wel netjes naast elkaar.

[erikvdv1]

En als je de blokken voor IE7 allemaal 24% maakt? Dan heb je wat speling, maar misschien niet heel netjes...

[DeEindbaas]

erikvdv1 schreef op dinsdag 10 januari 2012 @ 13:46:
En als je de blokken voor IE7 allemaal 24% maakt? Dan heb je wat speling, maar misschien niet heel netjes...

Klopt, ik ben nu wel redelijk happy met wat ik gedaan heb:

code:

div.small{
    float : left;
    width : 25%;
    *width : 24.97%;
}

Dan is het in alle browser goed en bij IE 7 dan mist hij net 1px voor de 100% width maar dat zullen gebruikers niet zo opmerken.

Screenshot ingezoomt:

[Daan]

Even een tipje tussendoor. Het is beter geen CSS hacks te gebruiken (zoals die * daar), maar in plaats daarvan conditional classes te gebruiken. Zie ook dit artikel van Paul Irish.