CSS Issues. Can you help me out?

escaflowne11 · #1 (**permalink**) Sep 9th, 2006, 18:18

I decided that my last thread was going way off topic with my issues, so I am just going to open this one up instead.

Here is the code I have right now.

Quote:

/* CSS Document */

h1
{
color: #0099FF
}

h2
{
}

body
{
background: #005fa4 url("backing.gif") repeat-x;
}

div.container
{
margin: auto;
height: 600px;
width: 600px;
}

div.header
{
margin: auto;
height: 120px;
width: 590px;
}

div.nav
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 40px;
width: 590px;
background-color: #FFFFFF;
}

div.body
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 400px;
width: 590px;
background-color: #FFFFFF;
}

Quote:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css" />
<title>Scoff Skateboarding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div class='container'>
<div class='header'></div>

<div class='nav'></div>
<div class='body'></div>
<div class='nav'></div>

</div>
</body>
</html>

Now the problems I ran acrossed was that now that I have multiple div layers in play, they dont want to conform to the dimensions I am giving them. I cant get the height to work for the 'nav's, and the 'body'. I also cant get the borders to work properly, along with the background color... I had them at one time, but now they wont show at all. And thats in firefox. Explorer includes the border, with the background color, but wont use the dimensions. Any thoughts on this problem?

If you want to see the style I am aiming for check out the old, trashy site. http://www.scoffshop.com

Thanks!

KingOfFlash · #2 (**permalink**) Sep 9th, 2006, 22:27

maybe i am too simple for this...
but cant you just copy the source of that page u want and change the pictures?

ehhh..did i say copy??

shouldnt be in the vocabulary of a designer right?

greetz,\
KingOfFlash

escaflowne11 · #3 (**permalink**) Sep 10th, 2006, 01:27

that IS my page. That page was designed very poorly though. The graphics will all be the same. I am basically taking that original website (mine) and redesigning it properly, so its compleatly compatable, and problem free.

ukgeoff · #4 (**permalink**) Sep 11th, 2006, 16:52

Would be better to have a link to a page with your current layout so that we can see what's happening.

Note that margin: auto does not work in IE before version 7.

moojoo · #5 (**permalink**) Sep 11th, 2006, 16:57

margin:auto works in IE 6. but 5 and 7 seem to have issues with it. That has been my experience anyway.

escaflowne11 · #6 (**permalink**) Sep 13th, 2006, 01:09

Heres an example of the code I am using. It looks horrible online...
http://www.scoffshop.com/redesign/Index.html

I WANT it to look similar to my original site I designed with tables...
http://www.scoffshop.com

Heres the code I am using for my Index.html

Quote:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css" />
<title>Scoff Skateboarding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div class='container'>
<div class='header'></div>

<div class='nav'></div>
<div class='body'></div>
<div class='nav'></div>

</div>
</body>
</html>

And this is the code for my CSS.

Quote:

/* CSS Document */

h1
{
color: #0099FF
}

h2
{
}

body
{
background: #005fa4 url("backing.gif") repeat-x;
}

div.container
{
margin: auto;
height: 600px;
width: 600px;
}

div.header
{
margin: auto;
height: 120px;
width: 590px;
}

div.nav
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 40px;
width: 590px;
background-color: #FFFFFF;
}

div.body
{
border-width: 2px;
border-color: #000000;
border-style: solid;
margin: auto;
heigth: 400px;
width: 590px;
background-color: #FFFFFF;
}

Thats exactly what it is on the page... Kinda sad right now, but I dont know how to fix it.

ukgeoff · #7 (**permalink**) Sep 13th, 2006, 09:21

Your problem is one of spelling.

In your .nav and .body definitions, you have heigth instead of height.

BTW. I don't think it's a good idea to have a class name, .body, that is the same as an html element. Leads to confusion.

moojoo · #8 (**permalink**) Sep 13th, 2006, 13:18

heighth is a Texas thing. It always pissed me off. They always say Heigth! and then they pronounce the dang T in often. It's silent people!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help! FF & IE7 issues	gwalker	Web Page Design	5	Jun 6th, 2008 02:08
IE and FF Issues...	Aaron1988	Web Page Design	0	May 10th, 2008 15:52
Serious issues in IE7	Daimz	Web Page Design	2	Aug 21st, 2007 12:38
GD Issues.	PicoDeath	PHP Forum	6	Apr 5th, 2007 16:53
More issues.	mreine	Webforumz Suggestions and Feedback	7	Mar 13th, 2006 01:49

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Issues. Can you help me out?