|
CSS - Issue With Tables And Wordpress Templates
I'd appreciate any help with this, thanks in advance.
So, I purchased a Wordpress template, installed it, works fine. In some of the posts I'm creating for the site, I want to include simple tables.... problem is, somewhere, somehow, the CSS file for the template I purchased is setting certain style rules for the tables I create. Including a background image. So, it's messing up my tables. I tried setting new table rules this basic way: .argh td { my styles here } then for my tables in my posts: <table class="argh"> It seems to be taking the text formatting that I included that way ... but the dang background image from some style somewhere else keeps showing up no matter what I do. :| Any help would be much appreciated. Similar TutorialsI'm trying to add tables to page in my Wordpress blog, and when I publish, there is TONS of white space between the previous paragraph and the table. It appears the more rows I have in the table, the more white space there is. Which makes me suspect that it might be something to do with the CSS stylesheet. Any ideas on how to solve this? In case you need it, the tables are about half-way down on this page: dominatelocalrankings.com/skeptical TIA for any help, Tom Hi, I am looking to align the links in the top right hand corner of my blog fully to the right but at the moment they are moved to the left slightly can anyone help with this? www dot gadgetwire dot co dot uk Thanks Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. Hello, I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom. The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance. The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section. Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down? Example of errors: Quote: 318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px 824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px 825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px 826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px 1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it 1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140% 1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160% 1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120% 1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none The thing is, I'm rather confused as to where to pinpoint the gap. In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots. I would post a link to what I'm talking about but I'm too new to the forum. Thanks in advance! Hi! I'm working on a layout that involves a couple of different CSS files as well as tables... unfortunately if you view here, you can see that the tables are wanting to overlap and I'm not quite sure why: redstringproductions.org/store/?p=1&slug=index.php The CSS files can be found here and he redstringproductions.org/store/wp-content/plugins/WP-online-store-additional-packs/stylesheet/stylesheet.css redstringproductions.org/store/wp-content/themes/writing/style.css Any advice would be greatly appreciated... thank you very much. Hi everyone. Im facing a problem. Basically I have one large table, with 4 rows. In each row it has two tables, the tables are floating left to each other, with some margin properties inside the <td> tags. If you would please look here. http://www.thehundreds.com/ideaforum/betahelp.htm ... As you can see, im using a pattern. A new row, each new row has two tables that float too each other. everything is aligned correct until I get to my 4th row. for some reason it wont float left anymore to the procedding row. Anyone know why it does this? I added a new class for the fourth set of tables, and made it clear both on the float, and this happends. http://www.thehundreds.com/ideaforum/beta1.htm ... See now the 4th table on the left works, but the right does not. If anyone can help me out here I would really appreciate it. Thanks a ton. So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? i recently began learning CSS. Its going fine so far. CSS isnt that tough and its very handy! but so far, i only read things about editing all text, fonts ect. in a quick way, by setting it between the <head>. in other words, how to edit a single page. i actually need to create templates. Is it possible to create templates with CSS. wut i especially need in the template is text. text that are introducing content. for example (im creating a movie site): Director: Cast: ect. That text + ofcourse the layout itself (!) and other text (like in the side bar menu) is needed on the template so i dont have to create them over whenever i add a movie via a database. I could say, the only thing i need to do is adding text like the name of the director, the cast members, movie image ect. (i will be adding this via a MySQLdatabase) its also handy so that my server doesnt has to reload the layout everytime a visitor clicks a link. only loads the text. how can i do that? oh if ur wondering why i dont read it all first. that is because i have to finish it quick for a company Thanks in Advance! Not sure where exactly to ask this. But I have completely developed a site (programming wise) and now need a nice design. It doesn't have to be anything super fancy but was wondering if anyone knew of any places to download CSS templates for free... Hey everyone. I am new here and this forum looks great. Already found loads of cool PHP ideas just by reading through some of the other posts. I thought for my first post, I would put something into the community. I have created a number of blank css website templates and posted them on my site. I use these as a starting point whenever I create a new site and I find they save me a lot of time. The whole idea of them is to be very basic - even the homepage. I didn't want to fill the templates with loads of stuff you would want to take out but I thought it was important to have enough in there so you can see the idea behind each one. I'd love to hear back from you all and know what you think to them. blankcss.com Looking forward to the responses I've done a few web sites. Nothing really snazzy - I tend to focus on the information being available rather than having it "look cool". As a result, I've received various comments from "it's fantastic" (from people who are actually trying to find information) to "it's boring" (from those who are used to the frantic Flash-based web sites on a lot of the social networking places). There's a huge age range in users, too - it's a school-related site, so there are Jr. High students and their parents looking at it. Anyway, as a revamp, I started to look at CSS templates, partly as a way to play with CSS, but also because it seems to be the "right way" to do things these days. My earlier efforts use frames, and there's a header, a footer, a left-side navigation frame, and then the right-side "info" frame where everything shows up. So I did some Googling and found some offerings for free CSS templates. Grabbed a few and looked, and they are much nicer than my basic colors and styles. So I started working up a sample site and hit a snag when I wanted to do a second page. There was a sample index.html that had a section with a navigation menu on the left, and a flexible middle column, and a fixed column on the right. I got a basic front page together, and decided to create a new menu item for "About us", and link that to a new page. Here's my issue/problem - it seems that the way to create the new page is to duplicate the index.html, then hand tweak the menu to indicate the current location (there's a class="current" attribute on a <a> tag), and then rework the text section in the middle. While that's doable, it offends my programmer's ethic of "do the work only once", which, in this case, means that I can't see why the menu has to be rebuilt each time. Am I missing something? Is this the way that multipage sites based on CSS layouts really work? Or do I need to find a better sample or tutorial on doing a multipage site where the efforts need to be made once to get a menu working, and then leave it alone until a real change is required. Hi...all I need a small tip.. I would like to see a home page templates for Friends Network site. Please tell me if you have anything... Thanks I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! For most of my webpages, I use a few element templates for body, div, etc. I'm using more positioning in my pages, and so for the sake of nested div's, I want to add some standardized positioning to my template:
Code: div{
padding: 0;
margin: 0;
border: 0 #000000 solid;
/*** added positioning atributes ***/
position: relative;
top: 0;
left: 0;
z-index: 0;
}
I know that some of this is "standard", but I want to be absolutely sure the browser is going to render my page as I want it. My question is, will/should adding this positioning increase the processing/rendering time of the page (as using table-less design uses a lot of divs)? It's probably a silly thing to worry about, but I'm also interested in what atributes are more processing intensive. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
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 know this probably has a really simple answer but how do I make it so the sidebar is on the right side of the content box on a WordPress theme? Here is what it looks like right now: http://reptilenewsstation.1sthoster.com/ The sidebar is below the content box and I want it to be on the right side of the content box. I know the theme sucks right now but this is my first WordPress theme and I want to set everything up in the correct places before I start getting into really styling it. I 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. |
|||||||