embedded div's? what's the problem here?

[yojitani]

Hi,

I'm modifying (heavily) a wordpress template so I can get a department here running their site on WP (they need something that is very basic to edit). However, I'm having a problem with one of sidebars. Basically, I need to list a bunch of links with subheadings and to do this properly, I need to use a different style sheet from the rest of the sidebar. The problem I'm having is that I'm getting this huge gap between the bottom of the list and the next heading (<h2>Archives</h2>). I'm going to post the code here and hope that someone here can tell me where I'm going wrong.

<div id="left">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>


<div id="leftlinks">
<h2>Links</h2>
<ul>
<li><a href="#">Seminars and Conferences</a>
<ul>

<li><a href="#">Fall 2007</a></li>
<li><a href="#">Spring 2008</a></li>

<a href="#">Courses</a>
<ul>
<li><a href="#">Current</a></li>
<li><a href="#">Upcoming</a></li>
<li><a href="#">All Courses</a></li>

<a href="#">Certificate</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Testimonials</a></li>

<a href="#">People</a>
<ul>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Research Assistants</a></li>
<li><a href="#">Friends </a></li>

<a href="#">Publications</a>
<ul>
<li><a href="#">Journal</a></li>

<a href="#">University</a>
<ul>
<li><a href="#">Home</a></li>

<a href="#">University</a>
<ul>
<li><a href="#">Academic</a></li>
<li><a href="#">Experimental</a></li>
<li><a href="#">Archive</a></li>


<a href="#">Resources</a>
<ul>
<li><a href="#">Pedagogical Projects</a></li>

<a href="#">Archives</a>
<ul>
<li><a href="#">Conferences</a></li>
<li><a href="#">Faculty Research Seminars</a></li>
<li><a href="#">Public Research Seminars</a></li>

</ul>

</div>

<h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

 

[Sdashiki]

be easier with the full code, including the needed style sheet or tags?

 

[epochblue]

During my first glance at the code, I'm noticing lots of unclosed <ul> tags...I don't know if that's the problem, but it's A problem.

 

[jng]

Hi,

The problem I'm having is that I'm getting this huge gap between the bottom of the list and the next heading (<h2>Archives</h2>).

During my first glance at the code, I'm noticing lots of unclosed <ul> tags...I don't know if that's the problem, but it's A problem.

I think epoch is right. it's the unclosed <ul> tags.

If I remember correctly, Wordpress uses embedded <ul> tags to build its sidebar like so:

<ul id="sidebarSections">
	<li>
    	<ul>Section 1
        	<li>item in section 1</li>
            <li>item in section 1</li>
        </ul>
    </li>
    <li>
        <ul>Section 2
        	<li>item in section 2</li>
            <li>item in section 2</li>
        </ul>	
	</li>
</ul>

So close the tags properly and you should be fine.

 

[yojitani]

Thanks for the feedback all, but the closed tags are not the problem. I was actually borrowing the code structure from some link through wordpress that I can't actually find right now. See, the problem with closing the tags for each set is that it creates a huge gap between list items. The list appears to be a better fit with the closed tags, but that is only because everything is so much more spaced out. The problem may be with the tags, but not because they are open.

Edit = nevermind. Just some goofy css -

 

[epochblue]

Thanks for the feedback all, but the closed tags are not the problem. I was actually borrowing the code structure from some link through wordpress that I can't actually find right now. See, the problem with closing the tags for each set is that it creates a huge gap between list items. The list appears to be a better fit with the closed tags, but that is only because everything is so much more spaced out. The problem may be with the tags, but not because they are open.

Edit = nevermind. Just some goofy css -

Regardless of whether the unclosed tags were the problem, they need to be closed. You can fix the margins with CSS after the fact if need be, but for proper markup structure (and just general correctness), an unclosed tags *need* to be closed.

 

[jng]

Regardless of whether the unclosed tags were the problem, they need to be closed. You can fix the margins with CSS after the fact if need be, but for proper markup structure (and just general correctness), an unclosed tags *need* to be closed.

Agreed.

And it's not longer "borrowed" once you've edited it. And Edits-> Problems. I'd hate to see what the site would look like in IE or something with all the unclosed tags.

 

[yojitani]

Regardless of whether the unclosed tags were the problem, they need to be closed. You can fix the margins with CSS after the fact if need be, but for proper markup structure (and just general correctness), an unclosed tags *need* to be closed.

of course. here's the page I was referring to under the heading "improper tag structure". I was treating each category as additional sub-categories. But at any rate, I realized when I went back this morning that the ul ul ul li combination in the CSS was not being used by the original designer, so I simply popped that in, made a few other changes to the stylesheet, deleted the embedded div and all was good... oh, and I could close those tags too!

Oddly enough, even with the unclosed tags, IE 6 or 7 (whichever one is installed on my colleague's computer) displayed the list fine.

 

[epochblue]

Oddly enough, even with the unclosed tags, IE 6 or 7 (whichever one is installed on my colleague's computer) displayed the list fine.

Yeah - that kind of thing is one of my bigger gripes with the IE rendering engine...it's entirely too forgiving with things like that.