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

Torjus · 2. januar 2008

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 · 2. januar 2008

Hva med å legge ut CSS ? :whistle:

Torjus · 2. januar 2008

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 · 2. januar 2008

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 · 2. januar 2008

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

Torjus · 2. januar 2008

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 · 2. januar 2008

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

øl_i_tastaturet · 2. januar 2008

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 · 2. januar 2008

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 · 2. januar 2008

Prøv du.

øl_i_tastaturet · 3. januar 2008

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 · 3. januar 2008

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

  width: 600px;
 margin: 0 auto;

...opp til body?

øl_i_tastaturet · 3. januar 2008

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

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

haugsand · 3. januar 2008

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

Torjus · 6. januar 2008

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

mohuhau · 12. januar 2008

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 · 14. januar 2008

Du er en engel! Det virket

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

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer