Border fortsetter ikke nedover på siden i FF/Opera

Svinat · 13. november 2006

Jeg har da lagd en side som strekker seg helt fra topp til bunn. Jeg har en ramme langs kantene, men de vil ikke strekke seg fra topp til bunn i Firefox eller Opera. De stopper der siden slutter og du må scrolle ned.

Akkurat nå har jeg en særdeles merkelig løsning som virker i Firefox. Den går ut på å ha bakgrunnsbildet som rammen og siden for så å midtstille dette. I Opera virker den hvite delen nedover, men rammen virker ikke.

Ja, jeg er klar over at det er en merkelig metode jeg bruker. Det er sikkert noen mye bedre løsninger som kan brukes, men da håper jeg for all del at noen forteller meg om dem. Mulig at det er noen feil i koden også, det håper jeg også dere forteller om, hvis dere gidder da.

Koder:

Klikk for å se/fjerne innholdet nedenfor

Html

<html>

<head>

<link rel="stylesheet" href='stil.css'>
<title>
</title>

</head>

<body>
<div id="iesupport">
</div>

<div id="innhold">
 <div id="header">
 test

 <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <div id="knapp">   
   <ul>
    <li><a class="knapp" href="#">Link en</a></li>
    <li><a class="knapp" href="#">Link to</a></li>
    <li><a class="knapp" href="#">Link tre</a></li>
    <li><a class="knapp" href="#">Link fire</a></li>
    <li><a class="knapp" href="#">Link fem</a></li>
    <li><a class="knapp" href="#">Link seks</a></li>
    <li><a class="knapp" href="#">Link syv</a></li>
    <li><a class="knapp" href="#">Link åtte</a></li>
    <li><a class="knapp" href="#">Link ni</a></li>
   </ul>
 </div>
 </div>

 <div id="boks">

    <div id="navigasjon">
    test
    </div>

    <div id="tekst">  
    <p>
    massa vitae ligula mollis sodales. Vivamus at est. Etiam vitae nulla sed massa imperdiet dignissim.      Phasellus pellentesque. Aenean lobortis rhoncus libero. Nullam malesuada pede. Nullam tincidunt.         Vivamus dui odio, condimentum a, sagittis in, malesuada sit amet, augue. Cum sociis natoque      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad      litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis est ac mi consectetuer      sodales. Phasellus in dui id ante ullamcorper tempus. Praesent adipiscing semper risus. Nullam a      nibh.<br /><br />

    Maecenas condimentum, diam eget eleifend feugiat, risus odio tristique dui, facilisis mollis velit      ante a libero. Fusce porttitor enim ac purus. Nullam quis lorem. Vestibulum porta elementum elit.      Curabitur eu felis. Donec lobortis ligula ut nulla. Vestibulum mi. Fusce erat. In hac habitasse      platea dictumst. Nunc ornare enim. Sed in elit ac eros iaculis faucibus. Nullam nonummy quam ac      velit. Donec eu sapien. Vivamus luctus, urna vel imperdiet posuere, mi nibh luctus turpis, sed      tempor erat dolor ut magna. Maecenas imperdiet nulla. Cras in metus scelerisque elit fringilla      varius. Mauris a pede a risus faucibus mollis. Duis condimentum, enim ac pharetra fringilla, turpis      purus facilisis nibh, et ultricies nulla tellus semper odio.<br /><br />

    Aliquam risus. Aenean eleifend ligula ut nunc. Pellentesque id ligula ac mauris hendrerit suscipit.      Phasellus eget nisi eu neque tincidunt pellentesque. Quisque venenatis sapien vitae nibh.      Vestibulum non diam. Fusce nec tellus. Integer et sapien ut sem elementum ullamcorper. Vestibulum      tincidunt. Aliquam egestas, velit vel vehicula faucibus, justo purus bibendum tortor, non molestie      lacus mi vel metus. Mauris iaculis. In eu purus nec diam vestibulum faucibus. Class aptent taciti      sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.<br /><br />

    Aenean eu est. Nulla facilisi. Nam porta tortor in tortor. Ut eget pede. Sed sed augue a purus      tempor auctor. Ut quis augue. Nam a turpis. Nullam rutrum facilisis leo. Mauris vitae nunc. Cras      imperdiet massa. Aenean pretium posuere neque. Suspendisse condimentum tellus eget libero. Sed      consectetuer consequat lacus. Phasellus ut risus at eros faucibus iaculis. Cum sociis natoque      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ac libero et dui      interdum auctor. Praesent ac est nec metus euismod vestibulum. Aliquam tempus convallis mauris.<br /><br />

    Pellentesque in massa eu ligula dapibus pulvinar. Aenean nibh. Vivamus nec lacus in elit blandit      dignissim. Pellentesque ipsum mauris, cursus non, ullamcorper at, ultrices a, elit. Maecenas      adipiscing ullamcorper odio. Ut faucibus sem vitae sapien. Praesent tristique. Donec quis quam.      Morbi rutrum mauris vitae risus. Nulla facilisi. Sed erat.
    </p>
    </div>

     <div id="tekstt">
    <p>
    massa vitae ligula mollis sodales. Vivamus at est. Etiam vitae nulla sed massa imperdiet dignissim.      Phasellus pellentesque. Aenean lobortis rhoncus libero. Nullam malesuada pede. Nullam tincidunt.         Vivamus dui odio, condimentum a, sagittis in, malesuada sit amet, augue. Cum sociis natoque      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad      litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis est ac mi consectetuer      sodales. Phasellus in dui id ante ullamcorper tempus. Praesent adipiscing semper risus. Nullam a      nibh.<br /><br />

    Maecenas condimentum, diam eget eleifend feugiat, risus odio tristique dui, facilisis mollis velit      ante a libero. Fusce porttitor enim ac purus. Nullam quis lorem. Vestibulum porta elementum elit.      Curabitur eu felis. Donec lobortis ligula ut nulla. Vestibulum mi. Fusce erat. In hac habitasse      platea dictumst. Nunc ornare enim. Sed in elit ac eros iaculis faucibus. Nullam nonummy quam ac      velit. Donec eu sapien. Vivamus luctus, urna vel imperdiet posuere, mi nibh luctus turpis, sed      tempor erat dolor ut magna. Maecenas imperdiet nulla. Cras in metus scelerisque elit fringilla      varius. Mauris a pede a risus faucibus mollis. Duis condimentum, enim ac pharetra fringilla, turpis      purus facilisis nibh, et ultricies nulla tellus semper odio.<br /><br />

    Aliquam risus. Aenean eleifend ligula ut nunc. Pellentesque id ligula ac mauris hendrerit suscipit.      Phasellus eget nisi eu neque tincidunt pellentesque. Quisque venenatis sapien vitae nibh.      Vestibulum non diam. Fusce nec tellus. Integer et sapien ut sem elementum ullamcorper. Vestibulum      tincidunt. Aliquam egestas, velit vel vehicula faucibus, justo purus bibendum tortor, non molestie      lacus mi vel metus. Mauris iaculis. In eu purus nec diam vestibulum faucibus. Class aptent taciti      sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.<br /><br />

    Aenean eu est. Nulla facilisi. Nam porta tortor in tortor. Ut eget pede. Sed sed augue a purus      tempor auctor. Ut quis augue. Nam a turpis. Nullam rutrum facilisis leo. Mauris vitae nunc. Cras      imperdiet massa. Aenean pretium posuere neque. Suspendisse condimentum tellus eget libero. Sed      consectetuer consequat lacus. Phasellus ut risus at eros faucibus iaculis. Cum sociis natoque      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ac libero et dui      interdum auctor. Praesent ac est nec metus euismod vestibulum. Aliquam tempus convallis mauris.<br /><br />

    Pellentesque in massa eu ligula dapibus pulvinar. Aenean nibh. Vivamus nec lacus in elit blandit      dignissim. Pellentesque ipsum mauris, cursus non, ullamcorper at, ultrices a, elit. Maecenas      adipiscing ullamcorper odio. Ut faucibus sem vitae sapien. Praesent tristique. Donec quis quam.      Morbi rutrum mauris vitae risus. Nulla facilisi. Sed erat.
    </p>
    </div>

    <div id="reklame">
      <p class="bilder">

      <a href="http://www.haugesund-sparebank.no"><img src="bilder/sponsor/haugesund_sparebank.jpg"            width="140" height="37" alt="Haugesund Sparebank" /></a>

      <a href="http://www.rm-industrier.no"><img src="bilder/sponsor/rm.jpg" width="140" height="43"           alt="R & M Industrier" /></a>

      <a href="http://www.spinn.no"><img src="bilder/sponsor/spinn_sykkelshop.jpg" width="140"                 height="47" alt="Spinn Sykkelshop" /></a>

      <a href="http://www.haugaland-kraft.no"><img src="bilder/sponsor/haugaland_kraft.jpg" width="140"        height="73" alt="Haugaland Kraft" /></a>

      <a href="http://platousport.com"><img src="bilder/sponsor/platou.jpg" width="140" height="41"        alt="Platou" /></a>

      </p>
    </div> 

 </div>
</div>

</body>

</html>

CSS

* { margin: 0; padding: 0 }

body {
       background: url('bilder/hovedbakgrunn.jpg') #dff5cb repeat-y;
       background-position: center;
}
#innhold {
       width: 804px;
       height: 100%;
       position: absolute;
       left: 50%;
       margin: 0 0 0 -402px;
}
#header {
       background: url('bilder/banner.jpg');
       width: 810px;
       height: 212px;
}
#navigasjon {
       background-color: #FFF;
       width: 140px;
height: 100%;
       float: left;
       border-right: 2px solid #efefef;
       border-left: 3px solid #d4d4d3;
}
#reklame {
       background-color: #FFF;
       width: 150px;
       height: 100%;
       float: right;
       border-left: 2px solid #efefef;
       border-right: 3px solid #d4d4d3;
}
#boks {
       background-color: #FFF;
       width: 810px;
       height: 100%;
       float: left;
}
#tekst {
       background-color: #FFF;
       width: 249px;
       height: 100%;
       float: left;
       padding-left: 4px;
       padding-right: 4px;   
}
#tekstt {
       background-color: #FFF;
       width: 249px;
       height: 100%;
       float: left; 
       padding-right: 4px;
}
#knapp {
       background-color: #FFF;
       width: 810px;
       height: 20px;
       float: left; 
       border-bottom: 3px solid #d4d4d3;
       border-top: 3px solid #d4d4d3;
}
p.bilder {
       text-align: center;
}
img {
       border: none;
}
ul {
       float: left;
       width: 810px;
       list-style-type:none;
}
a.knapp {
       width: 70px;
       height: 20px;
       text-decoration: none;
       color: black;
       background-color: white;
       padding-right: 2px;
       padding-left: 2px;
}
a.knapp:hover {
       background-color: #dff5cb
}
li {
       display: inline
}

Skjermbilder:

Klikk for å se/fjerne innholdet nedenfor

IE

Firefox

Opera

Det er forskjellig størrelse på fontene fordi jeg har ikke satt noen størrelse enda, og det ser ut som om IE har en annen standardstørrelse. Jeg håper inderlig at det finnes noen andre løsninger enn den jeg bruker nå. Det er upraktisk og vil nok ikke virke i all slags oppløsninger.

Takk for all hjelp på forhånd. :!:

Endret 13. november 2006 av Svinat

Ståle · 13. november 2006

<p> skal brukes til paragrafer, ikke <br /><br />

i #boks

height:100% er ikke 100% av nettleser vinduet. Det er feilen.

Men jeg vet ikke hva du kan gjøre for å rette på det =/

Endret 13. november 2006 av Stale2k

Logg inn

Border fortsetter ikke nedover på siden i FF/Opera

Anbefalte innlegg

Svinat

Lenke til kommentar

Videoannonse

Ståle

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer