View Full Version : CSS layout,


putnamehere
10-14-2005, 12:31 AM
Heya all, i am setting up a website yeah? and i am useing one on the css layouts that i got from lissa's site. I am useing the layout with a top a center and right side, i have changed it so that the right side is left. However my problem is that, the center of the page ( in Firefox ) is on the very edge of my banner.

I think it will be best if i link to the site.
h**p://phppaul.rr7.co.uk/
( TT has been started out so not to waste lissa bandwitch, jsut add it back )

Ok, like i said Firefox is were the prob lies IE is fine i aint sure about others if anybody else has other browsers it would be great of you to check how it looks.

Heres the css:

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 500px;
top: 220px;
width: 200px;
}
#center {
top: 15px;
margin-left: 30px;
margin-right: 330px;
}



ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}

ul#navlist li
{
float: left;
font-family: verdana;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: 3300cc;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: white;
border-right: 1px solid black;
text-decoration: none;
}

ul#navlist li#active
{
color: red;
background-color: #6699ff;
}

#navlist a:hover
{
color: black;
background-color: #6699ff;
}

putnamehere
10-14-2005, 07:06 PM
Now the text is on top of the banner :( Help!

Monkey Bizzle
10-14-2005, 07:12 PM
The purpose of a CSS layout is so you don't have to use tables... Try taking out the tables and adjusting the values of the CSS. I "think" the reason it's not working in both browsers is because each browser measures padding and positioning differently... if you absolutely position something inside a table, in IE, it will do it from the edge of the table, but in firefox, it still absolutely positions from the top of the page, for example.

putnamehere
10-14-2005, 07:18 PM
oh dam, if i take out the tables my site will be all over the place, i may jsut recode a lay useing lots and lots of tables but i was hopeing this would save lots of time.

Monkey Bizzle
10-14-2005, 07:53 PM
oh dam,...

didn't you just appologize for your language in another post?

if you take out the tables, you will have to readjust the values in your CSS and then you can fix it.

putnamehere
10-14-2005, 10:49 PM
Dont understadn what you mean by 'readjust' thers lots of thign that can be readjusted. My language? if you find the word 'dam' offending then i'm sorry but to me that word is far from offending.

putnamehere
10-15-2005, 11:55 AM
!! Fixed! i manged to fix it and am very happy
the reson for not workign was:
top: 15px;
margin-left: 30px;
right: 330px;
see how margin- isent in front of top? well ie understand it without margin- but firefox needs that.

Monkey Bizzle
10-16-2005, 10:50 PM
My language? if you find the word 'dam' offending then i'm sorry but to me that word is far from offending.

I am not offended by it... I just thought it was funny that a mod editted your post because cursing is not allowed on this forum no matter how small, you appologized for it, so you obviously know it is not allowed, and then did it again...

Glad you fixed your problem.