[CSS en IE] raar effect in IE

[cman]

Ik ben een beetje aan het spelen met HTML en CSS. Ik heb iets in elkaar gedraaid maar krijg niet het verwachte resultaat in IE. In firefox werkt het gelijk ik wil dat het werkt.

hier de site:

http://www.politie-maasland.be/test

Ik heb onder mijn topmenu-bar een dun blauw lijntje staan van een paar pixels groot. Nu wil IE zich blijkbaar niet houden aan de height die ik meegeef en daardoor geeft hij onder dat lijntje een grijs balkje (van de background van de body).

Ik heb al wat zitten spelen met de height van mijn container-line, maar krijg dus met geen mogelijkheid dat grijze balkje weg..

Iemand enig idee?

Voor de volledigheid hier even de relevante stukken html en css:

HTML:

<div class="container">
  <div class="container-top">
      <ul id="topnav">
          <li id="topnav1"><a href="index.html">HOME</a></li>
          <li id="topnav2"><a href="voorwoord.html">VOORWOORD</a></li>
          <li id="topnav3"><a href="burelen.html">BURELEN</a></li>
          <li id="topnav4"><a href="diensten.html">DIENSTEN</a></li>
          <li id="topnav5"><a href="wijkwerking.html">WIJKWERKING</a></li>
          <li id="topnav6"><a href="bestuur.html">BESTUUR</a></li>
          <li id="topnav7"><a href="diversen.html">DIVERSEN</a></li>
          <li id="topnav8"><a href="links.html">LINKS</a></li>      
            </ul>   
  </div>
  <div class="container-line"></div>
  <div class="container-midden">
    <div class="container-midden-tekst">
        <h3>Beste bezoeker,</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.......
    </div>
  </div>
  <div class="container-line"></div>
</div>

CSS:

Cascading Stylesheet:

.container-line {
     background: url(images/line.jpg) no-repeat;
     height: 4px;
}

EDIT: iemand enig idee hoe ik de opmaak van mijn post aanpas zodat de stukken code duidelijker zijn? Ik weet dat het mogelijk is in GOT maar weet niet welke tags dat ik daarvoor moet gebruiken...

EDIT2: zo, code tags toegevoegd.. hmm lijkt niet te werken, wat doe ik verkeerd? Werkt dus wel nu!!

[ Voor 7% gewijzigd door cman op 18-08-2006 11:31 ]

[Crayne]

Mijn eerste idee is dat je het even in [code] blokken moet zetten.

[frickY]

Zet eens een "line-height: 4px" in je .container-line.

[ Voor 3% gewijzigd door frickY op 18-08-2006 11:13 ]

[frankvdtillaart]

Je code tags op GoT mogen in vierkante [ ] haken.

Is je jpg 1 pixel hoog? Dan moet je voor IE misschien repeat-y erbij zetten (oid).

[crisp]

Een div gebruiken enkel voor een lijntje? Je weet dat je in CSS ook borders kan toevoegen aan elementen?

En nog een tip: [code=html] en [code=css], daarmee wordt je code ook nog eens hip gehighlight

[ Voor 32% gewijzigd door crisp op 18-08-2006 11:17 ]

[cman]

als ik line-height dan is mijn lijntje helemaal niet meer te zien, niet in ff en niet in ie

het lijntje is 4 px hoog.., dus net zo hoog als ik mijn container maak (zou willen maken).

EDIT: hah nifty Crisp

[ Voor 7% gewijzigd door cman op 18-08-2006 11:19 ]

[Boelie-Boelie]

Probeer ook eens code=html en code=css tussen die haken.

Verder kun je body een grijze backgroundkleur meegeven, .container een donkerblauwe backgroundkleur (geen image) met enige padding en .container-midden-tekst een witte backgroundkleur, waardoor er volgens mij geen images nodig zijn en ook geen <div class="container-line"> of <div class="container-midden">.

[cman]

de oplossing was inderdaad zo simpel crisp met dank voor de tip.. Ben nog maar pas begonnen met css, ik denk dikwijls nog te ingewikkeld precies

boelie-boelie: idd daar had ik nog niet aan gedacht, maar normaal zou dat inderdaad moeten kunnen zo, ik probeer het dadelijk eens.