[CSS] Breedte van floating divs in IE7

[Verwijderd]

Goedenavond,

Ik ben bezig met een horizontaal menu dat uit Div's is opgebouwd. Het geheel wordt uit een database opgebouwd. De divs worden via display: block en float: left naast elkaar geplaatst en verdeeld over meerdere regels indien het menu lang is.

Het probleem is dat in IE7 de div niet op een nieuwe regel begint wanneer deze te lang is, maar verdeeld wordt over 2 regels. In Firefox en Safari gaat dit helemaal goed. Heeft iemand dit ook weleens gehad en een oplossing? (Ik heb het ook al met list-items geprobeerd, maar dat heeft dezelfde uitwerking).


De HTML-code ziet er zo uit.

HTML:

<div id="submenu">
<div>
<a href="/arrangementen/andere-hazes/arena-zeskamp.html">ArenA Zeskamp</a>
</div>
<div>
<a href="/arrangementen/andere-hazes/arena-lasercombat.html">ArenA Lasercombat</a>
</div>
<div>
<a href="/arrangementen/andere-hazes/arena-challenge.html">ArenA Challenge</a>
</div>
<div>
<a href="/arrangementen/andere-hazes/sportieve-1-uur-arrangementen.html">Sportieve 1 uur arrangementen</a>
</div>
<div>
<a href="/arrangementen/andere-hazes/teamsurvival-at-sea.html">Teamsurvival at Sea</a>
</div>
<div>
<a href="/arrangementen/andere-hazes/bush-bush-trophy.html">Bush Bush Trophy</a>
</div>
</div>

De CSS-code is als volgt

Cascading Stylesheet:

#submenu {
 width:350px;
}
    
    #submenu  div {
    height: 20px;
    display:block;
    float:left;
    line-height: 1.5em;
    margin-top: 3px;;
    margin-bottom: 2px;
    background-image: url(../img/menubg.gif);
    background-repeat: repeat-y;
            
    }
    
    #submenu div a {
    color: #999999;
    padding-right: 8px;
    text-decoration: none;padding-left: 9px;
    display: block;
    }
    #submenu div.active a {
        color: #ffffff;
    }

Het verschil tussen de twee browsers zie je hier.



Heb naar mijn idee alles al geprobeerd, zoals display: inline, list-items. Kan het zijn dat het een 'Bug' is in IE7, heeft iemand dit ook gehad en misschien een oplossing?

Alvast dank..

[OxiMoron]

Je hebt geen width op je divs staan en gebruikt breaking spaces in de tekst.. dan zeg je tegen de browser eigenlijk dat ie lekker zelf mag bepalen hoe hij het doet.

Aangezien hier een breedte opgeven niet echt handig is (je weet immers niet hoe lang hij moet zijn, zou ik het eens met  's proberen.

[ Voor 2% gewijzigd door BtM909 op 19-11-2008 20:58 ]

[Verwijderd]

Met 's? LI's heb ik al geprobeerd... Zou er ook een script te bedeken zijn waarmee ik de breedte kan meten?

[UltimateB]

De data die binnen de <a> tag zit in php(?) door str_replace($string, " ", "  ") halen?

[Zakkenwasser]

float: clear ?

Trouwens gewoon je menu zo opbouwen:

code:

<ul>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
</ul>

Met CSS kan je dit menu in allerlei vormen op de pagina zetten.

En het is gebruiksvriendenlijker voor text only browsers zoals Lynx ( op tragere pc's bijvoorbeeld ) en voor text-to-speech programma's voor de wat minder valide bezoekers

[ Voor 93% gewijzigd door Zakkenwasser op 19-11-2008 21:48 ]

[Verwijderd]

MrJey schreef op woensdag 19 november 2008 @ 21:45:

En het is gebruiksvriendenlijker voor text only browsers zoals Lynx ( op tragere pc's bijvoorbeeld ) en voor text-to-speech programma's voor de wat minder valide bezoekers

Leuk dat je herhaalt wat ik zo ongeveer 6 jaar geleden al op dit forum postte, maar jammer dat je dan meteen ook duidelijk maakt geen hol te begrijpen van float/clear, waarmee je inzicht nogal twijfelachtig overkomt. Zeker als je de onzin die je in andere topics post nog in je achterhoofd hebt.

Dit los je vanzelfsprekend op met display: inline; white-space: nowrap; want &nbsp; is in dit geval natuurlijk niet echt de bedoeling. Wel met een ul en wat li's inderdaad, want div's voor alles gebruiken is niet zo handig.

[ Voor 5% gewijzigd door Verwijderd op 19-11-2008 22:03 ]

[Verwijderd]

Dank je Cheetah, dit werkt!

List items zijn inderdaad beter, had alleen de hoop dat het met DIVjes op te lossen was.

[ Voor 70% gewijzigd door Verwijderd op 19-11-2008 22:08 ]

[Verwijderd]

Verwijderd schreef op woensdag 19 november 2008 @ 22:04:
Ik had hem al met LI's opgebouwd. Dat is niet de oplossing, het probleem is dat Internet Explorer 7 de items niet zo breed maakt als het vak met tekst is. De inhoud van de vakken kan niet worden aangepast

Het probleem ligt dan waarschijnlijk vooral bij het ontwerp van de grafische layout c.q. de user interface. Maar dat is een ander verhaal. Meestal heb je als front-end developer maar gewoon een kutontwerp te realiseren.

[Cartman!]

Verwijderd schreef op woensdag 19 november 2008 @ 22:04:
had alleen de hoop dat het met DIVjes op te lossen was.

Waarom denk je dat div's beter zijn dan li's dan in dit geval?

[Verwijderd]

Cartman! schreef op woensdag 19 november 2008 @ 22:11:

Waarom denk je dat div's beter zijn dan li's dan in dit geval?

[Zakkenwasser]

Verwijderd schreef op woensdag 19 november 2008 @ 22:02:
[...]

Leuk dat je herhaalt wat ik zo ongeveer 6 jaar geleden al op dit forum postte, maar jammer dat je dan meteen ook duidelijk maakt geen hol te begrijpen van float/clear, waarmee je inzicht nogal twijfelachtig overkomt. Zeker als je de onzin die je in andere topics post nog in je achterhoofd hebt.

Nou, ik herhaal jou persoonlijk niet, ik heb laatst nog een cursus accesibility gehad, waarvan ik die informatie heb opgedaan.

Beter 6 jaar te laat dan helemaal niet, en ik help hier een medemens weer mee, met toekomstige problemen vorokomen.

Over Float/Clear: Ik zal dan wel niet exact de juiste CSS benaming hebben gebruikt.
Maar het verschuiven van een div, als er een float wordt gebruikt, wordt bij mij in iedergeval opgelost met zo een clear.

Maar hoezo onzin ?

Btw: lol @ Malkovich

[Verwijderd]

MrJey schreef op woensdag 19 november 2008 @ 22:20:

Nou, ik herhaal jou persoonlijk niet, ik heb laatst nog een cursus accesibility gehad, waarvan ik die informatie heb opgedaan.

Beter 6 jaar te laat dan helemaal niet, en ik help hier een medemens weer mee, met toekomstige problemen vorokomen.

Dat denk jij ja, maar daar ben ik het dus niet mee eens.

Over Float/Clear: Ik zal dan wel niet exact de juiste CSS benaming hebben gebruikt.
Maar het verschuiven van een div, als er een float wordt gebruikt, wordt bij mij in iedergeval opgelost met zo een clear.

Maar hoezo onzin ?

Onzin omdat float: clear; niet bestaat, en onzin omdat clear: left; of clear: none; hier absoluut niet gaat helpen om dit probleem op te lossen. Dat "clearen" is alleen nodig als je items laat floaten om er tekst omheen te laten "flowen". En dat is hier ten eerste niet nodig en ten tweede zou je in dit geval het alleen voor elkaar krijgen om alle items onder elkaar te krijgen waardoor je alle floats teniet zou doen.

Ga er zelf anders eens mee klooien, dan zie je vanzelf wat ik bedoel.