CSS PROB [+REP]

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 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:

And it looks like this on Firefox:

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:

HTML Code:

#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

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?

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

Bojangles · 02-03-2008, 05:33 PM

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

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

Try that!

~~Moh~~ · 02-03-2008, 05:33 PM

You have the background urls like

Code:

img\410mid.gif

Shouldnt they be like

img/410mid.gif

Bojangles · 02-03-2008, 05:35 PM

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?

Thread: CSS PROB [+REP]

Thread Tools

CSS PROB [+REP]

Posting Permissions