Another CSS problem

They have: 42 posts

Joined: Dec 2002

I am trying to make all of my text on a page sans-serif, It works fine when I assign sans-serif only to "p" but if I try to assign it to "p,table" "p,tr" or "p,td" it works but offsets all of my tables about 2 pixels. Here is what I have for a style sheet right now which works fine only none of the text within a table is sans-serif.

body
{
background: #E7E7E7
url("bg_image.jpg")
no-repeat
top right;
padding-left:4%;
}

img.coin_postion
{
position:absolute;
top:5px;
right:22%;
}

td.content
{
padding-left:6px;
padding-right:6px;
padding-bottom:6px;
}

p
{
color:#000000;
font-family:sans-serif;
}

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

<style type="text/css">
body {
     background: #E7E7E7 url("bg_image.jpg") no-repeat top right;
     padding-left:4%;
     font-family: sans-serif;
}

body, table, p, td, tr {
     font-family: sans-serif;
     }

</style>
'

I don't see how that could add any sort of positioning?

They have: 42 posts

Joined: Dec 2002

as soon as I add the font-family: sans-serif; to the body part (1st one) it messes all the tables up the same way (offset 2 pixels or so)

here is the problem http://www.chumpchange.org/main/

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

if you look carefully, you'll see that the declaration for body background shouldn't be on multiple lines? Also, underscores are illegal characters.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Change:

body
{
background: #E7E7E7
url("bg_image.jpg")
no-repeat
top right;
padding-left:4%;
}

to:

body
{
background: #E7E7E7 url("bg_image.jpg") no-repeat top right;
padding-left:4%;
font-family: sans serif;
}

It should work... Laughing out loud

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Renegade, you make my jaw hurt sometimes.

They have: 42 posts

Joined: Dec 2002

Thank you so much renegade. I think the biggest problem was the sans-serif should have been sans serif (no hyphen). It works flawless now.

They have: 42 posts

Joined: Dec 2002

Ahhh it worked on netscape (the newest one) and on IE 5.0 but it wont work on IE 6.0 (same unalignment prob).

So I tried to some stuff and now I can't get the text to be sans serif. I am going crazy here, I cannot see why it wont go to sans serif. go to http://www.chumpchange.org/main/ to view the problem

body {
font-family : sans serif;
background: #E7E7E7 url("bg_image.jpg") no-repeat top right;
padding-left:4%;
}

img.coin_postion {
position : absolute;
top : 5px;
right : 22%;
}

td.content {
padding-left : 6px;
padding-right : 6px;
padding-bottom : 6px;
}

td.links {
padding-left : 6px;
padding-right : 6px;
padding-top : 2px;
padding-bottom : 1px;
}

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

1. it should be sans-serif, WITH THE HYPHEN
2. NO UNDERSCORES IN THE CLASS NAMES!!!!

They have: 42 posts

Joined: Dec 2002

Ok I fixed the 2 mentioned things and still no luck.

http://www.chumpchange.org/main/

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

font-family: sans-serif;

Okay, I'm looking at it, and other than the size of the text changing when it goes to sans-serif, there is no other shift on the page.

The reason things aren't working is because you're trying to use a non-breaking space to keep the cells open and the space is larger than the 3px limit you're setting.

THAT has NOTHING to do with it being sans-serif, in the body, et cetera, but everything to do with font size, since you're not using CSS, but using spaces and cells instead and the size of the space is dependent on the size of the font.

They have: 42 posts

Joined: Dec 2002

Ok it seems to work for me now. I just put some empty paragraph tags to replace the non-breaking space. Would you recommend putting in a 3 pixel wide transparent image instead of the empty ?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

No, I'd recommend using CSS to set the borders, but if using the , it's a better solution than a transparent pixel image.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.