CSS help

MNuTz · 6 Mar 2007 at 00:27

Hi all,

My CSS knowledge is zero at the moment and my bro in law needs some help.

He has just started out with CSS and has just started using it on his website, however, it appears fine on IE and Opera but Firefox messes it all up.

If anyone can have a look and suggest a fix he would be very grateful

www.urbanebula.co.uk

Thanks in advance

llaadd · 6 Mar 2007 at 02:48

have a look here:
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

and here:
http://www.cssfix.co.uk/

good luck

BlackDragon · 7 Mar 2007 at 00:58

No knowledge of CSS here, but will need to learn it soon.

A lot of people recommend here for learning all sorts of things:

http://www.w3schools.com/

xiphrex · 7 Mar 2007 at 02:31

You have this in your style sheet:

Code:

body {
	margin-left: 200px;
	margin-right: 200px;
	margin-top: 50px;
 	background-color: #000000;
	background-image: url(bg.jpg);
	background-repeat: repeat-y;
	background-attachment: scroll;
	background-position: center;
}

h1 {
	text-transform: capitalize;
	text-decoration: underline;
	font-family: arial;
	color: #FFFFFF;
}

h3 {
	text-decoration: underline;
	font-family: arial;
	color: #FFFFFF;
}

h6 {
	font-family: arial;
	color: #FFFFFF;
}


p {
	font-family: arial;
	color: #FFFFFF;	
}

div.box {
	font-family: arial;
	height: 35px;
	width: 600px;
	color: #FFFFFF;
	border: 6px ridge silver;
	background-image: url(boxbg1.jpg);
	background-position: center center;
}

In div.box you've put "height: 35px;", not sure why, but change 35px to auto.

You also want to center the content, so you can change margin-left and margin-right to "auto" in the body tag (I think this should work, you might need to put a div around all the content and give it this as well for it to work). Definately try and center it properly though as even in IE if you resize the window, the menu moves but the main content doesnt. Add this to the div.box tag for centering as well: margin:auto;

Also I think to fix the other bugs you need to give the page a doctype: http://htmlhelp.com/tools/validator/doctype.html

Most people use:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Sorry Im unable to test any of this out if your still having problems I can look into it in more detail tomorrow.

Cheers