CSS IE Probleem - Softwareontwikkeling

maandag 20 maart 2006 21:25

Acties:

Topicstarter

Ik ben eindelijk maar eens begonnen met het ontwerpen van mijn eigen website. Ik ben begonnen deze op te zetten doormiddel van xhtml en css. Het gaat al lekker en in FireFox ziet de website er uit zoals het zou moeten zijn. Alleen ie geeft een probleem. Ik kan niet vinden waar het probleem in zit. Onder de menulijnen komt in IE nog een lijn. Ik heb alle float en clear manieren geprobeerd.
hieronder mijn html code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>Vroege.biz</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style/site.css" />
  <script type="text/javascript" src="script/site.js"></script>
 </head>
 <body>
  <div class="centreer">
   <div class="header"></div>
   <div class="menu">
    <div class="menulijn"></div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">Home</div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">Foto's</div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">Sport</div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">CV</div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">Email</div>
    <div class="menustiplijn">[img]"images/menustiplijn.jpg"[/img]</div>
    <div class="menuitem">Links</div>
    <div class="blauwitem">[img]"images/blauwmenu.jpg"[/img]</div>
    <div class="menulijn"></div>
   </div>
   <div>blablablblblblblblblblbl</div>
  </div>
 </body>
</html>

en mijn css file is hier te vinden.
en hier kun je het resultaat bekijken.

Heeft iemand een idee waarom die witte lijn er komt in IE?

Indien er nog meer informatie gewenst is moeten jullie het maar laten weten.

Alvast Bedankt,

[ Voor 24% gewijzigd door vakantieman op 20-03-2006 21:26 ]

maandag 20 maart 2006 21:50

Acties:

crisp

Devver

Pixelated

Cascading Stylesheet:

1	div.menustiplijn img { vertical-align: bottom; }

wist je overigens dat HTML nog meer elementen kent behalve div? en dat sommige van die elementen je inhoud beter beschrijven?

Intentionally left blank

maandag 20 maart 2006 21:54

Acties:

JHS

Splitting the thaum.

crisp schreef op maandag 20 maart 2006 @ 21:50:
wist je overigens dat HTML nog meer elementen kent behalve div? en dat sommige van die elementen je inhoud beter beschrijven?

Zie daarover (o.a.) http://www.rikkertkoppes.com/thoughts/smurf-language/

.

DM!

maandag 20 maart 2006 21:58

Acties:

Verwijderd

Heb je in je css je menulijn class al eens een padding en margin van 0 gegeven? Misschien dat die in ie standaard afwijkt van firefox.

maandag 20 maart 2006 22:00

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op maandag 20 maart 2006 @ 21:58:
Heb je in je css je menulijn class al eens een padding en margin van 0 gegeven? Misschien dat die in ie standaard afwijkt van firefox.

Nee, divs hebben in geen enkele browser default een margin of padding...

Intentionally left blank

maandag 20 maart 2006 22:00

Acties:

vakantieman

Topicstarter

Bedankt voor jullie informatie, ik zal eens kijken of ik wat div elementen kan weghalen.
Helaas krijg ik de css regel nog niet aan de praat. Als ik hem plaats veranderd er niets. Waarschijnlijk plaats ik hem verkeerd.

Waar moet ik die css regel plaatsen in mijn css file?
Is het beter om <div id="blaat"></div> te gebruiken dan <div class="blaat"></div>

maandag 20 maart 2006 22:10

Acties:

crisp

Devver

Pixelated

mmz, ik zie dat het door whitespace en default font-size/line-height komt

verder is het beter hier helemaal geen div voor te gebruiken maar een nette list

Intentionally left blank

maandag 20 maart 2006 22:40

Acties:

vakantieman

Topicstarter

Ik heb nog even verder gespiekt en de white-space onder het de menulijn komt door mijn font-declaratie. Als ik mijn standard font op 6 px zet dan wordt de white-space kleiner. Voorheen heb ik ook veel met div's gewerkt dus vanuit mijn oogpunt kan het niet daardoor komen.

Heeft iemand een idee hoe dit komt?

dinsdag 21 maart 2006 09:43

Acties:

vakantieman

Topicstarter

Het probleem is weer wat dichter bij een oplossing gekomen.
Ik heb de font-size van het element van de menulijn op 5px gezet.

Het menu ziet er opzich zelf nu goed uit alleen de tekst die in de div eronder staat loop in FF er nu overheen en in IE verdwijnt deze. Ik heb geprobeerd om dit dan weer op te lossen met een margin-top/padding-top maar dit is tot nu toe nog geen oplossing gebleken.

dinsdag 21 maart 2006 16:24

Acties:

Boelie-Boelie

Geen directe oplossing voor je probleem, maar wel een verbetering voor je menu:
http://css.maxdesign.com.au/listutorial/

Cogito ergo dubito

dinsdag 21 maart 2006 17:05

Acties:

vakantieman

Topicstarter

Bedankt ik ga het menu vanavond even verbeteren,
Ik heb op dit moment het opgelost met een div en aan die div een border meegeven van 6 px.
Eigenlijk snap ik niet waarom ik dit niet gelijk heb gedaan

Indien gewenst zal ik vanavond de code posten.

woensdag 22 maart 2006 22:33

Acties:

vakantieman

Topicstarter

Mijn menu heb ik nu aangepast volgens de link en het werkt. Nu wil ik tekst in mijn pagina's gaan zetten en nu gaat ie niet verder als 1 regel tekst en deze gaat hij steeds herhalen. Net of de layer van de content niet wil groeien. ik heb al geprobeer met height: auto; height: 100% min-height:100%; niets helpt.

Kan ik nog iets anders proberen?