I'm trying to learn CSS and I would like to know what I'm doing wrong on the following, I can't see the the gradient background at all. I'm including the file on the index.html. I can see the logo but, nothing after that. What's wrong?
background-color: #016ba5 ;
background: #fff url( '../images/owsfacturas.png' ) 0px no-repeat;
background: #016ba5 url( '../images/headgradient.jpg' ) 0px no-repeat;
Unless you specified a width on #container, width: 100% on #header means nothing. You do not need to declare display: block on natively block level elements (e.g. div, h#, p, etc). Why would you have a header that is display: inline containing block level elements? This makes no sense.
Now, on to your question - the path to the background file needs to be relative to your css file directory, not to your HTML file. That's a common mistake that people make, could that be your problem? I think you might need to put something in your div's, like rather than leave them empty.
Last edited by aj_nsc; 08-19-2010 at 12:36 PM.
Thanks for your quick reply.
removed the display: block and inline and still can't solve it. the files are relative to the css file. I can see the logo ok but, nothing else.
Can you see any styling of your #headgradient div? If you put a border on it, can you see the border? What about the default background color?
EDIT: Wait wait....if this is most like CSS background gradients, you probably made a 1px wide image and plan on tiling it horizontally......is that the case? If it is, the no-repeat rule might be tripping you up.
The image is actually 100x100. After putting a border I noticed the image is actually under the logo when viewed using Chrome. Now, when using IE is right next to the logo. What's wrong in Chrome??
Also, If I put this: background-position: 363px 0; in the #headgradient I get exactly what I want but, only in Chrome, on IE it gets messed up.
Do you perhaps not have an appropriate DTD at the top of your file?
add clear: left; to #headgradient to get it to drop in IE - stupid IE.
If you're image is 100px x 100px then adding background-position: 363px 0; makes no sense. That would offset the background image in the div 363px to the right, at which point, with a no-repeat rule, there would be no image.
If you're fairly new to CSS, you might want to take a look at some of the w3cschools css tutorials -> http://www.w3schools.com/css/default.asp
I've read that. That's where I'm getting help from.
the clear: left; just didn't work and added a the #headgradient on the next line. What would be the appropriate DTD for a simple html, css, js, php file?
I added margin-left: 360px; to #headgradient and that helped...
This is what's on my file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
I use pspad.
Thats doctype is fine enough to use. <!doctype html> is the doctype for HTML5 and is backwards compatible, which is why I am starting to use it - just to get into the habit of it although you really won't be able to use HTML5 features across all browsers in production sites for quite some time.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)