Can't figure out why things are valigned middle
July 5, 2009 - 4:31pm
This is one of the major
This is one of the major difficulties of table layouts (and only PART of why they shouldn't be used)--it's much harder to find errors when you have 5 levels of nested tables than to correct an error with a single
.
Nonetheless, the table cell just preceding
is the one that's computing a vertical-align:middle. So you should be able to add the following CSS rule (assuming it's not overridden by another CSS stylesheet via JavaScript--which is what I'm suspecting since I can't find a rule defining vertical-align:middle).
td#content table tbody tr td { vertical-align:top; }
But, my real advice would be to buy a copy of Designing with Web Standards by Jeffrey Zeldman--you'll thank yourself in the long run!
July 7, 2009 - 12:42pm
@ ericepps
I will give this a try.
So in your opinion, having too many nested tables isn't the standard and shouldn't be used?
How can something like this be made but without nested tables?
Also, just so you know... I still haven't completely understood the div elements just yet... which is why I only use them when needed... I personally can't stand making tables via div elements.
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 7, 2009 - 1:43pm
Using tables at all to lay
Using tables at all to lay out a page isn't the standard and shouldn't be used. Nested tables just makes the problem much worse.
Trying to use div elements to make a table *is* frustrating--I remember doing that when I first started getting away from table designs (made worse by Dreamweaver's "convert from tables to layers" feature). Just look at your page and see what major blocks you need--each one is a div (kinda like a without the , , and tags).
So, for your page, you have 6 different sections--a container for all the page elements (what separates it from the brown background), a header, navigation, a sidebar (with your login, etc.), page content, and a footer. So the HTML could be:
{header content}
{page content}
You would then use CSS to position the elements. As you go, you'll find other places to put
s (like probably around the content and sidebar). I've written a couple blog posts about this. (I hope at some point to actually write some more articles, but alas, I must pay the bills first...)
HTML: http://blog.ericepps.me/2008/1...
CSS: http://blog.ericepps.me/2008/1...
HTML: http://blog.ericepps.me/2008/1...
CSS: http://blog.ericepps.me/2008/1...
And, finally, here's a site I'm working on currently that has a similar layout to yours: http://nsbc.ericepps.me. Feel free to look around and copy--it's how we all learn!
July 7, 2009 - 5:11pm
No more tables?
So then are < table > being depreciated?
To me tables make much more sense than using { header } and then having a header CSS entry that does everything.
At least with the tables you can formulate a visual effect by looking at the HTML.
Is this the new stuff with the newer version of HTML being worked on?
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 7, 2009 - 6:27pm
Actually...
The table tag is not depreciated, but the W3C recommendation is to use css to lay out your site, and save the table tag for actual mark up that requires a table, such as a spreadsheet, or a list of items that it makes sense to use a table for. In other words, use the table tag semantically, not stylistically.
Tony
July 7, 2009 - 6:33pm
tables vs. divs
I'm sorry, I have probably confused you a bit by not using the code tag when I gave you the sample HTML (this time, I'll preview before I post). It should've been:
<div id="container">
<div id="header">
{header content}
</div>
<div id="nav">
{menu}
</div>
<div id="content">
{page content}
</div>
<div id="sidebar">
{login, latest auctions}
</div>
<div id="footer">
{copyright, etc.}
</div>
</div> I think this is actually much easier to follow and see the page structure than with a table. If nothing else, there's just a lot fewer tags, which really helps--especially in complex designs. I won't deny that it takes some adjusting, but I think if you give it a shot on one or two designs, you'll come to like it better. Even if you don't like it better, there are a host of reasons to avoid table layouts for your clients' sake. I'll give you my top 3:
- search engines--when they see a table element, they expect to find tabular data (see below)
- accessibility (screen readers, etc.)--again, they are reading expecting tabular data, so a complex table layout can make a page incomprehensible to a screen reader user.
- speed (especially with mobile)--table layouts use a lot more code than using div, which increases the page size. In a broadband world, not a big deal, but on a cell phone it can be a big deal. In addition, browsers have to construct the entire table before any of it is displayed. So, the more nesting, the longer the whole page's load time will be. If the whole page is in a table, the whole page has to be loaded (except images) before any of it is displayed.
The < table > tag isn't deprecated, but it was never intended to be used for layouts. It was intended for tabular data--like a spreadsheet. So a proper use for a table would be displaying the number of widgets and sprockets a group of people have:
<table>
<thead>
<tr>
<th id="col1">Person</th>
<th id="col2">Widgets</th>
<th id="col3">Sprockets</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="col1">Bob</td>
<td headers="col2">32</td>
<td headers="col3">24</td>
</tr>
<tr>
<td headers="col1">Jane</td>
<td headers="col2">33</td>
<td headers="col3">54</td>
</tr>
<tr>
<td headers="col1">Joe</td>
<td headers="col2">234</td>
<td headers="col3">75</td>
</tr>
<tr>
<td headers="col1">Fred</td>
<td headers="col2">76</td>
<td headers="col3">2</td>
</tr>
<tr>
<td headers="col1">Billy</td>
<td headers="col2">5</td>
<td headers="col3">154</td>
</tr>
</tbody>
</table>July 7, 2009 - 11:08pm
OK... if you don't mind...
If you don't mind, can you do something for me so I can fully understand how this would work.
I've made a template for Joomla, a CMS software.
Can you please setup the HTML alone of what this image would look like? Please include the tags on the image (user1-9, left, right, top, banner1-3, footer and debug).
Even looking at your demo code above I can't seem to picture the whole thing.
The image is here:
http://default.tsgcomputers.net/default.png
Thank you so much for your help and support.
God bless,
Johnathan
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 9, 2009 - 2:18pm
If nothing else...
If you don't want to give a demo using the image I've provided... can you direct me to the right reference or tutorial on W3Schools as to how to do this?
Thank you for your time and God bless,
Johnathan
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 9, 2009 - 3:08pm
I intend to, but...
I do intend to write the markup you asked for, but, alas, I need to pay the bills...I'll try to work something up over the weekend. And, since my wife could go into labor at any moment, even that may not happen...
Did you take a look at the tutorials on my blog that I linked to earlier in the thread? My blog is at blog.ericepps.me, and there are just the two articles at present (one for HTML, one for CSS). Lame, I know, but it's the start of a project that hasn't yet gotten off the ground. I'd be interested to get some feedback on these articles as well--if they're not helpful, maybe I'll scrap that project altogether. :)
July 9, 2009 - 3:31pm
CONGRATULATIONS!
Hey man... 1st time father? Congrats on the new bundle of joy!
I have not looked at your articles as of yet... I am working on 'reworking' the html to use div elements and solely css... I'll post what I gather... I think I might be able to get the HTML done here in a bit... and I will 'try' to make it look like it could with the image I posted in an above post.
Then I will need to work on the CSS after wards... one step ata time.
God bless you and your family (especially the new addition!),
Johnathan
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 9, 2009 - 3:42pm
My only BIG question...
is... do you solely use widths defined in CSS as to add 'breaks' between cells and rows?
Whereas before I could define a row using < tr > and a new cell with < td >... however with this, there are no rows, only cells.
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 9, 2009 - 4:55pm
OK, got the HTML done sooner...
Than I thought. Here is what I've come up with.
Now everything else (positioning, width, etc) is done compeltely with CSS right?
<?php
defined('_JEXEC') or die;
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<?php
if ( $my->id ) {
$editor = &JFactory::getEditor();
echo $editor->initialise();
} ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="mastertable">
<?php if ($this->countModules('user1 OR user2')) : ?>
<div id="user1"><jdoc:include type="modules" name="user1" style="xhtml"/></div>
<div id="user2"><jdoc:include type="modules" name="user2" style="xhtml"/></div>
<?php endif; ?>
<div id="header"><div id="logo"></div><div id="user9"><jdoc:include type="modules" name="user9" style="xhtml"/></div>
<?php if ($this->countModules('user3 OR user4')) : ?>
<div id="user3"><jdoc:include type="modules" name="user3" style="xhtml"/></div><div id="user4"><jdoc:include type="modules" name="user4" style="xhtml"/></div>
<?php endif; ?>
</div>
<div id="contenttable">
<?php if ($this->countModules('top')) : ?>
<span><jdoc:include type="modules" name="top" style="xhtml"/></span>
<?php endif; ?>
<?php if ($this->countModules('left')) : ?>
<div id="left"><jdoc:include type="modules" name="left" style="xhtml"/></div>
<?php endif; ?>
<div id="content">
<?php if ($this->countModules('user5 OR user6')) : ?>
<div id="user5"><jdoc:include type="modules" name="user5" style="xhtml"/></div>
<div id="user6"><jdoc:include type="modules" name="user6" style="xhtml"/></div>
<?php endif; ?>
<div id="content"><jdoc:include type="component" /></div>
<?php if ($this->countModules('bottom')) : ?>
<div id="bottom"></div>
<?php endif; ?>
<?php if ($this->countModules('user7 OR user8')) : ?>
<div id="user7"><jdoc:include type="modules" name="user7" style="xhtml"/></div>
<div id="user8"><jdoc:include type="modules" name="user8" style="xhtml"/></div>
<?php endif; ?>
</div>
<?php if ($this->countModules('right')) : ?>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml"/></div>
<?php endif; ?>
<?php if ($this->countModules('banner1 OR banner2 OR banner3')) : ?>
<div id="banner1"><jdoc:include type="modules" name="banner1" style="xhtml"/></div>
<div id="banner2"><jdoc:include type="modules" name="banner2" style="xhtml"/></div>
<div id="banner3"><jdoc:include type="modules" name="banner3" style="xhtml"/></div>
<?php endif; ?>
</div>
<div id="footer"></div>
</div>
<div id="debug"></div>
</body>
</html>
<?php ?>Ultimately I was it to work out where it looks like this:
http://default.tsgcomputers.net/default.png
Thank you for your help and God bless,
Johnathan
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 9, 2009 - 4:40pm
Thats the right idea...
That's the right idea, Jonathan. You can now set the widths and height of each div in css. Most of us are planning it out using the float property to place the divs relative to one another, although this is not needed with a lot of layouts.
Tony
July 9, 2009 - 4:44pm
Looks great!
Yes, your HTML looks great (oddly, I can read the code better than the image--I must've looked at too much code)! And now you're all ready for CSS.
There are at least a couple ways to accomplish it. Here would be the way I would do it, using CSS floats (the preferred way, IMHO). Perhaps others in the community have a way they prefer, too. If you haven't used floats, you can think of them kinda like align="left | right" on an img tag. Then you can clear them using clear:left|right|both
To get this to work right, though, there's one small tweak you'll need to make to your HTML--move the "right" section before the "content" section.
div { border:1px solid black; }
#user1, #user2, #user3, #user4, #user5, #user6, #user7, #user8 { width:48%; float:left; margin:.9%; padding:0px; }
#header { clear:left; }
#left { width:20%; float:left; clear:left; }
#content { width:55%; margin-left:22.5%; }
#right { width:20%; float:right; }
#banner1, #banner2, #banner3 { width:30%; float:left; }
#footer { clear:left; }July 9, 2009 - 4:47pm
July 9, 2009 - 5:47pm
July 9, 2009 - 6:54pm
The CSS (almost) equivalent
The CSS (almost) equivalent is text-align:center.
Unlike align="center", though, it doesn't center everything. For example, it won't center a < div > inside another element. To do that, you would style the div element to be centered (by giving it a width and assigning it margin:auto).
July 9, 2009 - 10:25pm
So then...
margin: auto; in CSS is center?
Or do you have to define both margin: auto; and a width?
Also, I want the {content} to have a variable width, whenever both the left and the right columns are not available... can this be done while keeping inside the master div element?
Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 17, 2009 - 11:46am
Still showing up valign middle
I've checked the code... and I can't seem to see where the valign is to remove it to make the content valign top. Here is what I have:
HTML
<?php
defined('_JEXEC') or die;
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
< head >
<jdoc:include type="head" />
<?php
if ( $my->id ) {
$editor = &JFactory::getEditor();
echo $editor->initialise();
} ?>
< meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
< link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" media="all" />
< /head >
<body id="body">
<br />
<table id="toptable" cellspacing="0" cellpadding="0" align="center">
<?php if ($this->countModules('user1 OR user2')) : ?>
<tr>
<td id="user1">
<jdoc:include type="modules" name="user1" style="table"/>
</td>
<td id="user2">
<jdoc:include type="modules" name="user2" style="table"/>
</td>
</tr>
<?php endif; ?>
</table>
<table id="toptable" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="header">
<a href="http://www.harvestauction.com"><div id="logo" width="30%" align="left"></div></a>
<div id="user9" width="40%" align="right">
<jdoc:include type="modules" name="user9" style="table"/>
</div>
</td>
</tr>
<?php if ($this->countModules('user3 OR user4')) : ?>
<tr>
<td id="user3">
<jdoc:include type="modules" name="user3" style="table"/>
</td>
<td id="user4" align="right">
<jdoc:include type="modules" name="user4" style="table"/>
</td>
</tr>
<?php endif; ?>
</table>
<table id="contenttable" cellspacing="0" cellpadding="0" align="center">
<?php if ($this->countModules('top')) : ?>
<tr>
<td id="top">
<jdoc:include type="modules" name="top" style="table"/>
</td>
</tr>
<?php endif; ?>
<tr>
<td>
<table width="100%">
<tr>
<?php if ($this->countModules('left')) : ?>
<td id="left">
<jdoc:include type="modules" name="left" style="table"/>
</td>
<?php endif; ?>
<td id="content">
<table>
<?php if ($this->countModules('user5 OR user6')) : ?>
<tr>
<td id="user5">
<jdoc:include type="modules" name="user5" style="table"/>
</td>
<td id="user6">
<jdoc:include type="modules" name="user6" style="table"/>
</td>
</tr>
<?php endif; ?>
<tr>
<td align="center">
<jdoc:include type="component" />
</td>
</tr>
<?php if ($this->countModules('user7 OR user8')) : ?>
<tr>
<td id="user5">
<jdoc:include type="modules" name="user7" style="table"/>
</td>
<td id="user6">
<jdoc:include type="modules" name="user8" style="table"/>
</td>
</tr>
<?php endif; ?>
</table>
</td>
<?php if ($this->countModules('right')) : ?>
<td id="right">
<jdoc:include type="modules" name="right" style="table"/>
</td>
<?php endif; ?>
</tr>
</table>
</td>
</tr>
<?php if ($this->countModules('banner1 OR banner2 OR banner3')) : ?>
<tr>
<td id="banner1">
<jdoc:include type="modules" name="banner1" style="table"/>
</td>
<td id="banner1" align="center">
<jdoc:include type="modules" name="banner2" style="table"/>
</td>
<td id="banner1" align="right">
<jdoc:include type="modules" name="banner3" style="table"/>
</td>
</tr>
<?php endif; ?>
<?php if ($this->countModules('footer')) : ?>
<tr>
<td id="footer" align="center">
<br />
<jdoc:include type="modules" name="footer" style="table"/>
</td>
</tr>
<?php endif; ?>
<tr>
<td id="debug">
<jdoc:include type="modules" name="debug" style="table"/>
</td>
</tr>
</table>
< script type="text/javascript" >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9311840-2");
pageTracker._trackPageview();
} catch(err) {}< /script >
< /body >
< /html >
< ?php ? >CSS
#body{
font-family: Arial, Helvetica, sans-serif;
color: #6c6c6c;
background: #754F00;
margin: 0px;
padding: 0px 0px 0px 0px;
line-height: 135%;
}
/* ----------------------- */
/* Global Formatting Start */
/* ----------------------- */
html{
overflow: scroll;
padding: 0px;
margin: 0px;
}
h1 {
font: normal 24px Arial, Helvetica, sans-serif;
color: #990033;
letter-spacing: -1px;
line-height: 30px;
}
h2 {
font: normal 20px Arial, Helvetica, sans-serif;
color: #b00000;
letter-spacing: -1px;
text-transform: none;
line-height: 26px;
}
h3 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #6c6c6c;
letter-spacing: 0px;
line-height: 24px;
text-transform: none;
}
h4 {
font: bold 14px Arial, Helvetica, sans-serif;
color: #747474;
line-height: 19px;
text-transform: none;
}
h5 {
font: bold 12px Arial, Helvetica, sans-serif;
color: #ff7e00;
line-height: 18px;
text-transform: none;
}
h6 {
font: bold 11px Arial, Helvetica, sans-serif;
color: #6c6c6c;
line-height: 17px;
text-transform: none;
}
a {
color: #b00000;
text-decoration: none;
}
a:hover {
color: #b00000;
text-decoration: underline;
}
a.image, a.image:hover, a img {
border:0;
}
ol {
padding: 5px 25px;
}
fieldset {
width: 95%;
padding: 5px;
border: 1px solid #eeeeee;
}
ul li {
/* padding: 2px 0px 2px 24px; */
padding: 2px 0px 2px 0px;
background: transparent url(../images/checkbox.gif) no-repeat 0px 1px;
}
ul {
list-style: none;
}
.both {
clear: both;
}
input, select, label {
}
p {
padding: 5px 0px;
}
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
color: black;
margin: 0;
}
/* --------------------- */
/* Global Formatting End */
/* --------------------- */
#toptable{
position: relative;
width: 98%;
}
#user1{
position: relative;
float: left;
padding-left: 1%;
width: 25%;
}
#user2{
position: relative;
color: #ffffff;
float: right;
padding-right: 1%;
width: 30%;
}
#header{
position: relative;
height: 150px;
background: url(<a href="http://www.harvestauction.com/logos/top_bg.gif" title="http://www.harvestauction.com/logos/top_bg.gif" rel="nofollow">http://www.harvestauction.com/...</a>) bottom left;
}
#logo{
width: 300px;
height: 150px;
float: left;
background: transparent url(<a href="http://www.harvestauction.com/logos/ha_logo_shadow.png" title="http://www.harvestauction.com/logos/ha_logo_shadow.png" rel="nofollow">http://www.harvestauction.com/...</a>) bottom left;
}
#user9{
position: relative;
padding-right: 1%;
padding-top: 1%;
height: 150px;
width: 15%;
float: right;
background: transparent;
}
#user3{
position: relative;
float: left;
padding-left: 1%;
width: 48%;
}
#user4{
position: relative;
float: right;
padding-right: 1%;
width: 48%;
}
#top{
position: relative;
/* width: 98%; */
width: 100%;
z-index: 99;
background: #754F00;
}
#contenttable{
position: relative;
width: 98%;
background: #F1F2E1;
z-index: 0;
}
#left{
position: relative;
width: 200px;
float: left;
padding-left: 10px;
}
#content{
/* width="500px" */
padding: 5px;
}
#user5{
position: relative;
float: left;
padding-left: 1%;
width: 45%;
}
#user6{
position: relative;
float: right;
padding-right: 1%;
width: 45%;
}
#user7{
position: relative;
float: left;
padding-left: 1%;
width: 45%;
}
#user8{
position: relative;
float: right;
padding-right: 1%;
width: 45%;
}
#right{
position: relative;
width: 200px;
float: right;
padding-right: 10px;
}
#banner1{
position: relative;
padding-left: 1%;
float: left;
width: 32%;
}
#banner2{
position: relative;
padding-left: 1%;
padding-right: 1%;
padding: 5px;
width: 31%;
}
#banner3{
position: relative;
padding-right: 1%;
float: right;
width: 32%;
}
#footer{
position: relative;
padding: 5px;
background: #754F00 url(<a href="http://www.harvestauction.com/logos/footer_bg.gif" title="http://www.harvestauction.com/logos/footer_bg.gif" rel="nofollow">http://www.harvestauction.com/...</a>) no-repeat top left;
width: 99%;
}
#debug{
position: relative;
background: #754F00;
color: #ffffff;
width: 100%;
}Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
July 22, 2009 - 2:15am
Use firefox with firebug
Then "inspect element" to track what styles are being applied and where they come from. That's the best way (another way is to use Safari 4 and open the web inspector and do the same thing). Just offhand, I'd say they're coming from the standard user agent style sheet in the browser.
Wish I could be more help, but I stopped doing table-based designs so long ago I've successfully managed to forget most of the tricks I used to use.
Hey everyone,
I'm working on an auction site:
harvestauction.com
I am using Joomla 1.5.12.
I've redesigned the template from the ground up and it is working great... except for the modules and content is showing up like it is valign="middle", except I didn't tell it to.
Here is my default HTML for the template:
<?php defined('_JEXEC') or die; ?> <!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <?php if ( $my->id ) { $editor = &JFactory::getEditor(); echo $editor->initialise(); } ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" media="all" /> </head> <body id="body"> <br /> <table id="toptable" cellspacing="0" cellpadding="0" align="center"> <?php if ($this->countModules('user1 OR user2')) : ?> <tr> <td id="user1"> <jdoc:include type="modules" name="user1" style="table"/> </td> <td id="user2"> <jdoc:include type="modules" name="user2" style="table"/> </td> </tr> <?php endif; ?> </table> <table id="toptable" cellspacing="0" cellpadding="0" align="center" <tr> <td id="header"> <div id="logo" width="30%" align="left"></div> <div id="user9" width="40%" align="right"> <jdoc:include type="modules" name="user9" style="table"/> </div> </td> </tr> <?php if ($this->countModules('user3 OR user4')) : ?> <tr> <td id="user3"> <jdoc:include type="modules" name="user3" style="table"/> </td> <td id="user4" align="right"> <jdoc:include type="modules" name="user4" style="table"/> </td> </tr> <?php endif; ?> </table> <table id="contenttable" cellspacing="0" cellpadding="0" align="center"> <?php if ($this->countModules('top')) : ?> <tr> <td id="top"> <jdoc:include type="modules" name="top" style="table"/> </td> </tr> <?php endif; ?> <tr> <td> <table width="100%"> <tr> <?php if ($this->countModules('left')) : ?> <td id="left"> <jdoc:include type="modules" name="left" style="table"/> </td> <?php endif; ?> <td id="content"> <table> <?php if ($this->countModules('user5 OR user6')) : ?> <tr> <td id="user5"> <jdoc:include type="modules" name="user5" style="table"/> </td> <td id="user6"> <jdoc:include type="modules" name="user6" style="table"/> </td> </tr> <?php endif; ?> <tr> <td align="center"> <jdoc:include type="component" /> </td> </tr> <?php if ($this->countModules('user7 OR user8')) : ?> <tr> <td id="user5"> <jdoc:include type="modules" name="user7" style="table"/> </td> <td id="user6"> <jdoc:include type="modules" name="user8" style="table"/> </td> </tr> <?php endif; ?> </table> </td> <?php if ($this->countModules('right')) : ?> <td id="right"> <jdoc:include type="modules" name="right" style="table"/> </td> <?php endif; ?> </tr> </table> </td> </tr> <?php if ($this->countModules('banner1 OR banner2 OR banner3')) : ?> <tr> <td id="banner1"> <jdoc:include type="modules" name="banner1" style="table"/> </td> <td id="banner1" align="center"> <jdoc:include type="modules" name="banner2" style="table"/> </td> <td id="banner1" align="right"> <jdoc:include type="modules" name="banner3" style="table"/> </td> </tr> <?php endif; ?> <?php if ($this->countModules('footer')) : ?> <tr> <td id="footer" align="center"> <br /> <jdoc:include type="modules" name="footer" style="table"/> </td> </tr> <?php endif; ?> <tr> <td id="debug"> <jdoc:include type="modules" name="debug" style="table"/> </td> </tr> </table> < script type="text/javascript" > var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); < /script > < script type="text/javascript" > try { var pageTracker = _gat._getTracker("UA-9311840-2"); pageTracker._trackPageview(); } catch(err) {}< /script > </body> </html> <?php ?>And my CSS is this:
#body{ font-family: Arial, Helvetica, sans-serif; color: #6c6c6c; background: #754F00; margin: 0px; padding: 0px 0px 0px 0px; line-height: 135%; } /* ----------------------- */ /* Global Formatting Start */ /* ----------------------- */ html{ overflow: scroll; padding: 0px; margin: 0px; } h1 { font: normal 24px Arial, Helvetica, sans-serif; color: #990033; letter-spacing: -1px; line-height: 30px; } h2 { font: normal 20px Arial, Helvetica, sans-serif; color: #b00000; letter-spacing: -1px; text-transform: none; line-height: 26px; } h3 { font: normal 18px Arial, Helvetica, sans-serif; color: #6c6c6c; letter-spacing: 0px; line-height: 24px; text-transform: none; } h4 { font: bold 14px Arial, Helvetica, sans-serif; color: #747474; line-height: 19px; text-transform: none; } h5 { font: bold 12px Arial, Helvetica, sans-serif; color: #ff7e00; line-height: 18px; text-transform: none; } h6 { font: bold 11px Arial, Helvetica, sans-serif; color: #6c6c6c; line-height: 17px; text-transform: none; } a { color: #b00000; text-decoration: none; } a:hover { color: #b00000; text-decoration: underline; } a.image, a.image:hover, a img { border:0; } ol { padding: 5px 25px; } fieldset { width: 95%; padding: 5px; border: 1px solid #eeeeee; } ul li { /* padding: 2px 0px 2px 24px; */ padding: 2px 0px 2px 0px; background: transparent url(../images/checkbox.gif) no-repeat 0px 1px; } ul { list-style: none; } .both { clear: both; } input, select, label { /* vertical-align: middle; */ } p { padding: 5px 0px; } /* --------------------- */ /* Global Formatting End */ /* --------------------- */ #toptable{ position: relative; width: 98%; } #user1{ position: relative; float: left; padding-left: 1%; width: 25%; } #user2{ position: relative; color: #ffffff; float: right; padding-right: 1%; width: 30%; } #header{ position: relative; height: 150px; background: url(<a href="http://www.harvestauction.com/logos/top_bg.gif" title="http://www.harvestauction.com/logos/top_bg.gif" rel="nofollow">http://www.harvestauction.com/...</a>) bottom left; } #logo{ width: 300px; height: 150px; float: left; background: transparent url(<a href="http://www.harvestauction.com/logos/ha_logo_shadow.png" title="http://www.harvestauction.com/logos/ha_logo_shadow.png" rel="nofollow">http://www.harvestauction.com/...</a>) bottom left; } #user9{ position: relative; padding-right: 1%; padding-top: 1%; height: 150px; width: 15%; float: right; background: transparent; } #user3{ position: relative; float: left; padding-left: 1%; width: 48%; } #user4{ position: relative; float: right; padding-right: 1%; width: 48%; } #top{ position: relative; /* width: 98%; */ width: 100%; z-index: 99; background: #754F00; } #contenttable{ position: relative; width: 98%; background: #F1F2E1; z-index: 0; } #left{ position: relative; width: 200px; float: left; padding-left: 10px; top: 0px; } #content{ width="500px" padding: 5px; top: 0px; } #user5{ position: relative; float: left; padding-left: 1%; width: 45%; } #user6{ position: relative; float: right; padding-right: 1%; width: 45%; } #user7{ position: relative; float: left; padding-left: 1%; width: 45%; } #user8{ position: relative; float: right; padding-right: 1%; width: 45%; } #right{ position: relative; width: 200px; float: right; padding-right: 10px; } #banner1{ position: relative; padding-left: 1%; float: left; width: 32%; } #banner2{ position: relative; padding-left: 1%; padding-right: 1%; padding: 5px; width: 31%; } #banner3{ position: relative; padding-right: 1%; float: right; width: 32%; } #footer{ position: relative; padding: 5px; background: #754F00 url(<a href="http://www.harvestauction.com/logos/footer_bg.gif" title="http://www.harvestauction.com/logos/footer_bg.gif" rel="nofollow">http://www.harvestauction.com/...</a>) no-repeat top left; width: 99%; } #debug{ position: relative; background: #754F00; color: #ffffff; width: 100%; }Of course yo see what I mean you can go to the site itself:
http://www.harvestauction.com
For the life of me I can't figure out why it is doing this and it is driving me NUTZ!
Thank you all and God bless,
Johnathan