Problem with the code?

CSS newbie needs help

[ajs83]

I'm just learning CSS and the .top section works, but I can't get the body tags to work. Do I have this part setup correct?

<style>
body
{
background-image: url('images/bg.gif');
background-repeat: repeat-y;
background-color: #E0E0E0;
}
.top
{
position:absolute;
left:109;
}
</style>

[tedster]

In a css file, you don't need quotes (neither single or double) around the path you put inside url() - so try:

<style>
body
{
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-color: #E0E0E0;
}
.top
{
position:absolute;
left:109;
}
</style>

[ajs83]

That didn't work either, but I changed it around a bit and added a class inside the body tag and it now works. The only problem is it only does for IE, not Mozilla. Do I have any IE specific code in here that causes it to choke?

<style>
body
{
background-color: grey}
}
.topping
{
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-color: #E0E0E0;
}
.top
{
position:absolute;
left:109;
}
}
</style>

[D_Blackwell]

You've got a couple of extra braces in there. Take them out and you're good to go. It's the first extra one that is breaking it.

[tedster]

Wow, you should not need to use a class on the body tag to get a few simple background rules to work. Something else must be going on. Have you validated your html and csss?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[ajs83]

It's somewhat complicated as I have one table inside of another as part of the design, but I have trimmed it and it is working with the code below on IE and Firefox.

.topping
{
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-color: #E0E0E0;
}
.top
{
position:absolute;
left:109;
}

[dcrombie]

You're missing the 'units':

.topping {  
 background: #E0E0E0 url(images/bg.gif) repeat-y;  
}  
.top {  
 position: absolute;  
 left: 109px;  
}

;)