Skum CSS

[Rikhard]

Tjena,

har ett väldigt konstigt problem.

När css-information ligger inom style-taggar på sidan så funkar den, men direkt jag försöker länka till css-filen så ser jag inge material ur divarna, bara bakgrundsfärgen, vad tusan har blivit fel?

 

Såhär ser CSS-filen ut:

 

@charset "UTF-8";
/* CSS Document */

body { background: #898989; margin: 0; margin-top: 20px; padding: 0; color: #000; }

.white { color: #ffffff; font-family: Courier New; font-size: 14px; }

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; }

a img { border: none; }

a:link { color: #ffffff; text-decoration: none; }

a:visited { color: #ffffff; text-decoration: underline; }

a:hover, a:active, a:focus { text-decoration: none; }

/* DESIGN */
.container { width: 880px; margin: 0 auto; }

.header { background-image: url(img/top.png); width: 880px; height: 50px; }

.contentMT { margin-top: 20px; width: 880px; height: 30px; background-image: url(img/main_top.png); }

.contentMTW { width: 880px; height: 20px; background-image: url(img/main_topW.png); }

.contentMBG { width: 880px; repeat: repeat; background-image: url(img/main_bg.png); }

.contentMbot { width: 880px; height: 20px; background-image: url(img/main_bot.png); margin-bottom: 20px; }

.footer { background-image: url(img/bot.png); width: 880px; height: 107px; }

.footer_content { width: 880px; height: 120px; }

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

[xeric]

Hur ser länken ut i headern?

Vilken DOCTYPE har du på sidan? (inte alla som hanterar @ på ett bra sätt)

Hur är cssfilen sparad?

 

Om du kommenterar bort 1'a raden..?

 

/* @charset "UTF-8"; */

[Rikhard]

Ser ut såhär:

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Tryckproduktion, Webbproduktion, Webbhotell, Mobila tjänster" />
<meta name="description" content="Sundsvall Webbyrå" />
<title>Sundsvall Webbyrå - Tryckproduktion, Webbproduktion, Webbhotell, Mobila tjänster</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

 

Blir ingen skillnad om jag tar bort:

@charset "UTF-8";

/* CSS Document */

[johnsj]

Jag tror att detta kan vara felet:

 

Du lägger CSS-filen i en mapp som heter "css". Detta gör att sökvägarna till bilderna i CSS filen blir fel. Rätta till dem, så att de blir relativa till root-mappen:

background-image: url(../img/top.png);

[Rikhard]

Jag tror att detta kan vara felet:

 

Du lägger CSS-filen i en mapp som heter "css". Detta gör att sökvägarna till bilderna i CSS filen blir fel. Rätta till dem, så att de blir relativa till root-mappen:

background-image: url(../img/top.png);

 

ja de är de ju, trött man är, hehe

[xeric]

Tänk på att när du lägger CSSfilen som extern fil i egen css-mapp får allt länkat innehåll i css taggarna en annan sökväg.

 

T ex:

.header { background-image: url(img/top.png); width: 880px; height: 50px; }

Blir:

.header { background-image: url(../img/top.png); width: 880px; height: 50px; }

 

Annars letar den efter en bild som ligger: "exempel.se/css/img/top.png"