Hung Up On Some CSS

Status
Not open for further replies.
jerxs

jerxs

New member
Jun 24, 2006
1,804
24
0
North East PA
Im hung up on something that seems really quite simple, but for some reason im missing something here. Id probably figure it out if I took a break for awhile, but I got way to much shit to do to consider a break.

Ive got some html set up like so..........

Code: 
<div id="sidebar">
    <h2>Navigate</h2>
    <ul>
         <li>
            <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
        </li>
    </ul>
</div>

AND CSS FOR LIKE SO.....

/* Left Sidebar */
#sidebar {
 float: left;
 width: 160px;
 text-align: right;
 }
#sidebar h2 {
 font-size: 16px;
 font-family: Arial, Helvetica, sans-serif;
 margin: 5px 0 0 0;
 padding: 0;
 }
#sidebar ul{
 margin: 5px 0 0 0;
 padding: 0;
 list-style-type: none;
 }
#sidebar li {
 margin: 0;
 padding: 0;
 }

For some reason im getting a hell of a top margin between the list and <h2> even with margins cleared for both H2 and UL, everything looks fine in Firefox, the culprit once again Explorer! Actually could even be something to do with LI, so I even tryed clearing all margin and padding there also.

Like I said, something that seems to simple, but id really fucking witrh me right now. Anyone notice anything that I have or have not included that would cause the upper margin?
 


This is just getting fucking agrivating now! Ive been hung up on this, what seems to be simple technicality now for a few hours. FUCK!!!!!! Im losing more hair by the minuet!
 
Let me ask this, is wp_list_cats(); styled through some sort of php other than styles called out in the basic .css file?
 
If you post the output of the php function, people can test it locally. Internet Explorer uses some messed up interpretation of margins and padding; it's definitely a pain in the ass some times.
 
Explorer is a pain in the ass, but normally if you clear all margins and padding you can go from there and things seem to work out form that point on.

Here a link to the output;

The Beach Hunter

It may be something else also, maybe I have been looking in the wrong place.
 
Yep has to be something in that call for the Category list, if you look at the link above on the right column the links I added (which are dead) look consistant in explorer and FF and are fashioned identical to the left where im having problems.

So where do I look to fix the problem in the PHP? Anyone?

Thanks Jer
 
jerxs said:
Yep has to be something in that call for the Category list, if you look at the link above on the right column the links I added (which are dead) look consistant in explorer and FF and are fashioned identical to the left where im having problems.

So where do I look to fix the problem in the PHP? Anyone?

Thanks Jer
Click to expand...

look in the includes folder, should be:

wp-includes/template-functions-category.php
 
If you cut and paste the form to the left sidebar and add another header under the "Navigate" header, it works fine. So one way to fix this would be to wrap your <ul></ul> tags in a <p></p> block.

Note: I didn't mean to copy and paste the form on your production site, I was just saying that when I made both sidebars identical, everything looked the way it should. This just has to do with the way block-level elements are handled, hence the <p> tags.

Code: 
<div id="sidebar">
  <h2>Navigate</h2>
  <p>
    <ul>
      <li>
        <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
      </li>
    </ul>
  </p>
</div>
 
ohhhh, jesus! I found where wp_list_cats is defined, but I see nothing that would cause the margin, but then again I really dont know much about php, Im looking for <br>, <p> and whatnot defined in the php, but nothing sticks out.

I really didnt want to post a link ot the site, but I did anyway, so I have to also ask what you all think of the theme so far?
 
DavidR said:
If you cut and paste the form to the left sidebar and add another header under the "Navigate" header, it works fine. So one way to fix this would be to wrap your <ul></ul> tags in a <p></p> block.

Note: I didn't mean to copy and paste the form on your production site, I was just saying that when I made both sidebars identical, everything looked the way it should. This just has to do with the way block-level elements are handled, hence the <p> tags.

Code: 
<div id="sidebar">
  <h2>Navigate</h2>
  <p>
    <ul>
      <li>
        <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
      </li>
    </ul>
  </p>
</div>
Click to expand...

I tryed adding the <p> tag, but get the additional top-margin of the <p> added to the margin I am trying to get rid of. I will try throwin the search form in the top right.
 
ok, with the search on the right it hides the problem, there is still that top-margin above where the categpries ar and the <h2> used to define the link list "Categories"
 
Hmm, I thought you were talking about the list overlapping the top bar, so yeah, my solution won't work with the real problem.
 
yes, the head to the category list was over the top bar, I moved things around to see if placeing search in the left and adding <p> to the lists would work. its that damn bit of css I know it, its just I dont know where the heck to look to make the changes, well I know the file now, I just dont se anything there that would influence the top margin, hmmm

Ive posted and searched at Wordpress.org, but nothing there, I am going to bet I get a why dont you try looking the WP codex over there, which I have done already :?
 
sheesh! I placed the header tag after the ul tag that contains the wp_list_cat and it seems to work, go figure, the right is not formatted like this and works.
 
ok looks like I have it this time, I wrapped the <h2> tag in the same <li> tag that wp_list_cat is in. How compliant this is I dont know and to be honest I could really give a shit less, it works! :)
 
Status
Not open for further replies.
Top Bottom