PDA

View Full Version : Help with first time css site

jcran
28th November 07, 07:34 PM
Everything comes out fine on IE7, but Firefox has it all messed up.

Does anyone know where my mistakes are?

Here is the web page http://www.polkcountygolf.com/site3.html

Here is the CSS:

BODY {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
margin-top: 5px;
margin-left: 0px;
font-family: Arial,Helvetica,sans-serif;
background-color: #61834F;
font-size: 12px;

}

#menutop {
width:774px;
background-position:top;
background-repeat:no-repeat;
}

#header1 {
width:774px;
height:106px;
background-image: url(images/site3_01.jpg);
background-position:top;
background-repeat:no-repeat;
}

#menu1 {
width:774px;
background-image: url(images/site3_02.jpg);
background-position:top;
background-repeat:repeat;
padding: 2px 2px 2px 2px;
}

#maincontent {
width:774px;
height:inherit;
background-image: url(images/site3_03.jpg);
background-position:top;
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
}

.left {
float:left;
width: 200px;
text-align:left;
padding: 0px 4px 10px 10px;
}

.right {
float:right;
padding: 0px;
top: 0px;
width: 570px;
text-align:left;
padding: 0px 10px 10px 4px;

}

#footer {
width:774px;
height:34px;
background-image: url(http://www.polkcountygolf.com/images/site3_09.jpg);
background-position:top;
background-repeat:no-repeat;
padding: 0px 0px 0px 0px;
}

h1, h2 {
font-family: Arial,Helvetica,sans-serif;
text-align: left;
font-size: 16px;
margin-bottom: 0px;

}

h3, h4 {
font-family: Arial,Helvetica,sans-serif;
margin-left: 0px;
margin-bottom: 0px;
}

h5, h6 {
font-family: Arial,Helvetica,sans-serif;
text-align: Left;
margin-left: 0px;
margin-bottom: 0px;
}

P {
font-family: Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-right: 0px;
font-size: 12px;
}
li {
font-family: Arial, Helvetica, sans-serif;
}
tr, td, th {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}

a:link,a:active,a:visited { color : #CC0000; }
a:hover { text-decoration: underline; color : #3333CC; }
hr { height: 0px; color: #CCCCCC}


/* FORM STYLES */
INPUT, select, textarea, text {
border: 1px #006699 groove;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border-color: #000000;
border-style: solid;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("images/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("images/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

#tabsC #current a {
background-position:0% -42px;
}
#tabsC #current a span {
background-position:100% -42px;
}
simonpeterong
29th November 07, 07:28 PM
kindly point out the problem you encountered so that we can locate it immediately upon vieweing your work so that we can come up with the solution if we can help you out. :)
bacalao
1st December 07, 08:01 PM
You need to clear your floats and allow for padding when specifying width.

Try this:

<!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=iso-8859-1" />
<title>problem site</title>


<style type="text/css">
* {
margin:0px;
padding:0px;

}

body {
text-align: center;
margin-top: 5px;
margin-left: 0px;
font-family: Arial,Helvetica,sans-serif;
background-color: #61834F;
font-size: 12px;

}

#menutop {
width:774px;
}

#header1 {
width:774px;
height:106px;
background-image: url(images/site3_01.jpg);
background: url(images/site3_01.jpg) top left no-repeat;
}

#menu1 {
width:770px;
background-image: url(images/site3_02.jpg);
background-position:top;
background-repeat:repeat;
padding: 2px 2px 2px 2px;
}

#maincontent {
width:774px;
height:inherit;
background-image: url(images/site3_03.jpg);
background-position:top;
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
}

.left {
float:left;
width: 186px;
text-align:left;
padding: 0px 4px 10px 10px;
}

.right {
float:right;
padding: 0px;
top: 0px;
width: 556px;
text-align:left;
padding: 0px 10px 10px 4px;
}

#footer {
width:774px;
height:34px;
background-image: url(http://www.polkcountygolf.com/images/site3_09.jpg);
background-position:top;
background-repeat:no-repeat;
padding: 0px 0px 0px 0px;
}

h1, h2 {
font-family: Arial,Helvetica,sans-serif;
text-align: left;
font-size: 16px;
margin-bottom: 0px;

}

h3, h4 {
font-family: Arial,Helvetica,sans-serif;
margin-left: 0px;
margin-bottom: 0px;
}

h5, h6 {
font-family: Arial,Helvetica,sans-serif;
text-align: Left;
margin-left: 0px;
margin-bottom: 0px;
}

P {
font-family: Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-right: 0px;
font-size: 12px;
}
li {
font-family: Arial, Helvetica, sans-serif;
}
tr, td, th {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}

a:link,a:active,a:visited { color : #CC0000; }
a:hover { text-decoration: underline; color : #3333CC; }
hr { height: 0px; color: #CCCCCC}

#container {
margin: 0 auto;
width: 774px;
}

/* FORM STYLES */
INPUT, select, textarea, text {
border: 1px #006699 groove;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border-color: #000000;
border-style: solid;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
width:774px;
font-size:93%;
line-height:normal;
float: left;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("images/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("images/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

#tabsC #current a {
background-position:0% -42px;
}
#tabsC #current a span {
background-position:100% -42px;
}
.clear {
clear: both;
overflow: hidden;
height: 1px;
}

-->
</style>
</head>
<BODY>
<div id="container">
<div id="menutop">
<div id="tabsC">
<ul>
<!-- CSS Tabs -->
<li><a href="http://www.polkcountygolf.com/"><span>Home</span></a></li>
<li><a href="http://www.polkcountygolf.com/golfcourses/index.php"><span>Golf Courses</span></a></li>
<li><a href="http://www.polkcountygolf.com/golfpackages/index.php"><span>Golf Packages</span></a></li>
<li><a href="http://www.polkcountygolf.com/golftournaments/index.php"><span>Golf Tournaments</span></a></li>
<li><a href="http://www.polkcountygolf.com/floridagolfnews.html"><span>Florida Golf News</span></a></li>
<li><a href="http://www.polkcountygolf.com/contact.html"><span>Contact Us</span></a></li>
</ul>

</div>
</div>
<div class="clear"></div>
<div id="header1"></div>
<div id="menu1"> </div>
<div id="maincontent">
<div class="left">
<p>This is the left side text area for additional links and ads </p>
</div>

<div class="right">
<p>This is the main area for content</p>
<p>jaksdjj jdfoiadofijjiufhpwaeiufn fhasufhpahfuha fuhduhapoihfpoh foiadoaoidfoiaf foijfoa h foah dfh daf hfoidof aidhfopashopifhaohfh aoidfohaoidoiasdoifhoiahd hdoifapoisdhoihd fhadoifho dsaoi</p>
<p>joidihdsfhs foih sfhoidhfho adihfoihadoifoid </p>
</div>
<div class="clear"></div>
<!-- ImageReady Slices (site3.psd) -->
<table width=774 border=0 align="center" cellpadding=0 cellspacing=0>
<tr>

<td COLSPAN=5 valign="top" background="http://www.polkcountygolf.com/images/site3_03.jpg"></td>
</tr>
<tr>
<td><a href="http://www.polkcountygolf.com/"><img src="http://www.polkcountygolf.com/images/site3_04.jpg" ALT="" width=122 height=75 border="0"></a></td>
<td><a href="http://www.polkcountygolf.com/golfcourses/index.php"><img src="http://www.polkcountygolf.com/images/site3_05.jpg" ALT="" width=167 height=75 border="0"></a></td>
<td><a href="http://www.polkcountygolf.com/golfpackages/index.php"><img src="http://www.polkcountygolf.com/images/site3_06.jpg" ALT="" width=167 height=75 border="0"></a></td>
<td><a href="http://www.polkcountygolf.com/golftournaments/index.php"><img src="http://www.polkcountygolf.com/images/site3_07.jpg" ALT="" width=167 height=75 border="0"></a></td>
<td><a href="http://www.polkcountygolf.com/contact.html"><img src="http://www.polkcountygolf.com/images/site3_08.jpg" ALT="" width=151 height=75 border="0"></a></td>
</tr>

</table>
<!-- End ImageReady Slices -->
<div id="footer"></div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</BODY>
</HTML>





Cheers,
Bacalao