Page 1 of 1

CSS Affecting Tables?

Posted: Sun Mar 28, 2010 4:29 pm
by carleihar
For some reason my new CSS sheet is causing problems with my tables. I just don't know whats going on. Any help?

Here is my CSS code:

Code: Select all

@charset "utf-8";

/* set global default properties to ensure they are equal for all browsers */
* {
    clear: none;
    margin: 0;
    padding: 0;
}
#container * {
    float: left;
}
/* end global style */

body {
    float: none;
    background-color: #fff;
    background-image: url(http://liveequian.com/images/background.png);
    background-repeat: repeat-x;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 70%;
    color: #522f40;
    /*text-align: center;*/
    padding: 0px;
    margin: 0px;
}

/* make sure default tags don't float and have the correct clear properties */
#container br {
    clear: both;
    float: none;
}
#container a img, button {
    border: none;
    background-color: transparent;
}
#container h1, #container h2, #container strong, #container i, #container b {
    float: none;
    font-size: 100%;
    margin: 0;
    padding: 0;
}
/* end default tags */


/* utility tags */
#container .bold {
    font-weight: bold;
    float: none;
}
#container .clear {
    display: block;
    clear: both;
    float: none;
    margin-bottom: 3px;
}
#container .clearL {
    width: 270px;
    display: block;
    clear: both;
    float: none;
    margin-bottom: 5px;
}
#container .clearR {
    width: 220px;
    display: block;
    clear: both;
    float: none;
    margin-bottom: 5px;
}
#container .pink {
    color: #ac4269;
    float: none;
}
#container #submit, .submit {
    margin-top: 20px;
}
#container .rss {
    margin: 6px;
}
/* end utility tags */


/* there are four nested main containers */
#container {
    float: none;
    width: 1018px;
    margin: auto;
    text-align: left;
}
#shadow {
    float: left;
    width: 1018px;
    padding: 0px 43px 0px 43px;
    background-color: transparent;
    background-position: left;
    background-image: url(http://liveequian.com/images/shadow.png);
    background-repeat: repeat-y;
}
#bg {
    width: 1018px;
    background-repeat: repeat-x;
    background-color: transparent;
}
#content {
    width: 1018px;
    background-repeat: repeat-y;
    background-color: white;
}

#content .maincontent {
    height: 500px;
    width: 810px;
    margin: 0;
    padding: 0;
	background-color:#FF0000;
	float: left;
}

#content .header {
    height: 173px;
    width: 1018px;
    margin: 0;
    padding: 0;
    background-image: none;
}

#content .login {
    height: 120px;
    width: 208px;
    margin: 0;
    padding: 0;
    background-image: url("http://liveequian.com/images/plaque.jpg");
	float: left;
	clear:both;
}

.loginBold {
	font-weight:bold;
	color:#8a7536;
}	


/* end main containers */


/* navigation */

#mainnav {

	width: 208px;
	
}

#leftCol {
	width:208px;
	background-color:#d3e298;
}

#centerCol {
	width:810px;
	background-color:#FFFFFF;
}

dl.navigation{
    width:208px;
    float:none;
    clear:both;
    margin:0;
    padding:0;
	list-style-type:none;}

dl.navigation dt{
    width:208px;
    clear:both;
    float:none;
    _width:208px;/*hack for IE*/
    cursor:pointer;
    display:block;
    margin:0;
    padding:0;
    background-color:white;
    border-width:0px;}



#mainnav a.rollover {
	display: block;
	width: 208px;
	height: 22px;
	text-decoration: none;
	}

#mainnav a.rollover:hover {
	background-position: -208px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}



a.rollover:link, a.rollover:visited {
    background-color: white;
}
a.rollover:hover, a.rollover:active {
    background-color: #DDDDFF;
}

/* end navigation */



/* end central subcontainers / main content */

/* footer styles */

#content .footer {
    height: 96px;
    width: 1018px;
    margin: 0;
    padding: 0;
    background-image: none;
}

#footer a:link, #footer a:visited {
    color: #95999b;
    text-decoration: none;
    float: none;
}
#footer a:hover, #footer a:active {
    color: #886174;
}


And the main template for my pages:

Code: Select all

<!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>Live Equian</title>

  <!--[if lt IE 7]>
<style type="text/css">
body {
background-image: none;
}
#content {
width: 1018px;
background-image: url(images/checkers.gif);
background-repeat: repeat-y;
}
</style>
        <![endif]-->
 
<link rel="stylesheet" type="text/css" href="includes/new_style.css" lang="EN" />
</head>

<body>


<div id="container">
       <div id="shadow">
          <div id="bg">
                    <div id="content">
                      <div class="header">
                        
                        <a href="index.php"><img src="images/hillimage.jpg" width="1018" height="173" alt="Live Equian" /></a>
                        
                      </div>
                      <div id="leftCol">
                     
                     <div class="login">
                        
                       
                        
                        
                        
                        </div><!--end login div-->
                     
                     
                     
                     
    
                          <div id="mainnav">
                          
                          
                          	<dl class="navigation">
                            	<dt><img src="../images/btn_mybarn.jpg" /></dt>
                                	<dd><a href="../train.php" class="rollover" style="background-image: url(../images/btn_trainhorses.jpg)" title="Train"><span class="displace">Train</span></a></dd>
                                    <dd><a href="../feedhorses.php" class="rollover" style="background-image:url(../images/btn_feedhorses.jpg)" title="Feed"><span class="displace">Feed</span></a></dd>
                                    <dd><a href="../viewriders.php" class="rollover" style="background-image:url(../images/btn_viewriders.jpg)" title="View Riders"><span class="displace">View Riders</span></a></dd>
                                <dt><img src="../images/btn_compete.jpg" /></dt>
                                	<dd><a href="../viewallshows.php" class="rollover" style="background-image:url(../images/btn_entershow.jpg)" title="Enter Show"><span class="displace">Enter Show</span></a></dd>
                                    <dd><a href="../viewresults.php" class="rollover" style="background-image:url(../images/btn_viewresults.jpg)" title="View Results"><span class="displace">View Results</span></a></dd>
                                <dt><img src="../images/btn_world.jpg" alt="World" /></dt>
                                	<dd><a href="../forumindex.php" class="rollover" style="background-image:url(../images/btn_forum.jpg)" title="Forum"><span class="displace">Forum</span></a></dd>
                            	<dt><img src="../images/btn_myaccount.jpg" /></dt>
                            		<dd><a href="#" class="rollover" style="background-image:url(../images/btn_changepass.jpg)" title="Change Password"><span class="displace">Change Password</span></a></dd>
                            </dl>
                              
                              
                        </div><!--end mainnav div-->
         
               
               
			</div><!--end left col div-->
            
            <div id="centerCol">
            
            
            
            ALL MAIN CONETENT HERE
            
            
            
            
                           	</div>
                <div class="footer">
                
                footer
                
                </div>  
            </div> <!--end content div-->
              
		</div> <!--end bg div-->
	</div> <!--end shaddow div-->
</div>    <!--end container div-->






</body>
</html>

Re: CSS Affecting Tables?

Posted: Mon Mar 29, 2010 2:52 pm
by kaszu
There are no tables in your template and there are no style for tables in css.
Also you should explain what is the problem, then you will get an answer more likely.

Re: CSS Affecting Tables?

Posted: Thu Apr 29, 2010 11:37 am
by kaszu
You think wrong.