CSS overskriver seg selv?

[Hayer]

Hei!

 

Merket noe rart her når jeg drev å tullet rundt i CSS.

 

<style>
body
{
margin:0px;
padding:0px;
background-color:#575757;
}

.header
{
height:201px;
width:100%;
background-image:url('header.gif');
background-repeat:no-repeat;
}

.menu
{
height:40px;
background-image:url('menu_bg.gif');
background-repeat:repeat-x;
}

.menu a:link, a:visited
{
padding-top:6px;
font-size:14pt;
font-family:Microsoft Sans Serif;
height:40px;
width:100px;
text-decoration:none;
color:#909090;
}

.menu a:hover
{
background-image:url('menu_hover.gif');
background-repeat:repeat-x;
width:100px;
height:40px;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
}

.menu .spacer
{
width:25px;
}

.midt
{
background-image:url('midt_bg.gif');
background-color:#FFFFFF;
height:390px;
background-repeat:repeat-x;
vertical-align:top;
margin:0px;
padding:0px;
}

.footer
{
border-top:#000000 solid 1px;
height:200px;
background-color:#575757;
vertical-align:baseline;
}

.footer .border
{
border-top:#999999 solid 1px;
margin-bottom:2px;
padding:0px;
}


.footer .text
{
float:right;
width:200px;
padding-top:10px;
margin-top:10px;
text-align:right;
padding:10px;
border-right:#666666 solid 1px;
height:150px;	
}

.footer .text a:link, a:visited
{
font-size:12px;
text-decoration:none;
color:#333333;
}

.footer .text a:hover
{
font-size:12px;
text-decoration:none;
color:#000000;
margin-right:10px;
}

.footer .text h1
{
font-size:14px;
margin:0px;
border-bottom:#333333 dashed 1px;
width:100px;
}
</style>

 

Gjør at menyen(menu klassen) blir feil.

Men hvis jeg plasserer footer-klassen og alle dens under klassen på toppen, så funker det.

 

Slik mener jeg

<style>

.footer
{
border-top:#000000 solid 1px;
height:200px;
background-color:#575757;
vertical-align:baseline;
}

.footer .border
{
border-top:#999999 solid 1px;
margin-bottom:2px;
padding:0px;
}


.footer .text
{
float:right;
width:200px;
padding-top:10px;
margin-top:10px;
text-align:right;
padding:10px;
border-right:#666666 solid 1px;
height:150px;	
}

.footer .text a:link, a:visited
{
font-size:12px;
text-decoration:none;
color:#333333;
}

.footer .text a:hover
{
font-size:12px;
text-decoration:none;
color:#000000;
margin-right:10px;
}

.footer .text h1
{
font-size:14px;
margin:0px;
border-bottom:#333333 dashed 1px;
width:100px;
}

body
{
margin:0px;
padding:0px;
background-color:#575757;
}

.header
{
height:201px;
width:100%;
background-image:url('header.gif');
background-repeat:no-repeat;
}

.menu
{
height:40px;
background-image:url('menu_bg.gif');
background-repeat:repeat-x;
}

.menu a:link, a:visited
{
padding-top:6px;
font-size:14pt;
font-family:Microsoft Sans Serif;
height:40px;
width:100px;
text-decoration:none;
color:#909090;
}

.menu a:hover
{
background-image:url('menu_hover.gif');
background-repeat:repeat-x;
width:100px;
height:40px;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
}

.menu .spacer
{
width:25px;
}

.midt
{
background-image:url('midt_bg.gif');
background-color:#FFFFFF;
height:390px;
background-repeat:repeat-x;
vertical-align:top;
margin:0px;
padding:0px;
}

</style>

 

Hvorfor?!

 

Edit 1: Bare testet i IE6. Skal teste i Opera og FF nå.

 

Edit 2: I Opera og FF blir ikke meny elementene rett... Hjelp?

Endret 8. januar 2009 av Hayer

[Equerm]

En link til siden hadde hjulpet

[funkyboy]

Hvorfor?!

 

Den css-en der ser egentlig ikke ut til å være spesielt logisk. Trolig kommer problemet ditt grunnet bruken av vertical-align. Et standard css-oppsett på en slik side vil trolig være noe ala dette;

 

#wrapper { /* Holder elementene sammen. Bestemt bredde, midtstilt, hundreprosent eller sidestilt. */ }
#header { /* Bestemt bredde, evt. høyde. Float/clear benyttes ved behov. */ }
#menycontainer { /* Bestemt bredde. Float/clear benyttes ved behov. Ligger over content, eller floates ved siden av. */ }
#contentcontainer { /* Bestemt bredde. Float/clear benyttes ved behov. Ligger under menycontainer, eller floates ved siden av. */ }
#footer { /* Bestemt bredde. Float/clear benyttes ved behov. Ligger under content/menycontainer. */ }

[Hayer]

Sorry, utvikler lokalt, ingen link til siden.

 

Men det løste seg selv... som mange av mine problemer gjør <.<