CSS PROB [+REP]

Printable View

Show 40 post(s) from this thread on one page

02-03-2008, 05:06 PM
Decode

CSS PROB [+REP]

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 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
02-03-2008, 05:14 PM
kk.

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:

HTML Code:

#header { width:100%; attributes etc... }
02-03-2008, 05:18 PM
Buax

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.
02-03-2008, 05:18 PM
Decode

Quote:

Originally Posted by JimboJosh

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:

HTML Code:

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

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

+Rep

Anyone know how to fix the images?
02-03-2008, 05:28 PM
kk.

erm, try getting rid of the quotes around the images?
02-03-2008, 05:30 PM
Bojangles

Edit - Didn't read it right sorry ;P
ALSO: Whats the color supposed to be?
02-03-2008, 05:32 PM
kk.

oh yh, add the -color to the container background
not the body :P
02-03-2008, 05:33 PM
Bojangles

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!:)
02-03-2008, 05:33 PM
Moh

You have the background urls like

Code:

img\410mid.gif

Shouldnt they be like

Quote:

img/410mid.gif
02-03-2008, 05:35 PM
Bojangles

Quote:

Originally Posted by .:Jack120:.

You have the background urls like

Code:

img\410mid.gif

Shouldnt they be like

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

Show 40 post(s) from this thread on one page