CSS Margins In Wordpress Code Will Not Change CSS forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 72.44.48.122
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Pubcon Website

Home / Forums Index / Code, Content, and Presentation / CSS

Forum Library : Charter : Moderator: open
CSS Forum

CSS Margins In Wordpress Code Will Not Change
I've set all margins to "0" and still won't change!

Preeminent

msg:3735598

9:10 pm on Aug 31, 2008 (gmt 0)

Hi All,
I've been trying to set my margins/paddings in the sidebar of my wordpress blog and I cannot get it to change at all. Right now there is too much space underneath the <h2> titles. (For example: One of the first titles I have in the sidebar is "PAGES" and underneath that lists the individual pages of the blog. There is a big gap underneath the title "PAGES" and I cannot get rid of it.) Can anyone see what would help? I will first paste the actual sidebar php file and then the sidebar css. Thanks in advance!

<div id='menu-left'>
<?php if ( !function_exists('dynamic_sidebar')
ŚŚ !dynamic_sidebar() ) : ?>
<ul>
<?php wp_list_pages('title_li=<h2>Main Menu</h2>'); ?>
</ul>
<h2><?php _e('Categories'); ?></h2>
<ul>
<li id="categories">
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="archives"><h2><?php _e('Archives'); ?></h2>

</ul>

<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="" title="Valid CSS">Valid CSS</a></li>
<li><a href=""><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">wordpress</abbr></a></li>
<?php wp_meta(); ?>
</ul>
</li>

</div></li>
</ul><?php endif; ?>
</div>

---------------------------------------------------
/*
* Left sidebar
*/
#menu-left {
float: left;
padding: 70px 12px 20px 12px;
width: 247px;
font-size: 11px;
overflow:hidden;
margin-top: -70px;
}

#menu-left h2 {
font-size: 12px;
margin: 0px 0 0px 0px;
padding: 0px 0 0px 0px;
font-weight: bold;
color: #feba47;
background: url("images/menu-left-title-background.jpg");
border-top: 1px solid #2e1901;
border-bottom: 1px solid #2e1901;
}

#menu-left a,
#menu-left a:visited {
text-decoration: none;
font-weight: bold;
color: #2e1901;
line-height: 15px;
}

#menu-left a:hover,
#menu-left a:visited:hover {
color: #2e1901;
text-decoration: underline;
}

#menu-left ul ul { padding-bottom: 0px;
margin-left: 15px;
}

#menu-left ul ul li {
list-style-type: circle;
color: #2e1901;
}

Xapti

msg:3736492 1:36 pm on Sep 2, 2008 (gmt 0)

Make sure you check line-height if it's something like a header, as well as padding (specifically on other elements too).

csuguy

msg:3736609 4:44 pm on Sep 2, 2008 (gmt 0)

If the line-height doesn't work for some reason - you can wrap all of the other relevant html in a div - and use relative positioning to move it up a bit.

Preeminent

msg:3737026 4:45 am on Sep 3, 2008 (gmt 0)

Well, I appreciate the replies guys. I just don't get it though. Pretty much all padding in the whole blog has been set to "0" and nothing changes. There were only a few elements with a set line-height and when I changed it, nothing really happens. I'm going to try and figure out where I should add additional divs like you say csuguy.

Just in case someone drops by and wants to see. Here is the whole css file, not just the sidebar.

/*
* Default HTML tags
*/
a {
color: #fe9a00;
}

a:visited {
color: #fe9a00;
text-decoration: underline;
}

a:hover {
color: #fe9a00;
}

acronym, abbr {
cursor: help;
}

blockquote {
margin-left: 15px;
padding-left: 10px;
}

body {
background: url("images/background.jpg");
color: #9c6830;
font-size: 62.5%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 auto;
padding: 0;
text-align: center;

}

cite {
font-size: 90%;
font-style: normal;
}

h2 {
font-size: 13px;
margin: 0px 0 0px 0px;
padding: 0px 0 0px 0px;
font-weight: bold;
color: #f8e7bc;
background: #603200;
}

h2 a,
h2 a:visited,
h2 a:hover,
h2 a:visited:hover {
text-decoration: none;
color: #f8e7bc;
}
h3 {
font-size: 120%;
margin-top: 0;
}

img {
padding: 3px;
border: none;
}

img.alignleft {
float: left;
margin: 3px 3px 1px 0;
}

img.alignright {
float: right;
margin: 0 3px 1px 3px;
}

.post img {
padding: 3px;
border: 1px solid #603200;
background: #603200;
}

li {
margin: 0;
padding: 0;
list-style-type: none;
}

ol#comments li p {
font-size: 100%;
}

ul {
margin: 0;
padding: 0;
}

/*
* Classes
*/

/* The credits at the bottom of the site */
#credit {
color: #b88248;
font-size: 11px;
width: 900px;
text-align: center;
margin: 0 auto;
padding: 0px;
clear: both;
height: 0px;

}

#credit a,
#credit a:hover,
#credit a:visited,
#credit a:visited:hover {
color: #b88248;
}

/* Link to the comments */
.feedback {
color: #fe9a00;
text-align: right;
padding-bottom: 15px;
clear: both;
text-transform: lowercase;
}

.feedback a,
.feedback a:visited {
text-decoration: none;
color: #fe9a00;
}

.feedback a:hover,
.feedback a:visited:hover {
text-decoration: underline;
color: #fe9a00;
}

/* The post informations */

.meta li,
ul.post-meta li {
display: inline;
}

.meta ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

.meta a {
color: #fe9a00;
text-transform: lowercase;
text-decoration: underline;
}

.meta {
color: #9c6830;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0;
}

.storycontent {
font-size: 115%;
}

/* Comment form design */
#commentform #author,
#commentform #email,
#commentform #url,
#commentform textarea {
background: #faf3eb;
border: 1px solid #603200;
color: #2e1901;
}

#commentform textarea {
width: 95%;
}

#commentlist li ul {
font-size: 110%;
}

ol#commentlist li {
list-style: decimal;
}
#content {
float: left;
width: 580px;
background: #2e1901;
margin: 30px 8px 0px 8px;
text-align: left;
padding: 10px;
border: 1px solid #603200;
line-height: 14px;
}

#content ol li {
list-style: decimal;
}

#content ul {
margin-top: 10px;
margin-left: 35px;
}

#content ul li {
list-style-image: none;
}

#content-big {
float: left;
width: 580px;
background: #2e1901;
margin: 0px 8px 0px 8px;
text-align: left;
padding: 10px;
border: 1px solid #603200;
line-height: 14px;
}

#header {
font-size: 26px;
font-weight: bold;
text-decoration:none;
font-family: Verdana;
margin: 0 auto;
height: 288px;
width: 900px;
padding: 0;
background: url("images/wordpressheader.jpg");
}

.header-title {
font-family: Tahoma, Verdana, Arial;
color:#f8e7bc;
font-size:28px;
font-weight:bold;
padding:30px 0 0 448px;
text-align:left;
}
.header-title a{
color:#f8e7bc;
text-decoration:none;
border-bottom:none;
}
.header-title a:hover{
color:#f8e7bc;
text-decoration:none;
border-bottom:none;
}
.header-description {
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#fe9a00;
font-size:11px;
padding:0px 0 0 449px;
text-align:left;
font-weight:normal;
}

.rss {
float: left;
width: 243px;
height: 96px;
margin: 98px 0 0 10px;
}

#footer {
width: 900px;
height: 38px;
margin: 0 auto;
color: #b88248;
}
#footer p {
text-align: left;
padding-left: 285px;
color: #b88248;
}
#footer a {
color: #b88248;
text-decoration: none;
}
#footer a:hover {
color: #b88248;
text-decoration: none;
}
#footer a:visited {
color: #b88248;
text-decoration: none;
}
#footer a:visited:hover {
color: #b88248;
text-decoration: none;
}

/*
* Left sidebar
*/
#menu-left {
float: left;
padding: 70px 12px 20px 12px;
width: 247px;
font-size: 12px;
overflow:hidden;
margin-top: -70px;
}

#menu-left h2 {
font-size: 15px;
margin: 0px 0 0px 0px;
padding: 0px 0 0px 0px;
font-weight: bold;
color: #feba47;
background: url("images/menu-left-title-background.jpg");
border-top: 1px solid #2e1901;
border-bottom: 1px solid #2e1901;
}

#menu-left a,
#menu-left a:visited {
text-decoration: none;
font-weight: bold;
color: #2e1901;
line-height: 5px;
}

#menu-left a:hover,
#menu-left a:visited:hover {
color: #2e1901;
text-decoration: underline;
}

#menu-left ul ul { padding-bottom: 0px;
margin-left: 15px;
}

#menu-left ul ul li {
list-style-type: circle;
color: #2e1901;
}

.ad200 {
text-align: center;
margin-bottom: 0px;
}
/* End of left sidebar */

input#s {
width: 158px;
border: 1px solid #c2f49d;
color: #444;
}

#rap {
width: 900px;
margin: 0 auto;
background: url("images/rap-background.jpg") repeat-y;
text-align: left;
}

#searchbutton {
margin-top: 2px;
}

Marcia

msg:3737034 5:08 am on Sep 3, 2008 (gmt 0)

I'm a bit confused on the specific styles here. This seems to be the style for the h2

But this h2 within the function

<ul>
<?php wp_list_pages('title_li=<h2>Main Menu</h2>'); ?>
</ul>

Isn't that particular <h2> a list item - <li> - inside a <ul>, according to that?

Would
#menu-left h2
be the same as
#menu-left ul h2 or
#menu-left li h2 ?

Preeminent

msg:3737826 11:37 pm on Sep 3, 2008 (gmt 0)

haha wow, yeah now that you put a spotlight on that, I'm confused on those elements. Even the padding on the #menu-left ul ul is set to "0".
I might just have to scrap this whole template and go with another.

SuzyUK

msg:3738087 9:23 am on Sep 4, 2008 (gmt 0)

you know preeminent, all you (and any other [insert fav CMS here] theme user) have to do is..

view the generated HTML source of the page.. don't give us the WP/PHP code it's not helpful we don't know what your particular template produces - CSS only styles HTML and if we can't see the full structure it's all guess work ;)

copy the HTML code for the whole left column (from the view source option) into a separate page text/wysiwyg editor copy all that CSS you just posted into the same page then remove the css rules that don't apply (keep checking your page if you can't sight read it) then post us a sample of the code showing the gap (both HTML and CSS)

@marcia

Isn't that particular <h2> a list item - <li> - inside a <ul>, according to that?

it wouldn't matter, it's that specificity thing again and the little touted fact that the actual element selector, in this case the H2 also overrules a more specific selector that doesn't include the target element

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#menu-left h2 {color: #f00;}
body #menu-left ul li {color: #00f;}
#menu-left h2, #menu-left ul {margin: 0;}
</style>
</head>
<body>
<div id="menu-left">
<ul>
<li><h2>the h2 title</h2>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

the above h2 is told to be red.. using the #menu-left h2 selector; the second selector *is* more specific to the actual list item according to the specificity calculation [webmasterworld.com] method - but it fails to actually explicitly target the h2 so the first rule still wins in this case.. this specificity stuff is fun isn't it

@preeminent, I also put which margins need to zero in that code sample.. and because I can apply your CSS to my sample and get no gap too.. there must be something else in your HTML

Preeminent

msg:3739551 5:05 am on Sep 6, 2008 (gmt 0)

Suzy, I'm sorry. Yes, I'm an idiot! Feel free to delete my last post if that is possible. Well I did the code view and here is what I'm working with.

<div id='menu-left'>

<h3>Pages</h3>
<ul>

<li class="page_item page-item-2"><a href="" title="About P-Squared">About P-Squared</a></li>

</ul>

<h3>Hankerin'</h3>
<ul class='xoxo blogroll'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

<h3>Recent Posts</h3><ul>

<h3>Archives</h3><ul>
<li></li>
</ul>

<h3>Search Posts</h3>

<ul>

</li>
</ul>

<h3>Meta</h3><ul>
<li><a href"">Log in</a></li>
<li><a href="" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>

lexipixel

msg:3739590 7:01 am on Sep 6, 2008 (gmt 0)

Then its an <H3> tag inside the <div id='menu-left'>.

Here's a test -- cut and paste the following at the very end of styles.css

/* START: test if the word "pages" is red in left menu */
#menu-left h3 {
color: red;
}
/* END: test */

The PITA thing with WP is when you use widgets, the code comes from them -- (your side bar appears to be "widgetized", so you get the dynamic_sidebar code which you can't see in the theme editor.

A few helpful WP CSS tips:

1. Always do a view source on the HTML rendered in a browser, (don't count on what you typed into the Visual Editor,the HTML editor or the Theme Editor), WP's engine rewrites stuff on the way out.

2. Always clear the cache to make sure your seeing the latest CSS file(s).

3. If possible, test CSS by changing the element with something obvious, (like coloring text red that is usually black), this is much easier to spot than margins, padding, etc.. which can be more browser dependent. Once you know you've nailed the selector, you can tweak the CSS properties.

4. Wear a tinfoil hat that is duct-taped to your head, (the only reason for this tip, is it will be harder to resist the urge to rip your hair out since it's all covered in tinfoil).

NOTE: in the case of the word "Pages"... are you sure it isn't the <UL> below it causing the space -- and maybe its not coming from the bottom of the <H3> at all?

Preeminent

msg:3739937 5:01 am on Sep 7, 2008 (gmt 0)

Thanks for the reply lexipixel! Good tips there. Yeah, this is my first attempt at wordpress. Overall, I'm very happy with it all. I'm just trying to fix this one problem. That is the bad thing about using someone elses code. What threw me off is that in the code they have all this H2 stuff with the sidebar and really they are H3s. Yes, that test worked and it changed the H3 titles to red. I will keep tweaking this. I'm thinking that you are right and its the Ul tag that needs changing.
I will post when I figure it out, just in case anyone cares.
Thanks again!

SuzyUK

msg:3739973 9:07 am on Sep 7, 2008 (gmt 0)

>>I'm sorry. Yes, I'm an idiot! Feel free to delete my last post if that is possible.

Nah, you're not an idiot.. you are not the only one that posts the WP code thinking the rest of us are WP geniuses ;) - though I'm sorry if I was bit short with you, at the minute this CSS forum is reading a bit like a WP help forum ;) though I'm sure that's because some are coming to CSS from that particular angle

nice tips there from lexipixel :)

in the code they have all this H2 stuff with the sidebar and really they are H3s.

>>tweaks

all you need to do for an initial tweak is change or add

#menu-left h2, [b]#menu-left h3[/b] { existing h2 rules in here }

if that does it try removing the h2 rule and , also take a look through the whole stylesheet and see if there are *any* h3 rules.. at the start of a stylesheet it's sometimes worth putting general "reset" rules so that you then get control of your frequently used elements.

e.g.
h1, h2, h3, h4, h5, h6 {margin: 0;}

don't think it's a good idea to try and tweak the the UI code to match the CSS unless you're more confident with that, the CSS tweaks would be much easier for maintaining upgrades to core WP code/widgets/modules etc.. IMHO

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / CSS

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

CSS Forum