100% høyde virker kun i IE7, ikke i FF.

[Torjus]

Hvorfor går bakgrunnen helt til bunns i IE7, også kun til bunnen av browseren i Firefox?

 

http://thinkfuzzy.net/

 

Har brukt denne metoden:

http://bza.no/100-prosent-hoyde-med-css/ - test 7

[Dexzy_0]

Hva med å legge ut CSS ?

[Torjus]

Hva med å legge ut CSS ?

 

Ga jo link til siden, men here you go:

 

http://thinkfuzzy.net/wp-content/themes/jan08/style.css

 

CSS:

 

 

/*

Theme Name: Januar 08

Author: Torjus

Author URI: http://thinkfuzzy.net

*/

 

* {

padding: 0;

margin: 0;

}

 

 

 

body {

background: #010101 url(img/bgbody.jpg) top center no-repeat;

 

font-family: Arial;

font-size: 14px;

}

 

 

 

 

 

/* 100% HØYDE

____________________________________________________________*/

html, body {

height: 100%;

}

 

* html #wrap {

height: 100%

}

 

 

/* WRAP

____________________________________________________________*/

 

#wrap {

background: url(img/bgwrap.jpg) repeat-y center;

width: 600px;

margin: 0 auto;

min-height: 100%;

}

 

 

 

 

/* HEADER

____________________________________________________________*/

#headertekst {

background: url(img/headertekst.jpg) no-repeat;

 

width: 600px;

height: 29px;

 

overflow: hidden;

display:block;

 

margin: 0 auto;

border: 0;

}

 

 

 

 

#headerbilde {

background: url(img/headerbilde3.jpg) no-repeat;

 

width: 600px;

height: 178px;

 

overflow: hidden;

display:block;

 

margin: 0 auto;

border: 0;

}

 

 

/* INNHOLD

____________________________________________________________*/

 

#main {

width: 390px;

padding: 0px 0px 110px 0px;

float: left;

}

 

#main .post {

margin: -5px 0 15px 12px; /* T R B L */

padding: 0px 10px 10px 0px; /* T R B L */

font-size: 12px;

font-family: Arial;

color: #444;

line-height: 1.6em;

text-align: justify;

}

 

#main .posted{

color: #666;

 

margin-bottom: 7px;

}

 

.post .story ul li{

list-style: url(images/pil.gif);

}

 

.posted p, blockquote, ol, ul {

line-height: 180%;

font-size: .9em;

}

 

.posted ol, ul {

margin:0 0 0 2em; /* T R B L */

padding:0;

}

 

.kommentarer {

text-align: right;

}

 

/* SIDEBAR

____________________________________________________________*/

 

#sidebar {

background: url(img/bgsidebartop.jpg) no-repeat top;

width: 210px;

padding: 10px 0px 110px 0px;

float: left;

}

 

#sidebar a {

font-size: 1.1em;

line-height: 1.5em;

border: 0;

}

 

#sidebar ul li .ingenhover a {

border: 0;

}

 

#sidebar ul {

margin: 0;

list-style: none;

line-height: 1.5em;

padding: 0 20px 20px 20px; /* T R B L */

}

 

#sidebar li ul {

border: 0;

padding-left: 0;

}

 

 

#sidebar li ul li{

padding: 0;

list-style: url(images/pil.gif);

margin-left: 20px;

color: #808080;

}

 

.current_page_item{

color: yellow;

}

 

#sidebar h2 {

margin: 0px 0 10px 0; /* T R B L */

padding: 0 0 5px 0; /* T R B L */

font-family: Arial, Sans-Serif;

font-weight: bold;

font-size: 1em;

line-height: 1em;

letter-spacing: 0px;

text-transform: uppercase;

color: #909794;

border-bottom: 1px solid #dbd5c5;

}

 

 

 

/* FOOTER

____________________________________________________________*/

 

#footer {

width: 600px;

margin: -100px auto 0 auto;

height: 100px;

background-color: #036;

color: #fff;

clear: both;

}

 

/* OVERSKRIFTER

____________________________________________________________*/

 

h2 {

padding: 5px 0 0 0;

margin: 0 0 0 -1px;

 

line-height: 1.2em;

 

font-size: 20px;

font-family: Georgia;

font-weight: 500;

 

color: #353535;

}

 

h5 { /* Profil overskrifter */

margin: 0;

padding: 0;

font-weight: normal;

color: #454545;

font-size: 1.8em;

}

 

h6 { /* Profil overskrift lister */

margin: 0 0 5px 0;

padding: 0;

font-weight: bold;

color: #444444;

font-size: 1em;

}

 

 

#main .posted {

font-size: 10px;

font-family: Arial;

 

color: #444;

 

text-transform: uppercase;

 

margin: 7px 0px 7px 0px;

}

 

 

 

/* LENKER

____________________________________________________________*/

 

#main .post a, #sidebar a {

border-bottom: 1px solid #E0E0E0;

text-decoration: none;

color: #7d9687;

}

 

#main .post a:hover, #sidebar a:hover {

border: none;

background: #7d9687;

color: #FFF;

}

 

 

/* BILDER I BLOGGEN

____________________________________________________________*/

#wrap #main .post p img {

float: right;

margin: 0px 0px 5px 5px; /* T R B L */

}

 

#wrap #main .post img {

float: none;

border: 1px solid #c3c3c3;

padding: 4px 4px 4px 4px;

background-color: #f6f6f6;

}

 

#wrap #main .post .entry a img:hover {

border: 1px solid #9f9f9f;

}

 

#wrap #main .post .entry .bildetest a:hover {

background: 0;

}

 

#wrap #main .post .entry .wp-smiley, #wrap #main .commentlist .wp-smiley {

border: 0;

padding: 0;

margin: 0;

float: none;

}

 

 

 

/* GALLERI

____________________________________________________________*/

#galleri h1 {

margin-bottom: 10px;

}

 

#gallery td.album img,

#gallery td.photo img,

#gallery td.empty img

{

vertical-align: middle;

text-align: center;

padding: 3px;

margin: 0 6px 0 6px; /* T R B L */

border: 3px solid #ccc;

background: 0;

}

#gallery td.album:hover img,

#gallery td.photo:hover img

{

border: 3px solid #08b6f0;

background: 0;

color: #000;

}

#gallery td.album a,

#gallery td.photo a

{

color: #000;

text-decoration: none;

background: 0;

border: 0;

 

}

#gallery td.album a:hover,

#gallery td.photo a:hover

{

border: 0;

background: 0;

color: #000;

 

}

#gallery td.empty

{

background: #f8f8f8;

}

#gallery img.thumb

{

border: 1px solid #000;

}

#gallery img.albumthumb

{

margin-left: -50px;

}

#gallery span.filename

{

text-transform: uppercase;

padding-left: 7px;

}

#gallery span.filedesc

{

font-size: 9px;

font-weight: normal;

color: #666;

padding-left: 7px;

}

#gallery td.headnav

{

font-size: 13px;

font-family: Tahoma;

font-weight: bold;

padding-bottom: 10px;

text-transform: lowercase;

}

#gallery td.footnav

{

padding-top: 10px;

text-align: center;

font-weight: bold;

}

#gallery div.info

{

padding-top: 20px;

}

#gallery div.footer

{

display: none;

font-size: 10px;

padding-top: 20px;

//font-size: 0;

//visibility: hidden;

}

#gallery span.cputime

{

visibility: hidden;

}

 

 

 

 

 

 

 

/* LIGHTBOX 2.0

____________________________________________________________*/

 

#lightbox{

position: absolute;

top: 40px;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

 

#lightbox a img{ border: none; }

 

#outerImageContainer{

position: relative;

background-color: #fff;

width: 250px;

height: 250px;

margin: 0 auto;

}

 

#imageContainer{

padding: 10px;

}

 

#loading{

position: absolute;

top: 40%;

left: 0%;

height: 25%;

width: 100%;

text-align: center;

line-height: 0;

}

#hoverNav{

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 10;

}

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

 

#prevLink, #nextLink{

width: 49%;

height: 100%;

background: transparent url(gfx/blank.gif) no-repeat; /* Trick IE into showing hover */

display: block;

}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(http://www.thinkfuzzy.net/gfx/forrige2.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(http://www.thinkfuzzy.net/gfx/neste2.gif) right 15% no-repeat; }

 

 

#imageDataContainer{

font: 10px Verdana, Helvetica, sans-serif;

background-color: #fff;

margin: 0 auto;

line-height: 1.4em;

}

 

#imageData{

padding:0 10px;

}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: normal; }

#imageData #numberDisplay{ font-style: italic; display: block; clear: left; padding-bottom: 1.0em; padding-top: 12px; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

 

#overlay{

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 100%;

height: 500px;

background-color: #000;

filter:alpha(opacity=60);

-moz-opacity: 0.6;

opacity: 0.6;

}

 

 

.clearfix:after {

wrap: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

 

* html>body .clearfix {

display: inline-block;

width: 100%;

}

 

* html .clearfix {

/* Hides from IE-mac \*/

height: 1%;

/* End hide from IE-mac */

}

 

[Dexzy_0]

Hvis jeg forstår rett skal designet trekkes helt til bunnen, har du prøvd med, margin-bottom: 0; ?

Endret 2. januar 2008 av Dexzy_0

[Garanti]

Kan du vær så snill å forklare hva du mener? Ser ikke noe problem med bakgrunnen.

[Torjus]

Hvis jeg forstår rett skal designet trekkes helt til bunnen, har du prøvd med, margin-bottom: 0; ?

 

Jepp, hvor vil du ha den verdien?

 

Kan du vær så snill å forklare hva du mener? Ser ikke noe problem med bakgrunnen.

 

Hvilken nettleser bruker du? Det er kun i Firefox det skjer. Hvis du scroller litt ned så ser du at bakgrunnen ikke forsetter nedover. Se bilde under:

[Dexzy_0]

Den samme div'n der du har height: 100%;

[øl_i_tastaturet]

Gjør om repeat-y til repeat-x da?

 

#wrap {
background: url(img/bgwrap.jpg) repeat-y center;
width: 600px;
margin: 0 auto;
min-height: 100%;
}

Endret 2. januar 2008 av Bjørshol

[Torjus]

Gjør om repeat-y til repeat-x da?

 

#wrap {
background: url(img/bgwrap.jpg) repeat-y center;
width: 600px;
margin: 0 auto;
min-height: 100%;
}

 

Huh? X er vannrett (horisontal) og y er loddrett (vertikal)? Bakgrunner skal jo gå nedover...

[øl_i_tastaturet]

Prøv du.

[øl_i_tastaturet]

Dette funker i allefall.

 

* {margin: 0 auto; }

html, body {
 height: 100%;
 }

body {
 width: 600px;
 margin: 0 auto;
 }

#wrap {
background: url(img/bgwrap.jpg) repeat-y;
width: 600px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

 

min-height: 100%;

height: auto !important;

height: 100%;

 

Der har du nok feilen din.

Endret 3. januar 2008 av Bjørshol

[Torjus]

Prøvde det, men fungerer fremdeles. Hvorfor har du flyttet

  width: 600px;
 margin: 0 auto;

 

...opp til body?

[øl_i_tastaturet]

Hmm, det funket når jeg testet her. Jeg brukte ditt bakgrunnsbilde.

 

Ikke spør meg hvorfor jeg satt det i body.

[haugsand]

I ditt tilfelle er det faktisk Firefox som viser nettsiden korrekt, i og med at IE tolker height som min-height.

[Torjus]

Okey. Noen som har en løsning? Skjønner ikke hva det kan være.

[mohuhau]

Husk å valider siden din når du har problemer! Ser ut som du har glemt å avslutte vertfall en <p>.

 

Men ser ut som du har et typisk float-problem. Når du setter float på et element vil elementet flyte utenfor sitt underliggende element. #main vil dermed ikke endre størrelsen på #wrap og #wrap vil kun ha en høyde på 100% som du har satt. Flytt #footer (Et vanlig blokk-element med clear:both satt) inn i slutten av #wrap og problemet er løst

 

Jeg ville også satt background-color: white; på main og tilsvarende korrekt bakgrunnsfarge på #sidebar slik siden ser bra ut fra toppen av før bakgrunsbildet er lastet.

Endret 12. januar 2008 av mohuhau

[Torjus]

Du er en engel! Det virket