CSS - [wordpress] Easy Css Question =)

Is it ok to nest a div tag inside a table? It appears to work correctly.


Thanks!

I am completely new to CSS. I usually use A LOT OF tables in my designs, and want to switch to CSS now.

Anyways, I am trying to put 2 divs next to each other.

here is what I have
http://www.findagoodhost.com/2/

I'd like to make them as if I put a table with 1 row, 2 columns, but with CSS positioning.

Any help would be apreciated.

Thanks

hey guys,

Im kinda gathering this is an easy question regarding CSS so please be patient lol (im new to css)

im in the middle of building my site (http://www.featherdesigns.co.uk) This is work in progress so ignore the scrolling bars etc if you use IE.... lol

if you visit this page you will see it basically has a white div (id = container) which contains all the content.

all the elements inside i have put in their own div's and used the float command etc to position.

i want the white box to extend or contract depending on the content inside. the sidebar on the left is ideally the minimum height but if the content goes over this height i want it to extend.

if i take out the height variable in the css it shrinks but the content still appears (now just on the background and not in the white box)

Any ideas how i can get this to work how i want... is there an attribute i havent used


thanks ever so much for your time ( i know this is an essay )

a good example is on the landing page for the site. the bottom navigation bar has come up (in IE) but the white box hasnt!

thanks guys

ed

I have set my 'a' tag as follows

PHP Code:
 a { 
         display:block; 
         width: 100px;
         padding: 5px;
         border-style: solid;
         border-color: #B1B1AA;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
         
     
     
     
        }
        a:hover { 
            width: 100px;
         background-color: #CCCCCC;
         border: 1px;
         border-style: solid;
         border-color: #B1B1AA;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
        }
        
        a:link {
        
         color: #000000;
         }
         
        a:visited {
         color: #000000;
        } 





here's the problem. I only want a certain menu to have this style and I want all the rest of my links to be another way but right now, all my links are like how I have above.

Can someone tell me how I can assign different link styles to different links?

I don't want them all the same.

thanks

I just implemented a full CSS layout at my website, lab7.org.
This is the first full CSS & XHTML layout I've ever done, so there are a few problems I don' t know how to fix. I can already see that this problem will have an easy fix, I just can't be the one to do it.

My content div (#rightcolumn) overlaps the "wrapper" (#behind-itall).

Can anyone tell me how to fix this? If you have EditCSS for Firefox, I would also appreciate a .css file so that I may look at it.

Edit: I just now realized that it only does this in Firefox. It displays fine in IE.

I located an archived thread from your forum http://forums.devshed.com/archive/t-10617/css-mouse-over and I am looking for an easy turorial on how to creat these mouse over links. Any assistance would be greatly appreciated.

Hi, I have created a horizontal navigation before with no problem, yet I am now having trouble.
Here's the site: http://www.caillouette.com/Catering/

I have the Div named "indentmenu" and the <ul class="toolbar">
Here's the style sheet: http://www.caillouette.com/Catering/style2.css
and here's the navigation: http://www.caillouette.com/Catering/header_nav.inc

what am i doing wrong?

thanks in advance.

Hi from Athens,Greece!
Glad to be here and hope i can help u as much as u help others and me of course.
I have a problem that i think its common enough to give me a quick reply.
I m using a separate ie css for a Joomla template, in that template suckerfish is used for the top drop down menu.

When i open my forum as wrapped, under the top menu i also have the main menu for the forum.
So if i click to the top drop down menu it appears like its obstructed by the forum main menu and its deosnt function well.
I m gonna attach 2 pics, the first one is from opera and the other one its from IE

the ie_css code its like this div#horiz-menu {

PHP Code:
}

div#nav {
  position: absolute;
  top: 98px;
  left: 12px;
}

#nav ul ul a.daddy {
    width: 166px;
}

#access a {
    cursor: hand;
} 

All I'm looking for is something like:

<div class="field">Name</div>
<div class="result">Jeremy</div>

Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath.

I had:

.field{
float:left;
width:150px;
}

result{
float:left;
}

Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want:

Name: .... Here's a really long name. Here's a really long name.
.............. Here's a really long name. Here's a really long name.
.............. Here's a really long name.

But I'm getting:

Name:
Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name.

The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs?

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 give up. *falls over*

So.. I'm dabbling in CSS. I have a general idea of how it's used and all that good stuff... I'm just having some massive issues with some of the coding. Issues that I should not be having.

I'm attempting to change the color of links, visited, active, hover and otherwise.

But here's where it gets strange. I get the links to change color. But... they won't all change. My code was initially more complex, but with this problem I've hacked it down to this incase there was some non working bit of text somewhere that was making something not parse properly...

Code:

A:link { color:#2A2C8B; } 
A:visited { color:#1D1D2D; } 
A:active { color:white; } 
A:hover { color:#7A7CBB; } 

In this example, visited, active and hover work beautifully. Link, on the other hand, is the same old boring color as usual.

So in a fit of desperation, i alter my coding as follows:

Code:

A:visited { color:#1D1D2D; } 
A:link { color:#2A2C8B; } 
A:active { color:white; } 
A:hover { color:#7A7CBB; }

now the visited link does not work, and the bottom three do.

Why? why? *cry*

here's the entierity of my style sheet, if anybody wants it.

Code:

 <style type="text/css">

A:link { color:#2A2C8B; }
A:active { color:white; }
A:visited { color:#1D1D2D; }
A:hover { color:#7A7CBB; }

body { 
  Font-variant: Arial;
  color: #111128; 
  font-size: small; 
  background: #6C5165;
  background-image: url(swirlstar2.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
  margin-left: 10%; margin-right: 10%;
  h1 { margin-left: -8%; }
  h2,h3,h4,h5,h6 { margin-left: -4%; }
   }
</style>

I am aware that there may well be an error or five in the body section... but I honestly havn't done alot of work there yet. my main concern is getting the links to work properly. And yes, I've tried snipping out the body tags and like leaving the link stuff there and it doesn't work. I've checked this in both Firefox and IE. My editor is notepad. Help? It's really appreciated... thank you.

I have a seemingly easy requirement to place a comment bubble next to a title in a list of articles that would contain the number of comments it's received.

I tried to put an div with the bubble as a background with centered text to put the number of comments in.

The only say I seem to be able to do it it either disregards my sizing of the div so the bubble isn't visible, or I set the display to block which puts it on a new line which isn't what I want.

My code seems straight forward?:
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>Untitled Document</title>
<style type="text/css">

body, p, td, div {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px
}

div.article {
	clear:both;
	padding-bottom:60px;
}
div.article img{
	float:left;
	padding:0px 10px 10px 0px;
}
div.article .articleTitle{
	font-size:16px;
	font-weight:bold;
	color:#36F;
}
div.article .articleDate{
	font-size:10px;
	font-weight:bold;
	color:#666;
}

div.commentBubble{
	background-image: url(comment_bubble.gif);
	background-repeat: no-repeat;
	text-align: center;
	display:inline;
	color: #666;
	font-weight: bold;
	font-size: 12px;
	width: 32px;
	height: 30px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

</style>
</head>

<body>

<div class="article">
	<img src="shake.jpg" width="89" height="89" alt="shake" />
	<span class="articleTitle">Title of story 1<div class="commentBubble">45</div><br /></span>
    <span class="articleDate">July 11, 2011<br /></span>
	Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum 
    text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem 
    ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
    Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text. 
</div>
</body>
</html>

A mock up of what I want is simply:
URL

but I get:
URL

and a copy of the code to play with is:
http://www.kamunga.com/bubble/commentBubble.zip

Any help or hints would be greatly appreciated!!

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?

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