Feil (css?) i IE

[siggii]

Er det noen av dere med Internet Explorer som kan forstå dere på glippa i den oransje ramma på denne sia? Jeg bruker safari, så jeg ble litt skuffa når jeg så den i IE:P

 

Det er vel en CSS-feil?

 

Her er hvertfall koden

 

/* CSS Document */

body {
font-family: Arial;
font-size: 13px;
background-repeat: no-repeat;
color:#111111;
}


#page-container {
width: 897px;
margin-top: 0px;
background: center;
margin: auto;
background-color:#ffffff;
}



#header {
background: url(/images/Header.jpg);
background-repeat: no-repeat;
height:124px;
width: 269px;
float:left;

}

#navigation {
background: url(/images/headerto.jpg);
background-repeat: no-repeat;
height:124px;
width: 628px;
float:right;
margin-top:0px;
}


#left {
background:url(/images/venstre.jpg);
float:left;
width: 291px;
float:left;
margin-left:0px;
padding-left: 0px;
height: 530px;

}


#hoyre{
background-image:url(images/hoyre.jpg);
float: right;
width: 124px;
height: 530px;

}

#content {
padding-top: 1px;
padding-right: 7px;
padding-left: 5px;

}


#Nyheter {
}



.hidden {
display: none;
}



h1 {
margin: 2px;
FONT-SIZE: 24px; 
letter-spacing: 1px;

}


h3 {
margin: 0px;
padding-bottom: 2px;
BORDER-BOTTOM: #477CBE 1px dashed; 
FONT-SIZE: 16px; 
letter-spacing: 1px;

}


h4 {
border-bottom: #999999 1px solid;
FONT-SIZE: 28px; 
color:#1E9538;
font-family: calibri;
padding-bottom: 7px;
letter-spacing: 1px;
margin-right: 10px;
margin-bottom: 2px;
margin-top: 4px;


}


h5 {
border-bottom: #999999 1px solid;
FONT-SIZE: 21px; 
color:#1E9538;
font-family: calibri;
padding-bottom: 7px;
letter-spacing: 1px;
margin-right: 10px;
margin-bottom: 2px;
margin-top: 4px;
}





.img {
padding: 0px;
}

.style1 {
font: Arial;
font-size: 12px;
color: #111111;
line-height: 14px;
}


#footer {
clear: both;
background: url(/images/footer.jpg);
height:70px;
width:897px;
color: #767676;
}




/**** INPUT OSV ****/

input, textarea, select {
border: 1px solid #5A9EDE;
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

 

 

Edit: Skriveleif og feil link...

Endret 10. februar 2008 av siggii

[selurdog]

Kan det være så enkelt at du setter body til margin og padding 0?

 

Et annet tips:

Bruk CSS shorthand.

 

background: center;

background-color:#ffffff;

 

kan skrives:

background-color:#ffffff center;

 

-----------------------

 

alt som er 0px kan skriver med bare 0

 

-----------------------

 

padding-top: 1px;

padding-right: 7px;

padding-left: 5px;

 

kan skrives:

padding: 1px 7px 0 5px;

(top, right, bottom, left er rekkefølgen)

-----------------------

 

margin-right: 10px;

margin-bottom: 2px;

margin-top: 4px;

 

kan skrives:

margin: 4px 10px 2px 0;

[siggii]

hmm.. Godt tips. Skal prøves ut:)

 

Er ganske ny med CSS skjønner du, så koden er helt sikkert ganske kronglete

[selurdog]

Oppdaget feil i mitt 1.svar.

 

background: center;

background-color:#ffffff;

 

kan skrives:

background-color:#ffffff center;

 

Skal være:

kan skrives:

background:#ffffff center;

Sånn går det når man klipper og limer litt for fort.

Beklager det.

 

Og din CSS er fin den, bare noen små forbedringsmuligheter.

[Dexzy_0]

Hvis dette ikke er løst enda legg til: * { margin: 0px; padding: 0px; } i css dokumentet ditt dette nullstiller alle marginer og glipper .. Noe som internet explorer har problemer med ; )

[siggii]

* { margin: 0px; padding: 0px; } fiksa det hele. Tusen hjertelig takk, du redda skinnet mitt for i dag!

[Dexzy_0]

Så bare en liten feil her:

 

 

.style1 {

font: Arial:

font-size: 12px;

color: #111111;

line-height: 14px;

}

 

 

Prøv å bruk font-family istede for font da validerer css'n din !

[4588pkdkrikue5c]

Har du ordnet det nå? Ser ingen problem i IE jeg i alle fall.

[siggii]

Jeg har fått fikset det.

 

* { margin: 0px; padding: 0px; }

 

Mods kan merke denne posten for løst, og takker for hjelp folkens!

[4588pkdkrikue5c]

Så bra, hyggelig å høre

[Memetro]

Hvordan får du til de avrundete kantene?

 

Det er så mye penere enn rette kanter....

[Dexzy_0]

Det kan jeg svare deg på, hvis du lager forskjellige klasser (class f.eks .minklasse) en med bilde til "headeren" altså toppen der bruker du background: url('urltilbilde'); i innholdet gjør du som vanelig og du gjør akk det samme på "footeren" som på headeren ..

 

Litt raskt og dårlig forklart av meg .. hhe ^^

[siggii]

Tenkte du på de buede hjørnene? det gjorde jeg i såfall i Photoshop

[4588pkdkrikue5c]

Han mener sikkert CSS koden.. Det er ikke så fryktelig vanskelig, men du må da definere høyden i det du skal avrunde hjørnene på. I pixler.