Category listing not alligned

[Congerman]

Hi, I have used the forum and found the code for my stylesheet to adjust the catagory listing. I needed to move them all in by 40 px so on the margin line i entered 40px. All the category descriptions moved in as required apart from the first one. any ideas?
A.category-top {
color: #0C147E !important;
width: 80%;
font-size: 1.1em;
margin: 0px 5px 0px 40px

www.forestjoinery.co.uk/shop


Only just started on this one so appologies that it not looking good yet

[niccol]

Looks fine in Firefox ????

[Congerman]

Hmmmm ok got firefox and ie8 now but ie7 still screws it up any ideas as there are so many ie7 users still out there

[niccol]

yes weird one.

Here's a guess.
The widths are causing a problem. 80% plus 40px may be more than the containing width.

What I would do next ( as I say I am on my laptop so don't have full access to IE) is add the following to the bottom of the stylesheet and see what it does:

#categoriesContent{border:1px solid red;position:relative;}
a.category-top{border:1px solid purple;width:130px;}

It adds some borders in so we can see more easily, reduces the width of the <a> and makes the containing element position relative just to be on the safe side.

Leave it up like this if it doesn't have a good effect so I can see the results in IE.

[Congerman]

Thanks for your time so far. Have put that code in style sheet to be viewed.

[niccol]

Well, I think that is truly bizarre, but nothing surprises me about internet explorer.

How about this as a work around. Remove the left margin from .category-top. Then add a left margin to #categoriesContent.

Works in firefox but you will have to add it in to see if it works in IE.

[Congerman]

That appears to of worked, many thanks for your time and imput.
Could I ask you one more little thing, There is a line under the category listings that was there when the all products button was active. I selected not to show all products button in admin but the seperator line remained. Where do i turn the line off or delete it.

[niccol]

Well you could take it out of the php file that creates the category sidebox but again the quick and easy css fix is:

hr#catBoxDivider{display:none;}

[niccol]

Yes that seems to work in IE back as far as IE6 which is good news. Take out the coloured borders if you want - unless you like the look

[Congerman]

Thank you Thank you, think I really should buy the book all about Zen

I know I taken a lot of your time but, last one I promise, can I use the same css code that I used for the catagory layout to make the delivery, privacy, contact etc look the same. The code is
A.category-top {
color: #0C147E !important;
width: 80%;
font-size: 1.1em;
/*margin: 0px 5px 0px 0px !important;*/
/*background-color: #ddd !important;*/
padding: 7px 0px 7px 0px;
/*border: 1px solid #fff;*/
background: url(http://www.forestjoinery.co.uk/images/sideboxbg.gif) no-repeat right;
background-position:right;
display: block; text-decoration: none;
}
A.category-top:hover {
background: url(http://www.forestjoinery.co.uk/shop/..._top_hover.gif) no-repeat right !important;
color:#8A4A26 !important;
/*border: 1px outset #f00;*/
}

I am hoping i just have to change the A category top bit to something else.