CSS - Ie8 Problems, Wordpress Site

I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome.

My Site

and here is me css file

css Code:
Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }

  

  


 /* Basic style sheet */


 html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {


   margin: 0px;


   padding: 0px;


   border: 0px;


 }


  


 body{


   background-image: url(../images/thumbBG.gif);


   background-repeat: repeat;


   color: #999999;


   font-family: Arial, Helvetica, sans-serif;


   font-size: 100.01%; 


   text-align: center;


 }


  


 #wrapper{


   width: 800px;


   text-align: left;


   background-color: #1A1A1A;


 }


  


 #rightshadow{


   width: 850px;


   margin-left: auto;


   margin-right: auto;


   background-image:url(../images/rightshadow.png);


   background-position: right top;


   background-repeat: repeat-y;


   /*background-attachment: inherit;*/


 }


  


 #leftshadow{


   padding-left: 25px;


   background-image: url(../images/leftshadow.png);


   background-position: left top;


   background-repeat: repeat-y;


   /*background-attachment: inherit;*/


 }


  


 #banner{


   height: 135px;


   background-position: center;


   background-repeat: no-repeat;


   background-image: url(../images/banner2.jpg);


 }


  


 #nav{


   height: 10px;


   background-color: #000000;


   text-align: center;


   margin-bottom: 10px;


 }


  


 #nav ul{


   padding: 0px;


   margin: 0px;


   background-color: #000000;


 }


  


 #nav ul li{


   display: inline;


   padding: 0px;


   margin: 0px;


 }


  


 #nav ul li a{


   font-size: 80%;


   color: #FFFFFF;


   background-color: #000000;


   text-decoration: none;


   padding: 0px 25px 0px 25px;


   text-align: center;


   width: 9em;


 }


  


 #nav ul li a:hover, #nav ul li a:focus{


   background-color: #D0EB5A;


   color: #000000;


 }


  


 #usepic{


   height: 110px;


   width: 104px;


   border: 1px solid #000000;


   background-color: #000000;


   margin-top: 5px;


   margin-bottom: 15px;


   margin-left: 5px;


 }


  


 #user{


   float: left;


   width: 115px;


   background-color: #000000;


   text-align: center;


   margin-top: 10px;


   margin-left: 13px;


 }


  


 /* html div#user  { width: 20px; top: 38px; left:20px; position:absolute; }*/


  


 #content{


   margin-top: 10px;


   margin-right: 23px;


   margin-bottom: 4px;


   float: right;


   width: 625px;


 }


  


 .containAll{


   background: #000000;


   margin-bottom: 10px;


 }


  


 .container{


   width: 100%;


   float: none;


   margin-bottom: 10px;


 }


  


 #content p{


   font-size: 80%;


   margin: 20px;


   font-weight: bold;


 }


  


 #content h1{


   font-size: 130%;


   color: #003366;


   padding: 0px;


   margin: 20px;


 }


  


 #content h2{


   font-size: 110%;


   color: #D0EB6A;


   padding: 0px;


   margin: 20px;


 }


  


 hr{


   visibility: hidden;


 }


  


 .leftimage{


   float: left;


   margin: 0px 10px 20px 0px;


   border: 1px solid #000000;


 }


  


 .rightimage{


   float: right;


   margin: 0px 0px 20px 15px;


   border: 1px solid #000000;


   width: 150px;


 }


  


 .container hr{


   clear: both;


   visibility: hidden; 


 }


  


 hr{


   visibility: visible;


 }


  


 #footer{


   border-top: 1px solid #000000;


   background-color: #C0DB5A;


   color: #000000;


   clear: both;


 }


  


 #footer p{


   padding: 3px;


   font-size: 70%;


 }


  


 #navcontainer{ 


   font-size: 12px;


   width: 100px; 


   margin-left: 5px;


   margin-bottom: 5px;


 }


  


 #navcontainer ul{


   margin-left: 0px;


   padding-left: 0px;


   list-style-type: none;


   font-family: Arial, Helvetica, sans-serif;


 }


  


 #navcontainer a{


   display: block;


   padding: 1px;


   width: 100px;


   background-color: #333333;


   border-bottom: 1px solid #1A1A1A;  


 }


  


 #navcontainer a:link, #navlist a:visited{


   color: #EEE;


   text-decoration: none;


 }


  


 #navcontainer a:hover{


   background-color: #D0EB5A;


   color: #000000;


 }


  


  


 /* clearing


 ----------------------------------------------- */


  


 .clearfix:after {


   /*content: "."; */


   display: block; 


   height: 0; 


   clear: both; 


   visibility: hidden;


 }


  


 * html>body .clearfix {


   display: inline; 


   width: 100%;


 }


  


 * html .clearfix {


   /* Hides from IE-mac \*/


   height: 1%;


   /* End hide from IE-mac */


 }


  

When viewing the test version of my site apparently it has issues with lower resolutions. I'm using 1280x1024 and I guess some people are having issues with it at 1024x768. Is there a way to fix my code so there are no resolution problems, or minimal ones at that? Thanks.

Hi there,
I am still new to css and have run into some problems that are frustrating me to no end! I have validated my html and css and still am not sure what to do with my problems.

I am having two sets of problems:
A) problems between IE and FF
B) getting my nested list on the left side to work properly

Site viewable he

http://www.kohlrbaby.com/revisionbaby/about.html

CSS viewable he

http://www.kohlrbaby.com/revisionbaby/kohlrbaby.css

A)
There are two problems I can see:
1) IE: the photo is moved over a few pixels from the left forcing the other item out of line
2) FF: The white background has disappeared.

B) For my nested list I have 2 issues:
1) I was trying to make the main list items have a custom bullet (arrow.gif) but I can't seem to get it to work.
2) As well, I can't figure out how to get the list to move to the left and the sub list to be less indented

Thank you!
Jill

My web site has both a div/ul based drop down menu and expand/collapse menu on the site. I noticed that the drop down horizontal menu goes behind the images and links of the sidebar expand/collapse menu and snaps shut.

I had to change the li to another word to get the 2 styles to not confict over the <li> tags and it still works fine, but It seems to have an issue being in the same area as the <ul> (which I cannot remove.

To see the problem, visit http://web3.avemarialaw.edu/index.cfm?event=ProspectiveStudent
And mouse over the 'Prospective Student' menu in the top hortizonal bar. You'll see it go behind the title images. Also if you mouse down to about the 3rd drop down link, it snaps shut, but only if your mouse is to the left side. The right side of the dropped menus is fine.

I would like the drop down menu to go over the side bar and take priority over the side bar.

I am including the css and the javascript for both the hortizonal drop down menu and the side bar expand / collapse. Also, both of the styles for the menus are in the same .css file. Not sure if that makes a difference or not.

Drop Down:

Code:

Javascript

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

CSS

/* 3 Level drop down navigation for main */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items* - Top Level Navigation*/
.suckertreemenu ul li {
position: relative;
display: inline;
float: left;
background-color: #FFCC33; /*overall menu background color!*/
}

/*1st sub level menu*/
.suckertreemenu ul li ul {
left: 0;
width: 173px;
position: absolute;
top: 1em;  /*no need to change, as true value set by script */
display: block;
visibility: hidden;
background-color: #DCD3B9;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display: list-item;
float: none;
background-color: #DCD3B9;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
/*width: 160px; width of sub menu levels*/
color: #660000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-weight:bolder;
text-decoration: none;
padding: 4px 1px 4px 7px;
border-bottom: 1px solid #FFFFFF; /*Ouline color for drop down menus!*/
background-color: #DCD3B9;
}

.suckertreemenu ul li a:hover{ /*Changes the color of the menu as the mouse rolls over*/
background-color: #660000;
color: #FFFF00;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background-color: #DCD3B9;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background-color: #DCD3B9;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1px;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/*End 3 Level Main Navigation*/

Expand / Collapse:

Code:

Javascript

<script language="javascript">
	function toggle(id){
    ul = "ul_" + id;
    img = "img_" + id;
    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);
    if (ulElement){
            if (ulElement.className == 'closed'){
                    ulElement.className = "open";
                    imgElement.src = "http://www.avemarialaw.edu/images/opened.gif";
                    }else{
                    ulElement.className = "closed";
                    imgElement.src = "http://www.avemarialaw.edu/images/closed.gif";
                    }
            }
    }
	</script>

CSS

/*Side Bar Nav*/
#menus {
 float: left;
 margin-left: -30px;
 padding-top:30px;
 width: 250px;
 position: relative;
}
.open {
	display: block;
	}
.closed {
	display: none;
	}
liv { /*Fix for confict between top level nav's <li>'s and sidebars*/
	list-style-type: none;
	padding-top: .2em;
	padding-bottom: .2em;
	}
        
liv img {
	vertical-align: middle;
	}
/*End Side Bar Nav*/

Hey guys, I'm in need of some help here.

Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two.

If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself.

Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template.

http://thecheckoutplace.com/compute...eOneNetbook.php

If anyone can offer a hand, it means a lot. Cheers guys.

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

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'm trying to edit a free Wordpress theme called "Imprezz 1.3" so that the date of each post is displayed about 20 pixels more to the left. Here's a picture of what I'm going for:

i.imgur.com/l2EyM.png

I've tried to mess with positioning and z-index in the stylesheet for .postTime, .postDay & .postEra without much success (I get the div to move but the part that's supposed to be 'sticking out' of the page doesn't show). Any help would be much appreciated!

Thx

I was wondering if someone could give me a hand on a CSS problem I am having. This is for my personal site that my wife and I use to update people on our lives. I have the page at a temporary location right now as I am moving the site between servers.

Anyhow, I am working with WordPress and redoing the stylesheet. I am about half way done and am having a very strange problem.

You can view the page here.

The CSS is located below:

Code:

body,html {
	margin: 0;
	padding: 0;
	font: 10pt/15pt arial;
	background: #800000 url(images/topback.jpg) repeat-x top;
	text-align: center;
}
hr,h1,.description {
	display: none;
}
h2 {
	margin: 0;
	padding: 0;
}
#page {
	width: 843px;
	text-align: left;
	background: url(images/mainback.jpg) repeat-y;
}
#header {
	background: url(images/header.jpg) no-repeat;
	height: 275px;
}
#content {
	float: left;
	width: 300px;
	padding-left: 100px;
}

#sidebar {
	float: left;
	width: 200px;
	font-size: 8.5pt;
}
#sidebar li {
	list-style-type: none;
}
#footer {
	clear: both;
}

Here's the problem. In IE the width of the 'content' div is 509 pixels as can be seen by the red border (put in there to show the borders of the div). I am not defining the width to be 509 pixels, it is just defaulting to that width.

You need to look at the page in IE...in Firefox it works fine.

Hey Guys,

I hope this is in the right forum. I've purchased a wordpress theme and it contains a video background using JWPlayer.

Part of the JWPlayer functionality is that it allows play/pause control when hovering over the video and a "hover hand" replaces the regular cursor.

I'd like the cursor to stay the same at all times, and remove the ability to play/pause the video. So it's essentially just a regular looking background that's a video.

I've done some searching online and it appears this is possible by placing a transparent div frame over the entire page with a cooresponding z index.

Seems easy enough, but I'm not very familiar with CSS and the more I look online for the best way to go about this, the more confused and lost I'm getting.

Can anybody shed some light on the best way to go about this? Certainly it must be quite straightforward?

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).

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.

if you look at my web page

http://www.invalidheart.org/index.php

when i have two or more entries my layout looks totally messed up, when i just have one entry, everything is fine. I can't for the life of my figure out what's going wrong with my template when i have 2+ posts.

this is my index.php which is the template for wordpress: Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Invalid Heart - The Portfolio</title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
 @import url( <?php wp_stylesheet("default"); ?> );
	</style>
	
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.invalidheart.org/ie7-standard.js" type="text/javascript">
</script>
<![endif]-->

	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>

</head>

<body id="sectionone">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<div id="wrap">
<div id="header"></div>
<div id="container">
<div id="menu"><?php include ("menu.php"); ?></div>

<div id="extra">
<h3>Navigation</h3>
<div class="line"></div>
<div class="item">
<ul class="nav">
<?php include ("navigation.php"); ?>
</ul>
</div>

<h3>Change Style</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_style_switcher(0); ?>
</ul>
</div>

<h3>Recent Posts</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php get_recent_posts(); ?>
</ul>
</div>

<h3>Archives</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

<h3>Links</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php include ("links.php"); ?>
</ul>
</div>
</div>

<div id="main">
<h3>News & updates</h3>
<div class="line"></div>
<div class="item">
<?php the_date('','<h4>','</h4>'); ?>
<?php the_content(); ?>
<p>Thanks: <?php comment_plugger(); ?></p>
      
	        <p><?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></p>

	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
<br style="clear:both;" />
<?php endforeach; else: ?><br style="clear:both;" />
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?><br style="clear:both;" />
<div id="center"><div class="break"></div></div>

</div>
</div><br style="clear:both;" /></div>
<div id="copyright"><?php include ("copyright.php"); ?></div></div>
<br style="clear:both;" />
</body>
</html>

and my css is he http://invalidheart.org/wp-style/default/style.css

any suggestions?

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