Having some problems with CSS, as i haven't done it in ages, im a bit itchy on it atm and wondering why this little misshap is happening.

 

The background for the main content isnt showing up. but if i take the recent div out it will shop, is it because i have my two divs in my content div floating left or is there another reason?

 

Live view is below

 

Live view here

HTML

<div id="content">
		<div id="maincontent">
			<h1>Header One</h1>
			<p>Testing Content</p>
		</div>
		<div id="recent">
			<h1>Recent</h1>
			<p>Testing Recent</p>
		</div>
	</div><!--End of content div-->

CSS

#content {
margin:0px;
background:url(../images/contentbg.png) repeat;
}
#maincontent{
margin:0;
padding:5px;
width:800px;
float:left;
}
#recent{
margin:0;
width:150px;
float:left;
}

 

I am using FF3 latest version for testing, ive tried in other browsers i have and seems to be the same, any ideas and what do you get when viewing the live version. Please tell me what OS and browser you use thanks

 

Ben

it could be cos of the padding, try it without it

 

i use nearly the exact code on my website and works fine

Just taken the padding out and it hasn't changed the background to appear, any more ideas i can try out?

 

Many thanks ben

Having some problems with CSS, as i haven't done it in ages, im a bit itchy on it atm and wondering why this little misshap is happening.

 

The background for the main content isnt showing up. but if i take the recent div out it will shop, is it because i have my two divs in my content div floating left or is there another reason?

 

Live view is below

 

Live view here

HTML

<div id="content">
		<div id="maincontent">
			<h1>Header One</h1>
			<p>Testing Content</p>
		</div>
		<div id="recent">
			<h1>Recent</h1>
			<p>Testing Recent</p>
		</div>
	</div><!--End of content div-->

CSS

#content {
margin:0px;
background:url(../images/contentbg.png) repeat;
}
#maincontent{
margin:0;
padding:5px;
width:800px;
float:left;
}
#recent{
margin:0;
width:150px;
float:left;
}

 

I am using FF3 latest version for testing, ive tried in other browsers i have and seems to be the same, any ideas and what do you get when viewing the live version. Please tell me what OS and browser you use thanks

 

Ben

 

 

i think that all you need to do is remove the ../ from in front of the image URL in the css...

 

let me know if it works..

What browser are you viewing it in?

 

(also remove the ../ like Comfy said)

Using FireFox(latest version)

 

And i took the "../" out and it still isn't showing up, but for the rest of my css having that in front works.

 

 

Any more ideas?

 

Ben

this may seem obvious but have you uploaded contentbg.png? cos when I typed it in to the address bar it doesn't show anything.

yeah it is uploaded, if you go back to the url of the image and start from the right and actualy try to highlight it you will see a blue line, reason you cant see the images cause it is a very pale cream almost white. and is 1px in height.

 

Ben

According to firebug.. the image doesnt exsist...try deleting it and setting the bacground colour to something of a similar colour.

i replaced the image line with the hex code for it and it still isn't displaying, i checked in firebug and when i hovered over my two divs inside the content box they got highlighted but when i hoved over content nothing got highlighted, i think i might have a height problem with it?

 

Ben