CSS - Aligning All Wordpress Widgets To The Left

I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty.

I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line.

For the offending code, please see:
http://www.forma3.com/stuff/css/top_menu_v1.html
http://www.forma3.com/stuff/css/css/right_menu_v1.css

Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed.

Hello everyone. Im back again with yet another problem about css.

Site link:
Code:

http://peaknutritionlabs.com/

My problem is that i had to set the width for #ez-fat-footer-container to 1316px because of the background image but now the problem is that all the widgets in that container got out of place and moved to the left.

margin: auto; doesent work. I can move it to the center with position: relative; left: 200px; but when someone has a smaller screen the widgets get pushed to the right by 200px and i would like it to stay in the center.

Anyone know a way to pull this off ?

EDIT: I have used relative position to move it in place and it seems ok for those with resolutions 1366x768 or higher. But i would still like to know how to center it for lower resolutions if anyone knows..

Hi,

I have a sidebar that's getting a little cramped and I would like to space them out by about 5-10px.

Am using wordpress widgets for most of them so am unsure about where to find them in the code..

www.leehughes.co.uk

#content #sidebar {
float: right;
width: 25%;
}
#content #sidebar p {
font-size: 15px; /* dontate button) */
line-height: 22px;
color: #FFFFFF;
}
#content #sidebar p a {

color: #FFFFFF; /* dontate button) */
text-decoration: none;
}
#content #sidebar p a:link {
color: #FFFFFF;
text-decoration: none;
}
#content #sidebar p a:hover {
color: #003366;
text-decoration: none;
}
#content #sidebar h2 {

color: #FFFFFF; /* categories button) */
font-size: 15px;
}
#content #sidebar h3 {
font-size: 15px;
color: #FFFFFF;
}
#content #sidebar h3 a {

color: #FFFFFF;
font-size: 17px;
text-decoration: none;
}
#content #sidebar h3 a:hover {
color: #003366;
text-decoration: none;
}
#content #sidebar h2 a {
color: #FFFFFF;
font-size: 15px; /* Subscribe button) */
text-decoration: none;
}
#content #sidebar h2 a:hover {
color: #003366;
font-size: 15px;
text-decoration: none;
}
#content #sidebar li {
color: #0000FF; /* Bullet point of posts button) */
line-height: 20px;
}
#content #sidebar li a {
color: #FFFFFF; /* posts button) */
font-size: 15px;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#content #sidebar li a:link {
font-size: 15px;
color: #FFFFFF; /* seconds posts button) */
text-decoration: none;
}
#content #sidebar li a:hover {
color: #003366;
text-decoration: underline;
}
#content #sidebar a {
color: #000000;
}

Hi guys..

Av messed up my code trying to sort something out

www.leehughes.co.uk

as you can see the subfooter widgets are now on the left.. how do I move then center?

Also you see the recent comments.. how can I space that out to make it look like the other two?

Many thanks

I'm making a page in which three elements are embedded:

The first is a weather.com "current weather" widget, which is as follows:

Code:

<script type="text/javascript" src="http://voap.weather.com/weather/oap/USVA0023?template=TRVLV&par=3000000007&unit=0&key=twciweatherwidget"></script>

It always aligns left, despite the div it's in having text-align: right set. How can I get it to center?

The other two are iframes, like so:

Code:

<iframe src="http://www.g4ilo.com/wwv/webprop.php?format=small" width="180px" height="268px" frameborder="0"></iframe>

They work fine, but don't validate (using 4.01 Strict). What is a way to get the same content in a valid block that I can style and place as I wish?

EDIT: Now that I look at it, this probably would fit better in the HTML forums. My apologies.

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

Hi, I have this page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

Here is the blog page:

wavgirl.com/blog

If you open it in firefox or other browsers, it works fine. The menu at the top is on all pages on my site (via a php include). All pages also are linked to a main stylesheet for my website. Everything works in internet explorer EXCEPT that blog page (if you go to the main page of my site in IE, it loads fine).

This has led me to conclude that there is something specifically in the blog's style sheet that doesn't work in IE. When you load the blog page in IE, the page is thrown off center, and the menu dropdown does not work anymore.

Can someone simply look at this stylesheet and tell me how to correct it for internet explorer? As I said, all of this loads fine in other browsers, and the menu works on all other pages of the site in any browser.

Any help would be appreciated, and I apologize if I posted this in the wrong place.

Code:

/*  
Theme Name: Simple Blog Design
Theme URI: 
Description: A simple clear theme with 2-sidebar and 3-sidebar layouts.
Version: 1.0
Author: BlogDesignStudio
Author URI: http://blogdesignstudio.com/
Tags: widget ready, white, blue, right sidebar
	Valid XHTML 1.0 Transitional

*/

* {
margin: 0;
padding: 0;
}
body {
color: #000;
background: #fff;
font-family: Verdana, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
line-height: 1.6;
}

p {
font-size: 1.1em;
margin: 0 0 10px 0;
}
blockquote {
background: url(images/quote.png) no-repeat;
color: #000;
margin: 15px;
padding-left: 25px;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre, code {
font-family: Verdana, "Courier New", Courier, Monospace;
line-height: 1.5;
}
pre {
border-top: 1px solid #ccc;
white-space: pre;
overflow: auto;
margin: 0 15px;
padding: 10px 15px;
max-height: 300px;
}
img {
}

a {
color: #555555!important;
text-decoration: none;
outline: none;
}
a:focus, a:hover {
color: #555555!important;
text-decoration: none;
}

.clear {
float:none;
clear: both;
}
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

img.alignleft {
margin:5px 10px 10px 0;
}
img.alignright {
margin:5px 0 10px 10px;
}
hr {
background: #E6E6D2; 
color: #E6E6D2;
clear: both; 
float: none; 
width: 100%; 
height: .1em;
margin: 0 0 1.4em;
border: none; 
}
hr.space {
height: 4em;
}

.clearer {
clear:both;
}

/************************* HOLDERS ********************************/
.container {
text-align: left;
background: #fff;
min-height: 100%;
max-width: 1000px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
margin: 0 auto;
}
.container2 {
width: 100%;
margin: 0 auto;
text-align:left;
}

/************************* HEADER ********************************/

.blender { background: #eae0da; }

#header {
width: 100%;
}
#header .container {
width: 980px;
}
#headline {
float:left;
margin:15px 0 20px 20px;
font-size:16px;
color:#a6a379;
}
#headline h1 {
font-size:40px;
line-height:40px;
margin:0;
color:#3e4b54;
letter-spacing:-1px;
}

/************************* SUBSCRIBE START ********************************/
.subs {
display:block;
float:right;
width:280px;
}
.subs a {
margin:10px 0 0 0;
padding:0 0 0 25px;
height:20px;
display:block;
float:left;
background:url(images/rss.gif) left top no-repeat;
}

/************************* SUBSCRIBE END ********************************/


/************************* PAGES MENU START ********************************/
.topline {
height:40px;
background:#3E4B54;
}
ul.menu {
width:980px;
list-style-type: none;
margin: 0px auto;
padding:0;
font-weight:normal;
height:40px;
}
ul.menu li.page_item {
float: left;
display: inline;
font-size: 18px;
margin:0 1px 0 0;
padding:0;
text-transform:uppercase;
}
ul.menu li.page_item a {
color:#fff!important;
display: block;
float:left;
text-decoration: none;
padding:6px 20px 5px 20px;
}
ul.menu li.page_item a:hover {
color: #3e4b54!important;
text-decoration:none;
background:#E6E2D9;
}
ul.menu li.current_page_item a {
color: #3e4b54!important;
text-decoration:none;
background:#E6E2D9;
}
/************************* PAGES MENU END ********************************/

/* Search */
#searchform {
padding:0;
margin:10px 0 0 0;
display:block;
float:left;
clear:both;
width:250px;
height:33px;
font-size:15px;
color:#003e4f;
}
input#s {
width: 240px;
float:left;
margin:5px 7px 0 0;
padding:4px 5px 6px 5px;
font-family: Verdana, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
border:none;
font-size:14px;
background:#fff;
color:white;
}

/************************* CONTENT PACKER ********************************/
  

#leftcolumn, #rightcolumn {
margin:0;
}

#leftcolumn {
float: left;
width: 70%;
padding:0;

}
#leftcolumn_top {

height:6px;
margin-bottom:15px;
}
#leftcolumn_bot {

height:6px;
margin-top:30px;
}

#rightcolumn {
float: right;
width: 29%;
margin:0;
}

.sidebar_left {
display:none;
}


/************************* CONTENT START ********************************/
.title {
margin:0;
clear:both;
}
.title h2 {
color: #3e4b54;
}
.title h2 a {
color: #3e4b54!important;
text-decoration: none;
}
.title h2 a:hover {
color: #3e4b54!important;
text-decoration: none;
border-bottom:1px dotted #3e4b54!important;
}
.date {
color:#555555;
margin-bottom:10px;
}

.post {
padding: 0;
margin:0 23px 10px 20px;
clear:both;
}
.post p {
padding:0;
margin:0;
}

.postdata {
margin: 10px 0 20px 0;
padding:0 10px 3px 10px;
float:left;
font-size:12px;
background:#eae0da;
color:#000;
width:97%;
}

a.more-link {
display:block;
clear:both;
color:#a6a379;
margin:10px 0 20px 0;
width:135px;
}
a:hover.more-link {
color:#a6a379;
}
#related h3, h3#comments {
padding: 8px 0 5px 0;
border-bottom:1px dotted #999;
}

.cmd-avatar {
clear: none;
display: inline;
float: right;
margin: 0px;
}
/************************* CONTENT END ********************************/


/************************* SIDEBAR MAINS START ********************************/
ul.sidebar {
list-style-type: none;
margin: 0 0 0px 0;
padding: 0;
}
.sidebar li {
padding:0;
margin:0;
}
li.widget ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
font-size:15px;
} 
.sidebar ul li {
margin: 5px 0 5px 0;
}
.sidebar .children {
margin: 0 0 10px 10px;
}
.sidebar h2 {
letter-spacing:-1px;
}
.sidebar a {
color: #000!important;
padding:4px 5px 6px 15px;
font-size:14px;
background-position:0 6px;
}
.sidebar a:hover {
color:#555555!important;
background-position:0 6px;
}

/************************* SIDEBAR MAINS END ********************************/

#tag_cloud {
display:block;
margin-bottom:30px;
float:left;
clear:both;
width:100%;
}

ul#recentcomments {
width:210px;
}
ul#recentcomments li {
background-position:0 5px;
padding-left:15px;
}
#recentcomments a {
background:none;
padding-left:0;
}
#recentcomments a:hover {
background:none
}

#tag_cloud a {
margin-right:5px;
}
 
/************************* COMMENTS AREA START ********************************/

.commentlist {
margin: 0;
padding:0;
list-style-type:none;
}
.commentlist p {
padding:5px;
margin:0;
}
.komentar {
margin:0;
padding:0;
}
.commentlist a {
border-bottom:1px dotted;
}
.commentlist a:hover {
text-decoration:none;
border-bottom:none;
}
.commentlist .body {
padding: 0;
margin:0;
overflow: hidden;
float:right;
width:580px;
display:block;
text-align:justify;
color:#45322f;
}
.commentlist .body .body-author {
padding: 0;
margin:0;
overflow: hidden;
color:#555555;
float:left;
display:block;
}
.commentlist .body p {
float:left;
padding-top:0;
}
.commentlist li {
width: 100%;
padding: 0 0 5px 0;
clear:both;
display:block;
float:left;
font-size:11px;
}
.commentlist li .top {
color: #45322f;
padding: 0;
margin:0;
width:575px;
float:right;
font-weight: bold;
}
.commentlist li .top a {
color: #555555;
}
.commentlist li .top span {
font-size: 0.9em;
font-weight: 400;
color:#505e66;
}

.gravatar {
height:70px;
width:60px;
float:left;
margin:0;
}
img.avatar {
margin:0;
height:60px;
width:60px;
padding:2px;
border:1px solid #E5E1DE;
}

.theform {
padding: 1.5em 0 2em;
}

.theform label {
font-size: 0.9em;
vertical-align: middle;
}

#remember, #forget, #txpCommentHelpLink {
margin-left: 2em;
}

#commentform {
padding:0;
}

#commentform input:focus, #commentform textarea:focus {
border: 1px solid #CECABE;
background: white;
}

.comment_input {
vertical-align: middle;
width: 260px;
border: 1px solid #ffffff;
background: #ffffff;
padding: 0.3em;
margin-right: 5px;
margin-bottom:10px;
}

.message_input {
font-size: 1em;
width: 98%;
height: 200px;
border: 1px solid #CECABE;
background: #ffffff;
margin-top: 0.2em;
margin-bottom:10px;
padding: 0.3em;
}

.commentlist_error {
color: #c00;
}

.button {
background: #fff;
width:75px;
padding:5px 0 5px 0;
border:1px solid #CECABE;
color:#6000;
font-weight:bold;
text-transform:uppercase;
font-size:12px;
cursor:pointer;
}
.button:hover {
background: #555555;
color:white;
cursor:pointer;
}
#commentform .button:focus {
background: #cccccc;
color:white;
cursor:pointer;
border:1px solid #CECABE;
}
/************************* COMMENTS AREA END ********************************/


/************************* FOOTER START ********************************/

#footer {
width: 992px;
margin:0px auto;
padding:10px 0 20px 0;
display: block;
}
#footer .container {
padding:0;
width:950px;
}
.copyright {
float:left;
color:#a4a093;
font-size:11px;
margin-bottom:10px;
}

#footer .credits {
float:left;
color:#a4a093;
}
#footer .credits p {
float:left;
font-size:12px;
margin:6px 5px 0 0;
}
#footer .credits a, #footer .credits a:visited {
text-decoration:none;
}
a.wordpress {
display:block;
float:left;
width:25px;
height:25px;
background:url(images/wordpress.gif) no-repeat;
color:#ccc!important;
padding-left:26px;
line-height:30px;
}
a:hover.wordpress {
background:url(images/wordpress.gif) no-repeat 0 100%;
color:#000!important;
}
/************************* FOOTER END ********************************/



/*************** SOCIAL LINKS ************************/
.inside_subpost {
display:block;
clear:both;
margin:30px 23px 30px 20px;
padding:0;
}
.related_rss_icon {
float:left;
background:url(images/rss.gif) no-repeat;
width:25px;
height:20px;
border-bottom:none;
}
.related_rss {
padding:0;
margin:0 0 20px 0;
font-size:18px;
font-weight:normal;
border-bottom:none;
}
.related_rss a, .related_rss a:visited {
border-bottom:1px dotted;
}
.related_rss a:hover {
border-bottom:none;
text-decoration:none;
}

.social {
margin:0;
padding:0;
float:left;
margin-right:30px;
}

/*************** END SOCIAL LINKS ************************/


#calendar_wrap {
	margin:0px auto;
	width:210px;
	margin-bottom:30px;
	clear:both;
}
#calendar_wrap a {
	padding: 3px 0px;
	background:none
}
#calendar_wrap table { width: 210px; border: solid 1px #ccc; background:#f7f7f7}
#calendar_wrap caption { padding: 5px 0px; width: 210px; color:#585449;	font-size:14px; font-weight:bold; }
#calendar_wrap table th { text-align: center; letter-spacing: -1px; padding: 0px; font-size:12px; color:#585449; height:30px; }
#calendar_wrap table td { text-align: center; border: solid 1px #ccc; padding: 3px; font-size: 12px; color:#585449}
#calendar_wrap table td a { font-size: 12px; font-weight:bold;}
#calendar_wrap table td a:hover { color:#9CC318; font-weight:bold; border:none; }



/* Page Navigation  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.pageNav { 
padding: 5px 0 0 0; 
margin:30px 23px 20px 20px; 
height:30px;
font-size:15px; 
}
.pageNav a, .pageNav a:visited { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#3A3A3A; text-decoration:none; }
.pageNav a:hover { text-decoration: none; color:#a6a379; border-bottom:1px dashed #a6a379; }
.pageNav span { display:block; float:left; text-align:center; line-height:25px; height:25px; width:130px; color:#333;}
.pageNav .on { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#a6a379; }

.dotts {width:25px; text-align:center; display:block; float:left;}
.pageNav a.lastpage {color: #3a3a3a;width:35px;}
.pageNav a:hover.lastpage {color: #222; width:35px;}


#singleNav {
margin:20px;
}
.previous {
float:left;
}
.next {
float:right;
}

.list404-table {
font-size:17px;
}
ul.list404, ul.list404 li ul {
list-style-type:none;
font-size:14px;
margin:10px 20px 20px 20px;
}
ul.list404 li a {
background-position:0 4px;
padding-left:20px;
}
ul.list404 li a:hover {
background-position:0 4px;
}

I'm using wordpress 2.9 and I installed a plugin called wp-polls the problem is that the Y in Yes and N in No on the poll won't show up in IE.

the url is mcs.assistui.net
How do you fix this?

I know this probably has a really simple answer but how do I make it so the sidebar is on the right side of the content box on a WordPress theme?

Here is what it looks like right now:

http://reptilenewsstation.1sthoster.com/

The sidebar is below the content box and I want it to be on the right side of the content box.

I know the theme sucks right now but this is my first WordPress theme and I want to set everything up in the correct places before I start getting into really styling it.

I have a pretty awesome looking wordpress theme. I was wondering if someone could guide me through making a small change to it though!

Firstly, here is the page now: theangrywalrus.com/blog

What I would like to do, is take the black bar at the top and stretch it so it goes under the title of my site, and ends near where the 'content' starts. Then I'd like to move the gradient bg image down so it starts under where the black bar ends.

So far, using the firefox web dev plugin, I've only been able to get the black bar/gradient working in one part of the page, where the content is. How can I get it to be how I want it? Could someone show me how to get this done please? I'd really appreciate some help.

My style sheet is he theangrywalrus.com/blog/wp-content/themes/simpla/style.css

Someone just pointed this out on a site I'm working on. Any help would be appreciated.

collettforcongress/com

Works in Firefox (of course), doesn't work in IE8. Let the slider move one slide (the featured story box).