Div positie in IE7 wijkt af

Status
Niet open voor verdere reacties.

Uturn

Gebruiker
Lid geworden
7 apr 2009
Berichten
100
Hallo,
Ik heb een webpagina gemaakt met een div die links van de hoofddiv staat (zie html-code onder, het gaat om <div id="sitenav">). In FF en IE8 werkt het prima, maar in IE7 niet: daar valt de div binnen het hoofdblok. Kan iemand mij vertellen wat ik moet veranderen zodat IE7 ook meewerkt?

Ik heb al geprobeerd de positie naar relative te verzetten, maar dat werkt niet.

HTML:
  <body>
      <div id="sitenav">
           ..... menu-items.....
      </div>
      <div id="hoofdblok">
          <div id="header">

          </div>
      </div>
</body>

en de CSS:

Code:
  #sitenav {
    width: 180px;
    height: 300px;
    background-color: #f8f8ff;
    margin-top: 120px;
    margin-left: 2px;
    font-size: 11pt;
    font-color: black;
    font-family: verdana;
    font-weight: normal;
    position: absolute;
  }
  #hoofdblok {
    width: 750px;
    background-color: #f8f8ff;
    margin-top: 5px;
    margin-left: 230px;
    font-size: 11pt;
    font-family: verdana;
    font-weight: normal;
  }
  #header {
    text-align: center;
    background-color: mediumblue;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
    padding-top: 1px;
    height: 55px;
    position: relative;
    border: 3px outset mediumblue;
  }
 
Probeer dit:
HTML:
<!--[if IE 7]>
<link href="/html/css/ie7.css" rel="stylesheet" type="text/css" media="screen, handheld, projection" />
<![endif]-->
Zet in je CSS de afwijkende dingen in.
 
Ik was een positie vergeten op te geven bij <div id="hoofdblok">:o
Nadat ik dit veranderd heb, werkt het wel...
 
Uturn, dingen zoals font-family etc kun je het beste in je CSS onder body of html zetten, dan hoef je het font alleen maar opnieuw aan te geven als je een ander font voor een header of div wil o.i.d.
Ook kun je voor je margins en padding (en nog een hoop andere properties) het makkelijkst shorthand css gebruik, margin-top: 120px; margin-left: 5px; is bijv: margin: 120px (top) 0 (right) 0(bottom) 5px(left); Dus met de klok mee zeg maar (tekst tussen haakjes weghalen hehe).
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan