[HTML]Rare witte ruimte in DIV

[Beatboxx]

Ik zal waarschijnlijk iets ongeloofelijks doms doen, maar ik heb geen idee wat. Ik ben bezig met een menu voor een site, en natuurlijk doe ik dit mbv CSS. Ik heb zonder kleurtjes, ronde hoeken e.d. deze CSS:

Cascading Stylesheet:

.nav-item{
    border-style:solid;
    border-color:#000000;
    border-width:2px;
    float:left;
    margin-right:10px;
    }
    

en de HTML:

HTML:

<ul class="nav-item">Home</ul>
<ul class="nav-item">about us</ul>

Dat gaat er zo uitzien:



Het probleem is die witte ruimte tussen de tekst en de rand van deze ul, links van de tekst. Ik zal zeker iets ongelofelijk stoms doen, maar ik heb geen idee hoe ik van die witte ruimte afkom... Is er iemand die wat scherper is dan ik?

[RobIII]

Je wil waarschijnlijk een <li> gebruiken in een <ul>
En anders: je testcase (of althans: de HTML en CSS die je post) is niet voldoende om je probleem te reproduceren. Dus dan komt die witruimte ergens anders vandaan; iets wat je achterwege laat. Heb je al eens met een tool als Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly gekeken waar die witruimte vandaan kan komen op die elementen? Zo nee: ga dat eens doen. Zo ja: *profit*
Je zult, hoe dan ook, op z'n minst een fatsoenlijke testcase moeten kunnen produceren waarin je enkel-en-alleen de nodige CSS/HTML hebt staan om je probleem te reproduceren. Dan weet je in 99.9999% van de gevallen al zelf waar 't probleem in zit, zo niet dan kunnen wij je vast helpen.

[ Voor 137% gewijzigd door RobIII op 04-04-2012 19:29 ]

[Beatboxx]

Bedankt! Ik val nu toch wel gigantisch door de mand als n00b-zijnde........

EDIT: Ik had een testcase, met alleen bovenstaande CSS in de head, en in de body alleen bovenstaande HTML...

[ Voor 38% gewijzigd door Beatboxx op 04-04-2012 19:30 ]

[RobIII]

Beatboxx schreef op woensdag 04 april 2012 @ 19:29:
Bedankt! Ik val nu toch wel gigantisch door de mand als n00b-zijnde........

Don't worry; dat was al lang geleden zo hoor

Beatboxx schreef op woensdag 04 april 2012 @ 19:29:
EDIT: Ik had een testcase, met alleen bovenstaande CSS in de head, en in de body alleen bovenstaande HTML...

Dan had je of het probleem gereproduceerd, of je jokt en er stond meer in je testcase (misschien nog een <link rel="stylesheet"...> die je over het hoofd hebt gezien ofzo die alsnog een zooi CSS importeert of...)

[ Voor 50% gewijzigd door RobIII op 04-04-2012 19:32 ]

[Beatboxx]

offtopic:
Toen viel ik niet door de mand, toen was ik 't gewoon

[/hk-modus]

[Verwijderd]

RobIII schreef op woensdag 04 april 2012 @ 19:30:
[...]

Don't worry; dat was al lang geleden zo hoor


[...]


Dan had je of het probleem gereproduceerd, of je jokt en er stond meer in je testcase (misschien nog een <link rel="stylesheet"...> die je over het hoofd hebt gezien ofzo die alsnog een zooi CSS importeert of...)

Als ik zijn code in Chrome of IE test krijg ik gewoon het zelfde resultaat als zijn screenshot hoor.

De oplossing is een padding:0; toe te voegen, maar zo hoor je natuurlijk geen menu te maken. Probeer dit eens:

Cascading Stylesheet:

#nav li{
    border:2px solid #000;
    float:left; 
    margin-right:10px; 
    }

HTML:

<ul id="nav">
<li>Home</li>
<li>About us</li>
</ul>

[ Voor 4% gewijzigd door Verwijderd op 05-04-2012 11:58 ]

[RobIII]

Verwijderd schreef op donderdag 05 april 2012 @ 11:56:
Als ik zijn code in Chrome of IE test krijg ik gewoon het zelfde resultaat als zijn screenshot hoor.

http://jsfiddle.net/pNKHx/ as posted in RobIII in "[HTML]Rare witte ruimte in DIV". In IE noch in Chrome de "Rare witte ruimte".
Ah, dat doet jsfiddle dus (normalize.css). Anyway, met goed gebruik van voorgenoemde tools zie je dat dus in een oogwenk.

[ Voor 26% gewijzigd door RobIII op 05-04-2012 12:19 ]