WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Help with first time css site

Reply
  Thread Tools Display Modes
Old 28th November 07, 07:34 PM   #1
jcran
WLC Member
 
Join Date: Nov 2007
Posts: 1
Default Help with first time css site
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;
}
jcran is offline   Reply With Quote
Old 29th November 07, 07:28 PM   #2
simonpeterong
WLC Lover
 
Join Date: Sep 2007
Location: Philippines
Posts: 323
Default Re: Help with first time css site
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.
simonpeterong is offline   Reply With Quote
Old 1st December 07, 08:01 PM   #3
bacalao
WLC Member
 
Join Date: May 2006
Posts: 10
Default Re: Help with first time css site
You need to clear your floats and allow for padding when specifying width.

Try this:
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=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
Last edited by bacalao; 1st December 07 at 08:04 PM. Reason: forgot to say cheers!
bacalao is offline   Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 05:58 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.