Couple of strange formating issues - border and background

[littleredplanet]

Hello,
I am working on a site that has wordpress linked to news and updates area. I built a css based wordpress theme to match that of the main site. All worked pretty well except for two bugs that I can not track down.

1. In the left hand column menus, the css links box changes from sand color to orange upon hover. I have added a border at the bottom of each link box. For some reason this boarder does not follow the entire length of the link box. It stops short (about a space short). I've poured over the style.css doc and can not find the reason for this behavior.

2. In the upper right hand corner of the page, just beneath the title, is a small graphic - about 8 pixels long. This is actually an off-set (off-set to the right) of my background image. Again, I'm baffled why this little background image has jumped or appeared in such a manner.

Any assistance or comments would be greatly appreciated.

cheers
dale

[edited by: SuzyUK at 4:54 pm (utc) on Feb. 19, 2008]
[edit reason] Please No example URI's, or signatures [/edit]

[Stomme_poes]

Hiya,
First, you have a few small CSS errors you should correct. They are not the cause of your problem but it's good to get rid of them... google CSS validator and click the one with "jigsaw" in the name. That's the W3C one.

Second, I think it's this:

#sidebarleft ul li
{
padding-left: 0;
margin-left: 0px;
margin-right: 8px;<----right here
padding-bottom: 0px;
list-style-type:none;
border-bottom: 1px solid #5e433a;
}

Instead of margin-right, try padding-right, cause I assume you're doing it to keep text away from the edge?
Or I'm completely wrong : ) But that's what I'm thinking, since that margin can't stick out since the ul has a set width.

Thirdly, I don't see any little graphic, unless you mean the magnifying glass next to search?

Lastly, the mods will probably remove your links because this forums is weird that way. Me being a visual person and most people not being very good at explaining their problems, I like looking at the site myself (instead of copying the code, then putting it on my server just so I can look at it in IE). However, for a variety of reasons (generally good ones) they would rather that you post the relevant code (HTML and CSS) and take out anything in the code that would let everyone know who you were.

So really fast, post your HTML and CSS for left sidebar, and maybe the whole header for the graphic issue.

Cheers

[edited by: Stomme_poes at 4:11 pm (utc) on Feb. 19, 2008]

[SuzyUK]

Hi littleredplanet and Welcome to WebmasterWorld!

yes sorry we don't allow URI's here at WebmasterWorld, see this thread [webmasterworld.com] for more details ;)

because Stomme_poes has already given some good advice about the validator, I'll try to help by posting the code for the first bit, (only have the time because it's a holiday here today ;)). Then as is recommended in the above thread, you should try and get things like menus to work in a separate page before incorporating them into a template. So all I've done is copy the HTML code for your left sidebar and then copy the CSS for the left sidebar from your stylesheet and though I've deleted excess code and specifics a paste into a blank page shows what you are describing (part 1).

CSS:
#leftnav {width: 300px;}

#sidebarleft ul {list-type:none;}

#sidebarleft li {
background: #fff;
padding-bottom: 8px;
}

#sidebarleft ul li
{
padding-left: 0;
margin-left: 0px;
margin-right: 8px;
padding-bottom: 0px;
list-style-type:none;
border-bottom: 1px solid #5e433a;
}

#sidebarleft ul li li
{
padding-left: 0;
margin-left: 8px;
margin-right: 3px;
padding: 2px 0;
list-style-type:circle;
}

#sidebarleft a:link {
display:block;
padding:2px 2px 2px 0.5em;
background-color:#e5dbb7;
color:#5e433a;
text-decoration:none;
width:100%;
}

#sidebarleft a:hover {
background-color:#cc412e;
color:#e5dbb7;
}

#sidebarleft a:visited {
display:block;
font-weight:bold;
padding:2px 2px 2px 0.5em;
background-color:#e5dbb7;
color:#5e433a;
text-decoration:none;
width:100%;
}

#sidebarleft a:visited:hover {
background-color:#cc412e;
color:#e5dbb7;
}

#sidebarleft h2 {
font-family: Arial, sans-serif;
color: #e5dbb7;
padding: 0px 8px 0px 8px;
margin-top:0px;
background:#5e433a;
/*border-bottom:1px solid #E8CFA9;*/
}

HTML:
<div id="leftnav">
<ul id="sidebarleft">
<li><h2>Pages</h2>
<ul>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">forum</a></li>
</ul>
</li>
<li><h2>Categories</h2>
<ul>
<li><a href="#" title="#">from the president</a></li>
<li><a href="#" title="#">news</a></li>
</ul>
</li>
</ul>
</div>

perhaps you could isolate the 2nd problem and post abridged code for that..

ref Q No.1 - the bottom border on your menu is on the <li> elements, and then your links are 100% wide and also have padding which makes them wider than 100%! - width + padding + borders = actual width per Box Model rules, so the <a> is wider than and overflowing the <li>. (all highlighted in red in the code for you)

If you remove the width off the <a> it will fit inside the <li> properly because of display: block; then if there is a hasLayout reason for that width declaration, try height: 0.1% instead or zoom: 1; neither of which should affect the dimension

-HTH for now
Suzy

[littleredplanet]

Hey Guys,
Thanks for the very helpful feedback! It worked like a treat for problem number one!

OK, for the second problem. Perhaps I didn't explain it well AND I didn't give you the relevant code. The problem is a a very small (1x980 px)image that appears off-set to the repeating background image. I have used the image to generate a drop shadow on either side of the content area (container.png). If you look at the site, the naughty image is sitting just under the site name.

The CSS for this area is:

*
{
margin: 0px;
padding: 0px;
}

ul
{
list-style: none;
}

body
{
font-size: 10px;
margin: 0px;
text-align: center;
color: #333;
font-family: Arial, Helvetica, sans-serif;
background: #e5dbb7;
}

#wrap
{
width:990px;
margin: 5px auto;
background: url(img/container.png) repeat-y;
/*background: none;*/
padding: 5px 0;
}

/***************************************************
*********************** Blogtitle **************
*****************************************************/

#blogtitle
{
width: 980px;
display: block;
color: #fff;
text-align: left;
margin: 0 auto 10px auto;
padding: 5px 0 0 0;
text-align: left;

}

h1.blogtitle
{
margin: 10px 6px 0 5px;
font-size: 26px;
}

#blogtitle a:link {
color: #cb432d;
text-decoration: none;
border: none;
}

#blogtitle a:visited {
color: #cb432d;
text-decoration: none;
border: none;
font-weight: bold;
padding: 2px 15px;
}

#blogtitle a:hover {
color: #cb432d;
text-decoration: none;
padding: 6px 15px;
margin-left: 0;
}

.description
{
color: #5e433a;
text-align: left;
font-size: 18px;
margin-left: 10px;
}

Again, thanks for your friendly assistance.

cheers
dale