Gå til innhold

Problemer høyde på divs i Firefox

Dirty^Dog

Anbefalte innlegg

Dirty^Dog

Dirty^Dog

Skrevet
Skrevet

Hei, eksperter!

 

Har ikke alle verdens erfaring med css, så derfor spør jeg her. Tror problemet mitt er en liten filleting.

 

Problemet er iallefall at høyden på #leftdiv og #rightdiv går lenger ned enn hoveddiven, som egentlig skal ha 100% høyde, og som også har det i både Opera og IE. Ettersom det ser riktig ut i to andre browsere, håper jeg at det er en liten filleting. Eller..?

 

 

LINK

 

HTML:

 

<body>

<div id="main-centre-div">

<div id="topp-div">

</div>

<div id="banner-div">

</div>

 

 

 

<div id="navcontainer">

<ul id="navlist">

<li id="active">

<a href="#" id="current">Hjem</a></li>

<li><a href="#">Sterke Meninger</a></li>

<li><a href="#">Musikk</a></li>

<li><a href="#">Diskusjon</a></li>

<li><a href="#">Gjestebok</a></li>

</ul>

</div>

<div id="meny-dummy">_

</div>

<div id="leftdiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rutrum elit in elit. Vestibulum aliquam congue quam. Maecenas odio. Morbi enim dui, sodales vel, facilisis quis, rutrum eget, pede. Donec ornare, neque quis bibendum scelerisque, est pede convallis purus, non consequat ligula lacus congue enim. In facilisis ligula et erat. Phasellus felis mi, bibendum in, vehicula at, dapibus volutpat, odio. Etiam sapien nisl, rutrum nec, dictum non, ornare sed, eros. Donec porttitor augue eu justo. Aliquam erat volutpat. Vivamus eget dui consequat felis ultricies semper.

 

Sed ultrices lectus in felis. Nulla suscipit, lectus eget semper interdum, nibh lacus sagittis sapien, sed laoreet tellus arcu at est. Aliquam erat volutpat. Morbi dignissim ante malesuada urna. Aliquam ligula tellus, sodales vitae, posuere sed, mattis quis, justo. Sed lorem arcu, vestibulum sit amet, scelerisque in, posuere vitae, pede. Integer metus tortor, sodales pretium, pellentesque rhoncus, consequat fringilla, wisi. Nulla facilisi. Phasellus ipsum diam, porttitor quis, posuere et, elementum sit amet, eros. Vivamus pulvinar enim in augue. Praesent tincidunt mattis ligula. Ut ultrices, sem tempor rutrum pretium, odio diam pharetra purus, eget lacinia neque turpis eget sapien.

</div>

<div id="rightdiv"> Nulla facilisi. Morbi eros. Pellentesque vestibulum, mi eu faucibus tempus, neque felis bibendum pede, quis hendrerit magna lectus tincidunt erat. Aenean dapibus odio ac metus. Nullam fringilla velit ac felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempus tellus sed sapien. Ut dolor sapien, condimentum id, laoreet sed, rhoncus vitae, diam. Vestibulum eu est. Duis ultricies, ante euismod facilisis suscipit, metus ante posuere mi, sed interdum neque augue vel turpis. Ut eget urna. Ut pretium.

</div>

 

</div>

 

 

</body>

 

CSS:

 

* {

  margin: 0;

  padding: 0;

}

 

html, body {

  height: 100%;

}

 

body

{

    background: top repeat-x #DBDBDB;

  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;

  text-align: center;

}

 

#main-centre-div

{

  background: url("pics/wrap-bg.gif") #DBDBDB top repeat-y;

  width:640px;

  min-height: 100%;

        height: auto !important;

    height: 100%;

  margin-right:auto;

  margin-left:auto;

  padding:0px;

  text-align:left;

  border-right: 1px solid #595959;

  border-left: 1px solid #595959;

}

 

#topp-div

{

  width: 640px;

  height: 29px;

}

 

#banner-div

{

  width: 640px;

  height: 123px;

  background: url("pics/banner.png");

  border-top: 1px solid #333;

  border-bottom: 1px solid #333;

  margin-bottom: 2px;

 

}

 

#meny-div

{

width: 100%;

height: 30px;

background: #595959;

margin-top: 2px;

}

 

#menyknapper

{

width: 70px;

height: 30px;

background: #595959;

font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;

font-size: 18px;

color: #FFFFFF;

border-right: 1px #FFF solid;

 

}

#menytest

{

background: #CCC;

}

 

 

#meny-dummy

{

width: 640px;

height: 2px;

background: #595959;

margin-top: 2px;

font-size: 1px;

color: #FFFFFF;

}

 

 

#navcontainer ul

{

padding: .2em 0;

margin-top: 1px;

margin: 0;

list-style-type: none;

background-color: #595959;

color: #FFF;

width: 100%;

font: normal 90% arial, helvetica, sans-serif;

text-align: center;

}

 

li { display: inline; }

 

li a

{

text-decoration: none;

background-color: #595959;

color: #FFF;

padding: .2em 1em;

border-right: 1px solid #fff;

}

 

li a:hover

{

background-color: #737373;

color: #fff;

}

 

#leftdiv

{

width: 400px;

background: #CCC;

float: left;

margin-top: 5px;

margin-left: 5px;

text-align: center;

height:auto;

}

 

#rightdiv

{

width: 200px;

background: #CCC;

float: right;

margin-top: 5px;

text-align: center;

margin-right: 5px;

}

 

Svært takknemlig for all hjelp :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Cucum(r)

Cucum(r)

Skrevet
Skrevet

Hmm, hjelper det å bytte ut 

body {
background: top repeat-x #DBDBDB;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
text-align: center;
}

...med

html, body {
background: top repeat-x #DBDBDB;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
text-align: center;
height: 100%;
}

 

?

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...