css senor

ferretmaster · 20 Sep 2006 at 23:17

G'day im working on getting a smart layout for my website. Anyway the problem is the css it is not displaying the colours in firefox but is in internet explorer. Also
the layout is not exactly right. Would someone check through this for me?

thankyou.

Code:

body 
{
	background-color: 0099FF
}


ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid grey;
}
a:hover {background-color:#ff3300}
li {display:inline}

div.container
{
	width:100%;
	margin:0px;
	border:1px solid grey;
	line-height:150%;	
}
	margin:0;
}
div.header,div.footer
{
	padding:0.0em;
	color:white;
	background-color:#787878;
	clear:left;
}

div.picture
{
	padding:0.0em;
	color:white;
	background-color:#595959;
	clear:left;
}

h1.header
{
	padding:0;
	margin:0;
}

div.left
{
	float:left;
	width:160px;
	margin:0;
	padding:1em;
}

div.right
{
	float:right;
	width:160px;
	margin:0;
	padding:0em;
}


div.content
{
	margin-left:190px;
	margin-right:190px;
	border-right:1px solid gray;
	border-left:1px solid gray;
	padding:1em;
}

Steve09 · 20 Sep 2006 at 23:27

We had the same problem last night with someone on here.
His borders on his Website were Gold, Internet Explorer displayed them as Gold, which was how they should be, but FireFox displayed them as Black.

Again, Tonight, we had someone on here regarding FireFox and Internet Explorer, with their layout.
FireFox this time displayed it correctly, but Internet Explorer didnt.

I don't know why its doing this, I will try and find out

blade007 · 21 Sep 2006 at 00:13

the problem might have something to do with your colour.

In that, "grey" is English

and "gray" is American

I'm pretty sure (had trouble with it in past) whereby it doesn't recognise the English .. so try "gray" for your border colour.

ferretmaster · 21 Sep 2006 at 18:04

hmmmmmmmmmmmmmmm

Hey i have uploaded the site to a server so you can see it.

http://www.lawyerpigeons.tsohost.co.uk/frontpage.htm

and the latest css

http://www.lawyerpigeons.tsohost.co.uk/layoutforwebsite.css

As you can see the site displays ok in internet explorer but not well at all in firefox. Also in the top two divs i am trying to center the links and the picture. How do i do this? I am getting driven up the wall with this css.

Any code improvements or ideas would be greatly appreciated.

blade007 · 21 Sep 2006 at 18:21

tbh I prefer how it looks in firefox.

for your links

stick in a "text-align: center;" into the css for your nav menu

to center the image use either "<center>" tags (a bit frowned upon these days,but work very well) or add a "style="text-align: center;"" to you img markup in the text (not very good, but you can see how it looks)

it looks totally different in IE, and in firefox. (the bottom div showing up in the main text with a white background (it's blue in ff) and all sorts of other things)

blade007 · 21 Sep 2006 at 18:23

have a look at the andreas01 template I gave a link to in the other thread .. that will show you how to setup 2 columns (or 3) and a footer ... all rendering correctly.

invest a bit of time

MagSafe · 21 Sep 2006 at 21:51

Just had a very quick glance at this thread, but shouldn't there be #'s infront of your colours? ... also instead of using "gray" use the actual hexidecimal code.

Will have a good look tomorrow morning though

Edit: ok, had another look ...

Change all your colours to hexidecimal codes with #'s infront of them

Change your classes to id's, div's like container and most of the other ones aren't going to be used more than once, so theres point in using a class for them.

Instead of using <p></p> to create a lower area under the image, use margin-bottom: 15px; (adjust accordingly) within the css file (use a class for this with the image)

Instead of using the <center> and align="middle" tagging use text-align: center in your css file under the picture div.

As your general layout give this tutorial a go