CSS - Attaching Css Id/class To Wordpress Html/php Menu.

Hi all,
Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum.

I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it.

--
Thanks.


Code:

<style type="text/css">
.faq_hidden
{
	visibility: hidden;
}

.faq_shown
{
	visibility: visible;
}
</style> 

<script type="text/javascript"> 

function showReview(n)
{
 document.getElementById(n+'_r').className = 'faq_hidden';
 document.getElementById(n+'_f').className = 'faq_shown';
}

function hideReview(n)
{
 document.getElementById(n+'_f').className = 'faq_hidden';
 document.getElementById(n+'_r').className = 'faq_shown';
}

</script> 

<div id="r1_r" class="faq_shown"> 
 <a onclick="showReview('r1'); return false;" href="#"> 
  <div>
   Completing the questions 1
  </div> 
 </a>
</div>

<div class="faq_hidden" id="r1_f"> 
 <a onclick="hideReview('r1'); return false;" href="#"> 
  <div>
   Completing the questions
  </div> 
 </a> 
 <p>
  Completing the questionnaire should take 8 - 10 minutes of your time.
  Be honest, answer as you would normally behave and act, in response to
  the statements and questions. 
 </p>
</div>

Question: If I assign an image a particular class (in this case, "photography", which I also use to align and add a border to the photo), can I have it display a bit of code as well. I'd like to be able to print a hyperlink to a script that will return EXIF data (which I have and works) to elements marked with that class?

Example:

Code:

  .photography {
    border: 5px solid #333333;
	text-align: center;
    }

.....

<img class="photography" src="whatever.jpg" />

would display whatever.jpg in a centered 5px box with a link that says "click here for EXIF data", which, on the backend, looks like this:

Code:

<a href="java script:exifWindow('exif/readexif.php?path=whatever.jpg')">click here for EXIF data</a>

How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag?
I tried just putting it in, but the jsp page won't compile:

<html:text property="ssn" class="textfield2" />

where textfield2 is a valid style attribute in my included css file.
Surely there is a way to specify this so that the taglib will render the proper output.
I'm not having any luck googling for an answer.

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


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


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


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


     background-position: 0px 0px;


 }


 #news a{


     float:left;


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


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


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


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Using the following example:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

Hi

I thought this would be a lot easier than it has turned out! I want to add a 4th side menu level [#subnav-col]. I don't know if i'm getting the css or the html wrong but I can't get it to work - I find it difficult to know how to do the CSS+html to a 4th level. The original HTML and CSS is here - would be grateful for some help.

Many thanks

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-"><!-- InstanceBegin template="/Templates/template-content.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- InstanceBeginEditable name="meta" --> <title>General information</title> <!-- InstanceEndEditable --> <link type="text/css" href="/css/style.css" media="screen" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie8.css" media="screen"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/css/ie7.css" media="screen"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen"> <![endif]--> <link type="text/css" href="/css/print.css" media="print" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/actions.js"></script>  <!-- InstanceBeginEditable name="extras" --><!-- InstanceEndEditable --> </head> <body> <div id="top"></div> <div id="container">   <div id="header">     <a class="accessLinks" href="#content" accesskey="[" tabindex="1">Skip to main content</a><span class="hidden"> | </span><a class="accessLinks" href="/accessibility.html" accesskey="0">Accessibility information</a> <a href="/" title="Go to home page" accesskey="1"><span class="site-title">Change change information </span><img src="/site-tools/img/header/logo.jpg" alt="" width="461" height="120" class="logo"></a><img src="/site-tools/img/header/header.jpg" alt="" width="509" height="120" class="header-bg"><a href="http://science.com" accesskey="/" title="services"><img src="img/header/header-icon-ng.jpg" width="223" height="30" alt="" class="vt-icon"></a>  </div>   <!-- end header -->    <div id="main-nav">     <!-- begin menu include -->       <ul> <li><a href="/" tabindex="2">Home</a></li><li><a href="/top/" tabindex="3">Science</a></li><li><a href="/adaptation/" tabindex="4">Physical impacts</a></li><li><a href="/carbon/" tabindex="5">reports</a></li><li><a href="/reducing/" tabindex="6">Doing our fair share</a></li><li class="current"><a href="/trading-scheme/" tabindex="7">trading</a></li></ul><div id="site-search">     <form action="http://search./search" method="get" name="siteSearch">          <fieldset>              <legend>Site search</legend>              <label for="searchBox">Search</label>              <input name="q" type="text" id="searchBox">              <input name="btnG" type="submit" value="Search" class="button">              <input type="hidden" name="site" value="Change">              <input type="hidden" name="client" value="Change">              <input type="hidden" name="proxystylesheet" value="Change">              <input type="hidden" name="output" value="xml_no_dtd">         </fieldset>      </form> </div><!-- end site-search -->  </div>   <!-- end main-nav -->   <div id="content-wrapper-2col">     <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" -->             <h2><a href="/delay/participating/">Participating in the ETS</a></h2>        <ul>         <li><a href="/delay/participating/apples/">Apples</a></li>         <li><a href="/delay/participating/oranges/">Oranges</a></li>         <li><a href="/delay/participating/bananas/">Bananas</a></li>         <li><a href="/delay/participating/Cherries/">Cherries</a></li>         <li><a href="/delay/participating/grapes/">Grapes</a>              <ul>               <li><a href="/delay/participating/industry/obligation/">Obligations</a></li>               <li><a href="/delay/participating/industry/allocation/">Allocation</a>                 <ul>                   <li><a href="/delay/participating/industry/allocation/eligible-activities/">Eligible activities</a></li>                   <li><a href="/delay/participating/industry/allocation/before-applying/">Before applying</a></li>                   <li><a href="/delay/participating/industry/allocation/calculators/">Calculators</a></li>                    <li><a href="/delay/participating/industry/allocation/how-it-works/">How it works</a></li>                   <li><a href="/delay/participating/industry/allocation/faq.html">Application FAQs</a></li>                 </ul>               </li>               <li><a href="/delay/participating/industry/call-for-data/">Call for data</a></li>               <li><a href="/delay/participating/industry/faq.html">FAQs</a></li>             </ul>          </li>         <li><a href="/delay/participating/fuels/">fuels</a></li>         <li><a href="/delay/participating/synthetic/">Synthetic</a></li>         <li><a href="/delay/participating/waste/">Waste</a></li>       </ul>       <!-- InstanceEndEditable --></div>     <!-- end subnav-col -->     <div id="content-col">       <div id="breadcrumbs">         <p><span class="youarehere">You are he  </span><!-- InstanceBeginEditable name="crumbs" --><a href="/trading/"> trading</a><a href="#"></a> ><!-- InstanceEndEditable --></p>       </div>        <!-- end breadcrumbs -->       <a name="content"></a><!-- InstanceBeginEditable name="content" -->       <h1>About allocations </h1>       <p>Financial assistance to reduce  the impact of the <a href="/scheme/about/basics.html"> Some sectors by providing them with <a href="/scheme/about/emission-units.html"> Units (Us)</a>.  This compensates eligible businesses for increased energy  and fuel costs under the ETS and will help businesses make the necessary changes to reduce their pricing.</p>       <p> There are three main groups who are eligible for allocation:  </p>        <ul>         <li>firms whose activities are  intensive and who are exposed </li>         <li>fishing, and</li>         <li> forestry.  </li>       </ul>                     <!-- InstanceEndEditable --></div>     <!-- end content-col -->    </div>   <!-- end content-wrapper-2col -->   <div class="clear"></div>   <div id="footer">         <div id="-info"><a href="http://www.../" title="Visit the  website"><img src="/site-tools/img/-logo.gif" width="211" height="57" alt=" logo"></a>             </div>     <!-- end -info -->      <div id="call-tools">       <div id="call">                </div>       <!-- end call -->       <div class="clear"></div>        <div id="tools">         <ul>           <li><a href="/sitemap.html" accesskey="2">Site map</a></li>           <li><a href="/copyright.html">Copyright</a></li>           <li><a href="/disclaimer.html">Disclaimer</a></li>           <li><a href="/accessibility.html#accesskeys" accesskey="0">Accessibility</a></li>           <li><a href="/privacy-policy.html">Privacy policy</a></li>            <li><a href="/glossary.html">Glossary</a></li>           <li class="last"><a href="/contact-us.html" accesskey="9">Contact us</a></li>         </ul>       </div>       <!-- end tools -->     </div>     <!-- end call-tools -->          </div>   <!-- end footer -->   <div class="clear"></div> </div> <!-- end container --> </body> <!-- InstanceEnd --></html>

CSS #subnav-col

Code:

/* ----- subnav (left-hand) column ----- */  #subnav-col { 	float: left; 	width: 233px; 	border-top: 1px solid #cacec2; 	} 		 #subnav-col h2 { 	font-weight: normal; 	font-size: 1.4em; 	color: #234d1b; 	margin: 0; 	padding: 4px 13px 4px 13px; 	line-height: 1.2; 	background-color: #eeefeb; 	border-bottom: 1px solid #cacec2; 	} 	 #subnav-col h2 a:link,  #subnav-col h2 a:visited { 	color: #234d1b; 	text-decoration: none; 	}	 	 #subnav-col h2 a:hover { 	color: #234d1b; 	text-decoration: underline; 	}		  #subnav-col ul { 	margin: 0; 	padding: 0; 	} 	 #subnav-col ul li { 	margin: 0; 	padding: 0; 	list-style-type: none; 	font-weight: normal; 	font-size: 1.2em; 	color: #234d1b; 	}	 			 #subnav-col ul li ul li,  #subnav-col ul li ul li ul li { 	font-size: 100%; 	font-weight: normal; 	} 	 #subnav-col ul li a:link,  #subnav-col ul li a:visited { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #234d1b; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet.gif) no-repeat 0 6px; 	} 	 #subnav-col ul li a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; 	}		 	 #subnav-col ul li.current a:link,  #subnav-col ul li.current a:visited,  #subnav-col ul li.current a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; 	} 	 #subnav-col ul li.parent a:link,  #subnav-col ul li.parent a:visited,  #subnav-col ul li.parent a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px; 	}	 	 #subnav-col ul li ul li a:link,  #subnav-col ul li ul li a:visited,  #subnav-col ul li.parent ul li a:link,  #subnav-col ul li.parent ul li a:visited { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet.gif) no-repeat 13px 6px; 	color: #234d1b; 	} 	 #subnav-col ul li ul li a:hover,  #subnav-col ul li.parent ul li a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; 	color: #000; 	} 	 #subnav-col ul li ul li.current a:link,  #subnav-col ul li ul li.current a:visited,  #subnav-col ul li ul li.current a:hover,  #subnav-col ul li.parent ul li.current a:link,  #subnav-col ul li.parent ul li.current a:visited,  #subnav-col ul li.parent ul li.current a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; 	color: #000; 	} 	 #subnav-col ul li ul li a:link,  #subnav-col ul li ul li a:visited,  #subnav-col ul li ul li a:hover { 	padding: 5px 13px 4px 27px; 	} 	 #subnav-col ul li ul li.parent a:link,  #subnav-col ul li ul li.parent a:visited,  #subnav-col ul li ul li.parent a:hover,  #subnav-col ul li.parent ul li.parent a:link,  #subnav-col ul li.parent ul li.parent a:visited,  #subnav-col ul li.parent ul li.parent a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px; 	color: #000; 	}		 	 #subnav-col ul li ul li ul li a:link,  #subnav-col ul li ul li ul li a:visited,  #subnav-col ul li.parent ul li ul li a:link,  #subnav-col ul li.parent ul li ul li a:visited,  #subnav-col ul li ul li.parent ul li a:link,  #subnav-col ul li ul li.parent ul li a:visited,  #subnav-col ul li.parent ul li.parent ul li a:link,  #subnav-col ul li.parent ul li.parent ul li a:visited,  #subnav-col ul li ul li.current ul li a:link,  #subnav-col ul li ul li.current ul li a:visited { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet.gif) no-repeat 27px 6px; 	color: #234d1b; 	} 	 #subnav-col ul li ul li ul li a:hover,  #subnav-col ul li.parent ul li ul li a:hover,  #subnav-col ul li ul li.parent ul li a:hover,  #subnav-col ul li.parent ul li.parent ul li a:hover { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; 	color: #000; 	}  #current a:link,  #subnav-col ul li ul li ul li.current a:visited,  #subnav-col ul li ul li ul li.current a:hover,  #subnav-col ul li.parent ul li ul li.current a:link,  #subnav-col ul li.parent ul li ul li.current a:visited,  #subnav-col ul li.parent ul li ul li.current a:hover,  #subnav-col ul li ul li.parent ul li.current a:link,  #subnav-col ul li ul li.parent ul li.current a:visited,  #subnav-col ul li ul li.parent ul li.current a:hover,  #subnav-col ul li.parent ul li.parent ul li.current a:link,  #subnav-col ul li.parent ul li.parent ul li.current a:visited,  #subnav-col ul li.parent ul li.parent ul li.current a:hover { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; 	color: #000; 	}		 	 /* --- blocks of content in subnav column --- */	  /* subnav column links */		  #subnav-col .related-links-box ul a:link,  #subnav-col .highlight-box p a:link,  #subnav-col .highlight-box ul a:link { 	color: #004161; 	font-weight: bold; 	text-decoration:none; 	}  #subnav-col .related-links-box ul a:visited,  #subnav-col .highlight-box p a:visited,  #subnav-col .highlight-box ul a:visited { 	color:#336781;  	font-weight: bold; 	text-decoration:none; 	} 	 #subnav-col .related-links-box ul a:hover,  #subnav-col .highlight-box p a:hover,  #subnav-col .highlight-box ul a:hover { 	color: #004161; 	font-weight: bold; 	text-decoration:underline; 	}   /* related links box - subnav column */  #subnav-col .related-links-box { 	width: 233px;  	background-color: #f6f7f5; 	margin: 20px 0 20px 0; 	padding: 0; 	border-top: 1px solid #cacec2; 	}	 	 #subnav-col .related-links-box h2,  #subnav-col .related-links-box h3,  #subnav-col .related-links-box h4,  #subnav-col .related-links-box h5,  #subnav-col .related-links-box h6 { 	font-weight: normal; 	font-size: 1.4em; 	color: #004161; 	margin: 0; 	padding: 3px 13px 4px 13px; 	line-height: 1.2; 	background-color: #eeefeb; 	border-bottom: 1px solid #cacec2; 	}	 	 #subnav-col .related-links-box h2 a:link,  #subnav-col .related-links-box h2 a:visited, #subnav-col .related-links-box h3 a:link,  #subnav-col .related-links-box h3 a:visited, #subnav-col .related-links-box h4 a:link,  #subnav-col .related-links-box h4 a:visited, #subnav-col .related-links-box h5 a:link,  #subnav-col .related-links-box h5 a:visited, #subnav-col .related-links-box h6 a:link,  #subnav-col .related-links-box h6 a:visited { 	color: #004161; 	text-decoration: none; 	}	 	 #subnav-col .related-links-box h2 a:hover,  #subnav-col .related-links-box h3 a:hover,  #subnav-col .related-links-box h4 a:hover,  #subnav-col .related-links-box h5 a:hover,  #subnav-col .related-links-box h6 a:hover { 	color: #004161; 	text-decoration: underline; 	}		 	 #subnav-col .related-links-box ul { 	margin: 11px 0 0 0; 	padding: 0 13px; 	} 	 #subnav-col .related-links-box ul li { 	font-size: 1.1em; 	margin: 0; 	padding: 0 0 12px 14px; 	line-height: 1.2; 	list-style-type: none; 	background: url(../img/bullet.gif) no-repeat 0 2px; 	font-weight: normal; 	}	 	 #subnav-col .related-links-box ul li a:link { 	padding: 0; 	border-bottom: none; 	background: none; 	} 	 #subnav-col .related-links-box ul li a:visited { 	padding: 0; 	border-bottom: none; 	background: none; 	}	 	 #subnav-col .related-links-box ul li a:hover { 	padding: 0; 	border-bottom: none; 	background: none; 	}

I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated!

Code:

HTML Code

<div class="menu">
    <ul>
        <li><a href="#" class="search"></a></li>
        <li><a href="#" class="battery"></a></li>
        <li><a href="#" class="cart"></a></li>
        <li><a href="#" class="contact"></a></li>
    </ul>
</div>

CSS

.search, .contact, .cart, .battery
{
    width:100px;
    height:30px;
    margin-left:-1px;
    display:block;
}

.search
{
    background-image:url(Images/search.png);
}
.contact
{
    background-image:url(Images/contact.png);
}
.cart
{
    background-image:url(Images/cart.png);
}
.battery
{
    background-image:url(Images/battery.png);
}

ul li a.search:hover
{
    background-position:0px 60px;
}


ul li a.search:hover ul li a[class=battery]
{
    background-position:0px 60px;
}

Sorry for the lousy title, can't come up with better wording....

What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one.

Thanks...

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?

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

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.