CSS - Css Causing Unwanted Space In Table (was "css Problem?")

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Hi There- I have a page that I'm making for a friend (with the code below) that's a couple web hosting plans in a CSS styled table. The style.css file is also below.

If you look at the plans page above, the whole table has a giant space/gap from the text block for some reason and I really can't find out why! I'm trying to get the top of the table to be close to the bottom of the text block but all of my styling to fix this isn't working to fix the gap.

I'm wondering if anybody can offer any advice that I can use to fix this. I tried to post the URL to the site but the forums rules prohibit me from putting in a URL to the post. I've tried lots of coding changes with Firebug and the gap still stays.

Thanks for your help.

HTML Page Code:
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>
<title>Personal Hosting Plans</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="phostingstyle.css"></link>
</head>

<body>
<span class="toptext">
NextGen's personal hosting plans offer a broad variety of features for creating anything from a simple family blog or photo album to an advanced personal portfolio or blog site. Our Fantastico auto-installer allows you to install a variety of blogging, photo album, wiki or forum tools with the just click of your mouse. Or, choose from the hundreds of easy-to-edit, professional site templates in the signature RVSiteBuilder to make your website.<p> The features included on NextGen personal hosting accounts allow you to have all the tools you need right at your fingertips to create exactly the site you're looking for- what are you waiting for? Contact NextGen Sales if you have questions, or take a look at our selection of personal plans below.<p> Looking for business hosting that includes advanced eCommerce, blogging and website creation tools? Click here.
</span>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="personalhostingplans">
  <tr class="planheaders">
    <th width="174" height="147" scope="col">&nbsp;</th>
    <th width="154" class="planheaderslite" scope="col"><span class="plantitles"><strong>LITE</strong></span>      <p class="price">$3<span class="subprice">49</span></p></th>
    <th width="159" class="planheadersdeluxe" scope="col"><span class="plantitles"><strong>DELUXE</strong></span>      <p class="price">$4<span class="subprice">99</span></p></th>

    <th width="154" height="50" class="planheaderssuper" scope="col"><span class="plantitlessuper"><strong>SUPER</strong></span>      <p class="pricesuper">$6<span class="subpricesuper">99</span></p></th>
    <th width="159" class="planheaderspremier" scope="col"><span class="plantitles"><strong>PREMIER</strong></span>      <p class="price">$10<span class="subprice">99</span></p></th>
  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">main features</th>

    <td class="toplitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="topdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="topsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Super Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="toppremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></a></div></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Disk Space</th>
    <td class="individualfeatsdark"><strong>.</strong>3GB</td>

    <td class="individualfeatsdark">1.7GB</td>
    <td class="individualfeatsdarksp">2.8GB</td>
    <td class="individualfeatsdark">3.5GB</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Bandwidth/Data Transfer</th>
    <td class="individualfeatslight">1.5GB</td>

    <td class="individualfeatslight">2.8GB</td>
    <td class="individualfeatlightsp">3.6GB</td>
    <td class="individualfeatslight">4.3GB</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row"><strong>Website Builder</strong></th>
    <td class="individualfeatsdark">-</td>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">FREE Domain Name</th>
    <td class="individualfeatslight">-</td>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatlightsp">-</td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Advanced Email Accounts</th>
    <td class="individualfeatsdark">2</td>

    <td class="individualfeatsdark">4</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row"><strong>cPanel Control Panel</strong></th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row"><strong>Fantastico Auto-Installer</strong></th>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>

  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">OTHER FEATURES</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>

  <tr>
    <th class="featurelistdark" scope="row"><strong>Satisfaction Guarantee</strong>*</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>

    <th class="featurelistlight" scope="row">phpMyAdmin</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">MySQL Databases</th>

    <td class="individualfeatsdark">1</td>
    <td class="individualfeatsdark">3</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">FTP Accounts</th>

    <td class="individualfeatslight">1</td>
    <td class="individualfeatslight">3</td>
    <td class="individualfeatlightsp">Unlimited</td>
    <td class="individualfeatslight">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Subdomains Allowed</th>

    <td class="individualfeatsdark">1</td>
    <td class="individualfeatsdark">5</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Parked/Addon Domains Allowed</th>

    <td class="individualfeatslight">1</td>
    <td class="individualfeatslight">5</td>
    <td class="individualfeatlightsp">Unlimited</td>
    <td class="individualfeatslight">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">eCommerce Enabled</th>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="individualfeatslight">&nbsp;</td>

    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">DEVEloper features</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>

    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Hotlink Protection</th>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Password Protection</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Unlimited Redirects</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>

  <tr>
    <th class="featurelistlight" scope="row">IP Address Denial</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>

    <th class="featurelistdark" scope="row">Custom Site Error Pages</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">SSH/Shell/SFTP Access</th>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatslight">-</td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Full Ruby on Rails and RubyGem Support</th>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Advanced Visitor Statistics and Logging</th>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Latest Server Modules, Software and Configuration</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="bottomlitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="bottomdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="bottomsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>

    <td class="bottompremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></div></td>
  </tr>
</table>

</body>

</html>

CSS Page Code:
Code:

@charset "utf-8";
/* CSS Document */

body {
	font-family:Arial, Helvetica, sans-serif;
}

personalhostingplans {
	border-collapse:collapse;
}

.toptext {
	font-family:"Lucida Grande",Tahoma,Arial,Verdana;
	line-height:150%;
	font-size:11px;
	color: #666666;
}

.planheaderslite {
	background-color: #FFFFFF;
	background-image:url(images/lite_header.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.planheadersdeluxe {
	background-color: #FFFFFF;
	background-image:url(images/deluxe_header.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.planheaderssuper {
	background-color: #FFFFFF;
	background-image:url(images/superheaderdeal.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.planheaderspremier {
	background-color: #FFFFFF;
	background-image:url(images/premier_header.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.price {
	position:relative;
	top:52px;
	font-size:48px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
}

.subprice {
	position:relative;
	font-size:20px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
	vertical-align:super;
}

.pricesuper {
	position:relative;
	top:32px;
	font-size:60px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
}

.subpricesuper {
	position:relative;
	font-size:25px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
	vertical-align:super;
}

.individualfeatsdark {
	background-color: #C5E7ED;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}
.individualfeatslight {
	background-color:#DEF6F7;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.featurelistdark {
	background-color:#E9E9E9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	font-weight:normal;
	padding:6px 14px 6px 0px;
}

.featurelistlight {
	background-color: #F4F4F4;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	font-weight:normal;
	padding:6px 14px 6px 0px;
}

.featurelistmainfeature {
	background-color: #FFFFFF;
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
	color: #14A5E1;
	padding:6px 6px 6px 6px;
}

.individualfeatsdarksp {
	background-color: #B4E3E9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.individualfeatlightsp {
	background-color: #C3EFEF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.signup {
	text-align:center;
	padding: 3px 3px 3px 3px;
}

img {
	border-style:none;
}

.plantitles {
	position:relative;
	color: #000000;
	top:105px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:normal;
	color: #FFFFFF;
	left:5px;
}

.plantitlessuper {
	position:relative;
	color: #000000;
	top:91px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:normal;
	color: #FFFFFF;
	left:5px;
}

.toplitesignupbg {
	background:url(images/litetoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.topdeluxesignupbg {
	background:url(images/deluxetoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.topsupersignupbg {
	background:url(images/supertoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.toppremiersignupbg {
	background:url(images/premiertoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomlitesignupbg {
	background:url(images/litebottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomdeluxesignupbg {
	background:url(images/deluxebottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomsupersignupbg {
	background:url(images/superbottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottompremiersignupbg {
	background:url(images/premierbottomrounded.png);
	background-position:right;
	background-repeat:no-repeat;
}

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

Hi,

I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly.

When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is.

The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly?

It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also?

Thanks.

Hi there,

I'm back again I'm afriad with another minor problem with my new site design.

Have a look at the test version of my website he
http://www.eveythingfree.buildtolearn.net/classifieds/

If you are looking at it in Internet Explorer it should look fine, but if you try it in Mozilla Firefox or Netscape it looks badly messed up.

The problem is with the 2 boxes near the top of the page, the "latest forum posts" one and the "search box". The whole page (from bellow the navbar) is laid out by the php script that generates most of the content of the site. Thus I am limited in what I can adjust but I can use .css to layout these two boxes. Here is the css that controls the forum and search boxes:


Code:

.forums { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #666666; 
text-decoration: none; 
border: 1px solid #666666; 
padding: 5px 10px 10px; 
background-color: #F9F9F9; 
position: relative; 
width: 453px; 
height: 100px; 
left: 10px; 
top: 10px;  
vertical-align: top; 
margin-bottom: 10px;
float: left;
}

.searchbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	border: 1px solid #666666;
	background-color: #F9F9F9;
	width: 230px;
	height: 100px;
	left: 20px;
	vertical-align: top;
	margin-bottom: 10px;
	padding-top: 15px;
	top: 10px;
	position: relative;
  
} 

.listings {
	position: relative;
	top: 10px;
}

Now I'm pretty sure that the problem lies with the "float" property in .forums. I seem to recall Mozilla and Netscape don't recognise this in the same way IE does.

Is there a way of making the site look the same in other browsers as it does in IE? Without the "float" property I have failed to get it to look right, but there must be some way around this problem.

I'd really appreciate any help, as this one thing has been holding me back for ages!


Thanks,
Robert

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

Hey there, I'm having a bit of a problem and I was wondering if any of the wizards here can help me.

I'm trying to use TinySlideshow (leigeber.com/2008/12/javascript-slideshow/)

I've downloaded TinySlideshow and I've done a little bit of editing to spacing/colouring, and swapped in my own images. I had this as a basic working "demo" page on my own pc, and it worked completely fine in all the popular browsers.

The problem is that I've built the frontpage of my new website, and I want to have a slideshow running to display a preview of the newest articles on my website;

paulietheboss.com

(Please note, none of the links etc work, this is just a dummy page for the time being)

If you view that in Firefox or Chrome you'll see that the Slideshow works just perfectly. There is an issue with Opera but I'll get to that at the end.

However, in Internet Explorer the large images just don't display at all. I've had a couple of coder friends try and troubleshoot it by introducing javascript alerts in order to check variables are being populated properly etc, but they can't find the problem. It doesn't make sense anyway since it works in other browsers.

Thing is, when I have the slideshow on a page by itself it works just fine, even in IE, but when I put it anywhere on this page (even outside of the main page content) it does not display the large image in Internet Explorer.

This leads me to believe that my css is possibly causing a conflict somewhere.. I can't think of anything else it can be.

Has anyone got any ideas I can try to get this working properly in IE? We must have been trying different things for 8-10 hours now and it's driving me insane, especially since it looks just perfect in Firefox!

Sidenote: in Opera on loading, only the first two thumbnails appear, but if you refresh the page it's all fine, any ideas on this one? Not as important, but still...

How can I put "padding" around my div/table using CSS? I tried left padding, right padding and so on but it doesn't seem to effect it and the text is right next to the edge of the div/table so it looks really bunged up!

My issue is the area around the image. It's the background color so i'm pretty sure it's not a border, I tried messing around with margins. Bottom line, I want my image (header panel) to be flush with the top and sides of the browser!



Here's my code:

<html>
<head>
<style type="text/css">
body {
background-color: #282627;
font-family: sans-serif;
}

img.hdr {
height: 53px;
width: 100%;
}
</style>
</head>


<body>

<img src="HeaderImage.gif" class=hdr>

</body>

</html>


Just starting out so I appreciate it!

While previewing my project I'm working on in Opera, I can't see the ' Background Color ' . I can see it fine in IE and Firefox, but darn if that Opera isn't giving me a hard time.

I had checked my code twice to see if it's correct, it's seems fine. by the way, I am using Dreamweaver as my editor.

Can anyone help me out on this issue?

Thank you

I am using XAMPP, my project is not online. Here is the following code >>>>>

Code:

<body>
<div id="mainBody-wrap" class="clearfix" >
	<div id="social-container"> 
		<div id="social">
    		<div id="socialNav">
        		<ul id="socialList">
            		<li class="rss" title="Subscribe by RSS"><a href="#" target="_self"></a></li>
                	<li class="delicious" title="Bookmark us using Delicious"><a href="#" target="_blank"></a></li>
                	<li class="facebook" title="Join us on Facebook"><a href="#" target="_blank"></a></li>
                	<li class="twitter" title="Follow us on Twitter"><a href="#" target="_blank"></a></li>
            	</ul>
      		</div>
        	<div id="googlePlus">
        		<!-- Place this tag where you want the +1 button to render -->
				<g:plusone size="small" annotation="none"></g:plusone>

				<!-- Place this render call where appropriate -->
				<script type="text/javascript">
  					(function() {
    					var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   				    	po.src = 'https://apis.google.com/js/plusone.js';
   				    	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 				 	})();
				</script>
        	</div>
        	<div id="infoNav">
        		<ul id="infoList">
            		<li><a href="#" target="_self">Message Board</a></li>
                	<li><a href="#" target="_self">Help FAQ</a></li>
                    <li><span>[&nbsp;</span><a href="#" target="_self">Rules</a><span>&nbsp;]</span></li>
                	<li><a href="#" target="_self">Contact Us</a></li>
            	</ul>
        	</div>
    	</div>
	</div><br style="clear:both" />
    <div id="hdr-container">
    	<div id="hdr">
        	<div id="searchBox">
            	
            </div>
	 	</div>
    </div>    
</div>
</body>

Code:

html, body {
	height: auto;
	width: 100%;
		
}

body {
	background-color: #161616;
	font-family: " Lucida Grande ", " Verdana ", sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;	
}

		/* Begin #mainBody-Wrap */
		
#mainBody-wrap {	
	width: 100%;		
}

		/* begin #social-container */
		
#social-container {		
	width: 100%;
	background-color: #0F0F0F;
	border-bottom: 1px solid #000000;
}		
		
		/* end #social-container */	

		/* begin #social */
				
#social {		
	width: 810px;
	height: 27px;	
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}		
		
		/* end #social */
		
		/* begin #socialNav */
		
#socialNav {
	width: 95px;
	height: 27px;
	float: left;	
}

		/* end #socialNav */
		
		/* begin #socialList */
		
#socialList {
	width: 95px;
	height: 16px;
	position: relative;
	top: 5px;
}

#socialList li {
	position: absolute;
	top: 0;
}

#socialList li, #socialList a {
	height: 16px;
	display: block;
}

.rss {
	background: url(../images/sprite-ln1.png) no-repeat scroll 0 0 transparent;
	width: 16px;
	left: 0;
}

.delicious {
	background: url(../images/sprite-ln1.png) no-repeat scroll -16px 0 transparent;
	width: 16px;
	left: 27px;
}

.facebook {
	background: url(../images/sprite-ln1.png) no-repeat scroll -32px 0 transparent;
	width: 16px;
	left: 52px;
}

.twitter {
	background: url(../images/sprite-ln1.png) no-repeat scroll -48px 0 transparent;
	width: 16px;
	left: 78px;
}

#googlePlus {		
	float:left;
	margin: 6px 0 0 8px;
}						
		
		/* end #socialList */		
		
		/* begin #infoNav */
		
#infoNav {
	width: 370px;
	height: 27px;
	float: right;
}		
		
		/* end #infoNav */
		
		/* begin #infoList */
		
#infoList {
	margin: 5px 0 0 0;
	text-align: right;
}	

#infoList li { 
	display: inline;
	margin: 0 0 0 18px;
		
}

#infoList li a {
	color: #FFFFFF;
}

#infoList li a:hover {
	color: #DDDDDD;
}

#infoList li span {
	font-weight: bold;
	color: #990000;
}
	
		/* end infoList */		
		
		/* begin #hdr-container */
		
#hdr-container {
	width: 810px;
	margin: 0 auto;
}		
		
		/* end #hdr-container */		

		/* begin #hdr */
		
#hdr {
	width: 100%;
	height: 155px;	
}		
		
		/* end #hdr */
		
		/* begin #searchBox */
		
#searchBox {
	width: 421px;
	height: 37px;		
	margin: 5px 0 0 0;	
	display: block;
	float: right;
}




		
		/* end #searchBox */		
		
		/* End #MainBody-Wrap */
		
		/* Begin ClearFix */
		
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	display: inline-table;
}

		/* Hides from IE-mac \*/

* html .clearfix {	
	height: 1%;
}

.clearfix {
	display: block;
}

		/* End hide from IE-mac */	

Website: http://2htts.com/CATBlog

CSS: http://2htts.com/CATBlog/skins/default/CATBlog0.1.css

Problem: Firefox displays this site, basically perfect, except for a space at the top of the page, above the header. IE and NN each have a fair number of problems.

I've grabbed much of my CSS from various places. I have to admit, my eyes are sore and tired, and I'm a bit frustrated, trying to find what the problems are. Not that I'm any expert at cross-browser hacks for CSS, anyway...

Any help is greatly appreciated.

I have been told by a client that my dreamweaver-generated drop-down Javascript menu goes behind the flash movies in Safari.
HERE IS THE LINK

Since I am not using absolute <divs /> is there any to control the "Z" index to make sure the drop down menu goes above the flash movie?

Thanks.