help with sliding doors - basic question - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

help with sliding doors - basic question

css background image

jpolsonb

5:55 am on May 14, 2009 (gmt 0)

10+ Year Member

This code is straight from #*$!.com but I cant get it to work no matter what I try.

Code is fully validated and file paths for the images are 100% valid.

The background colour and any changes I make to the css are displayed except for the background images. Tested in multiple browsers.

I know this is basic and its embarassing, please help!

css---------------------------------------------------------

#header {
float:left;
width:100%;
line-height:normal;
font-size: 90%;
background:Yellow;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
background:url("graphics\gif\norm_right.gif")
no-repeat right top;
padding:0;
margin:0;
}
#header a {
display:block;
background:url("graphics\gif\norm_left.gif")
no-repeat left top;
padding:5px 15px ;
}

xhtml------------------------------------------------------

<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">WorkHistory</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">References</a></li>
</ul>
</div>

------------------------------------------------------------

Thankyou, Jamie.

swa66

7:35 am on May 14, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

url("graphics\gif\norm_right.gif")

Try to use normal slashes "/" not backslashes "\". The latter is common for DOS and windows only.

Also that path needs to be relative to where your css is stored.

So if you store your css in e.g. a css sbdirectory off of your document root, it need to get back to the root directory (with a ../ or a / in front of the path.

jpolsonb

4:43 am on May 15, 2009 (gmt 0)

10+ Year Member

thanks for the reply. It was helpful.

jpolsonb

3:34 am on May 18, 2009 (gmt 0)

10+ Year Member

I Still cannot get this to work properly. Even when I cut and paste the code from #*$! this:

---does not work as indicated in the example.---------------

#header a {
display:block
background:url("graphics/gif/norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

------------------------------------------------------------

Smaller left image does not display because right image appears to stretch over it.

Here is the full code:

CSS---------------------------------------------------------

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

#header ul {
margin:0;
padding:0;
list-style:none;
}

#header li {
float:left;
/*this is the larger image 300px wide*/
background:url("graphics/gif/norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

#header a {
display:block
/*this is the smaller image 16px wide*/
background:url("graphics/gif/norm_left.gif")
no-repeat left top;
padding:5px 15px;

}

xhtml------------------------------------------------------

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
-----------------------------------------------------------

What am I doing wrong? Please help! Thankyou.

jpolsonb

10:30 am on May 18, 2009 (gmt 0)

10+ Year Member

Problem solved, missing a colon after changing the display attribute to block. I have now invested in an authoring program to prevent this happening again.