PDA

View Full Version : overlapping border-bottom on h1 post titles



aliceinwonderla
Sep 21st, 2010, 06:17 PM
http://www.seaofghosts.com/

For some reason in .post elements, my h1 border-bottom is "overlapping". This is not happening in any other instance of h1. The overlap spans as long as the post title.

Anyone know what's going on here?


http://www.seaofghosts.com/2010/09/the-end/

Also, all my sidebar font seems to load smaller than normal on the single-post pages. I looked for an unclosed /small tag but I can't find it. Probably not CSS related but it's likely to be something simple I've overlooked and you guys are very smart cookies!!

SB65
Sep 21st, 2010, 06:35 PM
You have:


h1, h1 a:link, h1 a:visited {
border-bottom:1px solid #333333;
font-size:12px;
font-weight:normal;
letter-spacing:0;
line-height:1em;
margin-bottom:10px;
padding-bottom:5px;
text-decoration:none;
text-indent:0;
text-transform:uppercase;
}

Which is giving a bottom border to both the h1 and to the link within it - so you're getting two borders. Make your css more specific to remove the border on one of these elements.

On the second page you link to, your list items are wrapped in <small> tags. Either remove these or you could set the font-size specifically for this tag:


small{font-size;11px}

aliceinwonderla
Sep 21st, 2010, 06:45 PM
Hi,
Thank you for this, once I separated the h1 and h1 a CSS this fixed immediately.

As for the small list items... I did not intentionally wrap the list items in small tags. The sidebar uses the same CSS as every other page but this only seems to happen on a single post. I am not sure setting the font size or changing it will help in this instance as the small tags I have used on that page are intentional for other elements (not list items).

SB65
Sep 21st, 2010, 07:03 PM
Is the sidebar for the single post page using the same html as the sidebar on the main page - it looks like it isn't.

If you can't sort the html you could probably force it via css, using something specific like:


#sidebar li small{font-size:11px}

aliceinwonderla
Sep 22nd, 2010, 02:32 AM
Both main page and single post pages use the same php code to call the sidebar.php
<?php get_sidebar(); ?> so there's no reason one should be "small" and one shouldn't. The #sidebar li code isn't working... the smallness is effecting all fonts anyway, not just list items. the #sidebar{ code is already set to 11px.

SB65
Sep 22nd, 2010, 09:19 AM
#sidebar small{font-size:11px}

should sort it. Even though the font size is set for #sidebar, without the statement above the font will still be small.

aliceinwonderla
Sep 22nd, 2010, 09:38 AM
Yes that did work thank you!!