CSS PROB [+REP] [Archive]

Decode

02-03-2008, 05:06 PM

k, ive made a css layot (well nearly) and it works fine on IE but on firefox the box backgrounds and box fonts dont display- This is the code:

<html>
<head>
<style type="text/css">
body {margin: 0px;
background: #CCCCCC;
}
.container {width: 840px;
background: #FFFFFF;
}
.col1 {width: 410px;
float: left;
margin: 5px;
}
.col2 {width: 230px;
float: left;
margin: 5px;
}
.col3 {width: 170px;
float: left;
margin: 5px;
}
.410top {width: 100%;
padding: 0px;
height: 32px;
background-image: url('img\410top.gif');
font-family: tahoma;
color: #FFFFFF;
font-size: 12pt;
text-align: left;
font-weight: bold;
padding-left: 7px;
padding-top: 3px;
}
.410mid {width: 100%;
padding: 0px;
background-image: url('img\410mid.gif');
font-family: tahoma;
font-size: 10pt;
}
.410bottom {width: 100%;
padding: 0px;
height: 13px;
font-size: 1px;
background-image: url('img/410bottom.gif');
margin-bottom: 10px;
}
.230top {width: 100%;
padding: 0px;
height: 32px;
background-image: url('img\230top.gif');
font-family: tahoma;
color: #FFFFFF;
font-size: 12pt;
text-align: left;
font-weight: bold;
padding-left: 7px;
padding-top: 3px;
}
.230mid {width: 100%;
padding: 0px;
background-image: url('img\230mid.gif');
font-family: tahoma;
font-size: 10pt;
}
.230bottom {width: 100%;
padding: 0px;
height: 13px;
font-size: 1px;
background-image: url('img/230bottom.gif');
margin-bottom: 10px;
}
</style>
</head>
<body>
<center>
<div class="container">
<div class="col1">
<div class="410top">
New Games!
</div>
<div class="410mid">
Demo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo Dem
Demo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo Demo
Demo DemoDemo DemoDemo Demo
</div>
<div class="410bottom">
</div>
</div>
<div class="col2">
<div class="230top">
Action Games
</div>
<div class="230mid">
Demo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo Dem
</div>
<div class="230bottom">
</div>
<div class="230top">
Shoting Games
</div>
<div class="230mid">
Demo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo Dem
</div>
<div class="230bottom">
</div>
<div class="230top">
Driving Games
</div>
<div class="230mid">
Demo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo DemoDemo Dem
</div>
<div class="230bottom">
</div>
</div>
<div class="col3">
Hi
</div>
</div>
</center>
</body>
</html>

And it looks like this on IE:
http://www.tehupload.com/7710775604.png

And it looks like this on Firefox:
http://www.tehupload.com/11283769955.png

kk.

02-03-2008, 05:14 PM

try changing them to div id instead of class. it may help im unsure. then use like .header for the head of the box and when your writing it, put <span class="header">games</span>

it may help

EDIT: ids are written like this:

#header {
width:100%;
attributes etc...
}

Buax

02-03-2008, 05:18 PM

Firefox and IE use differnt style-sheet reading methods. Annoyingly.

If it works on FF it'll work on IE though so if you re-design the CSS using FF it'll be fine.

Decode

02-03-2008, 05:18 PM

try changing them to div id instead of class. it may help im unsure. then use like .header for the head of the box and when your writing it, put <span class="header">games</span>

it may help

EDIT: ids are written like this:

#header {
width:100%;
attributes etc...
}

Thanks, it fixed the fonts :) But not the background images :(

+Rep

Anyone know how to fix the images?

kk.

02-03-2008, 05:28 PM

erm, try getting rid of the quotes around the images?

Bojangles

02-03-2008, 05:30 PM

Edit - Didn't read it right sorry ;P
ALSO: Whats the color supposed to be?

kk.

02-03-2008, 05:32 PM

oh yh, add the -color to the container background
not the body :P

Bojangles

02-03-2008, 05:33 PM

Was just about to post that lmao.
Took my time to read the code for once :P

.container {width: 840px;
background-color: #FFFFFF;
}

Try that!:)

Moh

02-03-2008, 05:33 PM

You have the background urls like

img\410mid.gif
Shouldnt they be like

img/410mid.gif

Bojangles

02-03-2008, 05:35 PM

You have the background urls like

img\410mid.gifShouldnt they be like

Think so but the /'s are still working in effect aren't they?

kk.

02-03-2008, 05:38 PM

You have the background urls like

img\410mid.gif
Shouldnt they be like
ahh yes, that is a problem lmao

Decode

02-03-2008, 05:40 PM

oh yh, add the -color to the container background
not the body :P
Thanks:), But didnt work

You have the background urls like

img\410mid.gif
Shouldnt they be like
That fixed the images - Thanks +Rep :)