Wordpress Sidebar Alignment Issues - Please Help!

When I enter the HTML on the sidebar to Add the following:

ADD US - MYSPACE
(GIF Logo Underneath)

It shows up fine for IE but not for Firefox?

Click here to see my site: Website

As you can see it pushes the next item over!

The other issue I have is correctly aligning Banner Ads on the Side Bar, I added one at the bottom of the sidebar to show you the issue, I would like it centered with the rest of the sidebar items!

Any help would be greatly appreciated!

Thank You

Jeremy Bain

 

Well from the way its laid out in the HTML source, I would say you should put a <ul> tag after the H2 end tag. and close it right after /li, before the /div. That might fix it without having to resort to CSS trickery.

 

<div id="sidebar_back">
<li>
<h2><?php _e('ADD US - MYSPACE'); ?></h2>
<li><A HREF="http://www.myspace.com/dirtyak" target="_blank"><IMG SRC="http://i236.photobucket.com/albums/ff208/jeremybain/myspace2.gif"></A>
</li>
</div>

 

<div id="sidebar_back">
<li>
<h2><?php _e('ADD US - MYSPACE'); ?></h2>
<ul>
<li><A HREF="http://www.myspace.com/dirtyak" target="_blank"><IMG SRC="http://i236.photobucket.com/albums/ff208/jeremybain/DirtyAK/myspace2.gif"></A>
</li>
</ul>
</div>

Code (markup):

Matches the output from those above and below it.

 

I tried it, it added a line on IE and the same problem exists on Firefox! Any other ideas, because CSS trickery sounds dangerous!

Let me know

Thank You

Jeremy Bain

 

Well I got it to work in FF. Here's what I had to do.

<div id="sidebar_back" class="fix">
<li>
<h2 class="sidebartitle">Archives</h2>
then in style.css , add this to the end of the file:

.fix {
clear:both;
float: none;
}

 

After tweaking what you suggested, it worked! Thank you very much!

Rep is coming!

Any idea on centering the advertisement?

If you have a solution, will I need to do anything different when I add more ads?

Let me know!

Thank You

Jeremy Bain

 

Well if you add more ads, the same solution should work. That's a javascript ad correct?
fast way to do it would be .

<div style="text-align:center;">
<script type="text/javascript" language="javascript" src="http://www.kqzyfj.com/placeholder-2829210?target=_blank&mouseover=Y"></script>

<!--add more ads here -->

</div>

Code (markup):

Suffers from too many divs but since that's a dynamic call, about the only way to influence it. Could put the style into the CSS file as .center, and change to :


<div class="center">
JAVASCRIPT
<!--add more ads here -->
</div>

then in style.css :
.center { text-align: center ; }

But there might be a class called center in the style.css already.