First CSS project

cowcutta · March 16, 2006

OK..I've ventered too far in the webdesign realm I think... I've been learning PHP, mySQL and CSS.I have a problem with my CSS.It doesn't display the same in IE as it does in FF. I have no idea what it looks like in Netscape as I don't have that program..I'm pretty sure I must be doing something wrong, or I should be adding something that I"m not...anyways.. here is my site: http://www.herding.ca and here is my CSS code:

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */  body { background-repeat: repeat-y;    z-index: 1;    opacity: 1    }  .title { background-repeat: no-repeat;    margin-top: 0%;    padding-top: 0%;    z-index: 111;    position: relative;    background-color: rgb(255, 237, 183);    background-image: url('images/intro.gif');    background-position:  center 50%;    height: 125px;    top: -10px;    left: -8px;    width: 1005px    }  .title2 { border-bottom: 4px groove rgb(0, 0, 163);    z-index: 111;    width: 817px;    margin-top: -10px;    margin-left: 179px;    }  .topper { background-repeat: no-repeat;    background-position: left top;    margin-left: 0px;    float: none;    padding-left: 0px;    padding-top: 0px;    display: block;    visibility: visible;    height: 253px;    top: 0px;    left: 0px;    margin-top: 0px;    position: absolute;    background-image: url('images/logo.gif');    width: 100%;    z-index: 112    }  .text { font-family: Times New Roman,Times,serif;    height: 100%;    margin-left: 200px;    margin-right: 50px;    padding-right: 75px;    overflow: visible;    position: relative;    top: 0px;    z-index: 112 ! important;    margin-top: -850px;    padding-right: 75px;    width: 690px;    }  .menu { border-right: 4px groove rgb(0, 0, 163);    position: relative;    margin-left: -10px;    padding-top: 150px;    padding-bottom: 75px;    background-color: rgb(255, 237, 183);    margin-top: -5px;    height: 110%;    z-index: 111;    width: 200px;    }  .clear  {    margin : 0pt;    padding : 0pt;    clear : both;    line-height : 0pt;    Height : 0pt    }

My other problem is that my "menu" div doesn't extend all the way down the page with the body, you can see this on the search page.Thanks:) If you can help me, I'll let you make fun of me:) HA HA...jen

raimo · March 16, 2006

My other problem is that my "menu" div doesn't extend all the way down the page with the body, you can see this on the search page.Thanks:) If you can help me, I'll let you make fun of me:) HA HA...jen
<{POST_SNAPBACK}>

No time to check 1st. but the second one is clear. In the middle of the code is second html-head-body system

<div class="topper"></div><div class="menu"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  <title>Canada's Herding & Stock Dog Portal</title></head><body><center>Out Run Lift & Fetch<br>Search For:</center>

Head -section can be only at once in document. And there is a-tags whitout </a>etc.I think You should use W3C validators and even some text-based editor. a VERY good tool to find errors is Firefox browser with Tidy-extensionplease look: http://users.skynet.be/mgueury/mozilla/

kurtsfar · March 16, 2006

Yes, as mentioned you have 2 head sections, but ur also have 2 doctypes. My guess is this correcting this would clear both of your problems. You should never start searching for bugs in the CSS code before you have validated your markup, it will take eons...

cowcutta · March 16, 2006

OK...I know where those extra headers and what not come from.. I have some includes on those pages as I worked on my php/myqsl first, then my layout after, and just used php includes to bring in other .php files... which have those headers and such in them...I"ll work on that... Thanks.. I would have never thought of that.. (I kept looking at the acutal source code that I created and not the source code that was generated after using the includes!)As for validators.. I downloaded the Tidy one.. but I don't really get it... Are there any others out there that you all can suggest?Jen

aspnetguy · March 16, 2006

OK...I know where those extra headers and what not come from.. I have some includes on those pages as I worked on my php/myqsl first, then my layout after, and just used php includes to bring in other .php files... which have those headers and such in them...I"ll work on that... Thanks.. I would have never thought of that.. (I kept looking at the acutal source code that I created and not the source code that was generated after using the includes!)As for validators.. I downloaded the Tidy one.. but I don't really get it... Are there any others out there that you all can suggest?Jen
<{POST_SNAPBACK}>

You do not need to add the header stuff on your include. They will inherit the ones from the page you are including them in.What they mean by validator is the ones fro W3CHTML - http://validator.w3.org/CSS - http://jigsaw.w3.org/css-validator/

cowcutta · March 17, 2006

Ok.. I started cleaning up and validating my code...thanks guys:) Its much appreciated:)I did run into some trouble on the first of my mysql/php pages that I started cleaning up (found out I had to be really careful, as while some of the tags didn't validate, the page would work after I fixed it)...This is the main page:Main PageHere is the actual code that I have typed in:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>   <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  <title>Herding Event Submission</title>  <link rel="stylesheet" href="stv.css" type="text/css"></head><body><div class="title"></div><div class="title2"></div><div class="topper"></div><div class="menu"><? include("menu.html") ?></div><div class="text"><? include("oldeventsub.htm") ?></div></body></html>

Now.. the form itself is being pulled off of this page Submission Form IncludeAnd here is that code:

<HEAD><style type="text/css">@import url(calendar-win2k-1.css);</style><script type="text/javascript" src="calendar.js"></script><script type="text/javascript" src="lang/calendar-en.js"></script><script type="text/javascript" src="calendar-setup.js"></script></HEAD><?mysql_connect("localhost","XXXX","XXXX");mysql_select_db("XXXX");?><P><B>Submit An Event</B></P><TABLE BORDER="0" WIDTH="80%">	<TR><form action="eventsub.php" method="post">  <TD WIDTH="25%"><b>Start Date:</b><table style="border-collapse: collapse;" cellpadding="0" cellspacing="0"><tbody><tr> <td><input name="startdate" id="startdate" readonly="1" type="text"></td> <td><img src="img.gif" id="f_trigger_startdate" style="border: 1px solid red; cursor: pointer;" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''"></td></tr></tbody></table><script type="text/javascript">    Calendar.setup({        inputField     :    "startdate",     // id of the input field        ifFormat       :    "%B %e, %Y",      // format of the input field        button         :    "f_trigger_startdate",  // trigger for the calendar (button ID)        align          :    "Tl",           // alignment (defaults to "Bl")        singleClick    :    true    });</script>  	  	<b>End Date:</b><table style="border-collapse: collapse;" cellpadding="0" cellspacing="0"><tbody><tr> <td><input name="enddate" id="enddate" readonly="1" type="text"></td> <td><img src="img.gif" id="f_trigger_enddate" style="border: 1px solid red; cursor: pointer;" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''"></td></tr></tbody></table><script type="text/javascript">    Calendar.setup({        inputField     :    "enddate",     // id of the input field        ifFormat       :    "%B %e, %Y",      // format of the input field        button         :    "f_trigger_enddate",  // trigger for the calendar (button ID)        align          :    "Tl",           // alignment (defaults to "Bl")        singleClick    :    true    });</script>  	<b>Closing Date:</b><table style="border-collapse: collapse;" cellpadding="0" cellspacing="0"><tbody><tr> <td><input name="closingdate" id="closingdate" readonly="1" type="text"></td> <td><img src="img.gif" id="f_trigger_closingdate" style="border: 1px solid red; cursor: pointer;" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''"></td></tr></tbody></table><script type="text/javascript">    Calendar.setup({        inputField     :    "closingdate",     // id of the input field        ifFormat       :    "%B %e, %Y",      // format of the input field        button         :    "f_trigger_closingdate",  // trigger for the calendar (button ID)        align          :    "Tl",           // alignment (defaults to "Bl")        singleClick    :    true    });</script></TD>  <TD WIDTH="55%"><b>Event Type:</b>    	<SELECT NAME="event_type">  	<OPTION>Trial</OPTION>  	<OPTION>Clinic</OPTION>  	<OPTION>Other</OPTION>  	<option SELECTED></option>  	</SELECT>  	<b>Details:</b> <INPUT TYPE="TEXT" NAME="event_details" SIZE="25"><BR>  	(clinician name, trial program type, other event type ie: fun trial)<br><b>Location:</b><INPUT TYPE="TEXT" NAME="location" SIZE="25"><b>Province:</b>   	<SELECT NAME="prov">  	<OPTION>BC</OPTION>  	<OPTION>AB</OPTION>  	<OPTION>SK</OPTION>  	<OPTION>MB</OPTION>  	<OPTION>ON</OPTION>  	<OPTION>QC</OPTION>  	<OPTION>NS</OPTION>  	<OPTION>NF</OPTION>  	<OPTION>NB</OPTION>  	<OPTION>PEI</OPTION>  	<OPTION>NT</OPTION>  	<OPTION>YK</OPTION>  	<OPTION>NU</OPTION>  	<OPTION SELECTED> </OPTION>  	</SELECT></TD>	</TR>	<TR>  <TD WIDTH="25%"><b>Host:</b><INPUT TYPE="TEXT" NAME="host" SIZE="25"><b>Contact:</b> <INPUT TYPE="TEXT" NAME="contact" SIZE="25">  	<BR>  	<b>Email:</b><INPUT TYPE="TEXT" NAME="email" SIZE="25"><BR>  	<BR>  	<b>website</b> for premium list/registration form<br>http://<INPUT TYPE="TEXT" NAME="website" SIZE="25"></TD>  <TD WIDTH="55%"><b>Contact Person's Address:</b><br>Address1:<INPUT TYPE="TEXT" NAME="add1" SIZE="25"><BR>Address2:<INPUT TYPE="TEXT" NAME="add2" SIZE="25"><BR>City:<INPUT TYPE="TEXT" NAME="city" SIZE="25">Prov:  	<SELECT NAME="prov2">  	<OPTION>BC</OPTION>  	<OPTION>AB</OPTION>  	<OPTION>SK</OPTION>  	<OPTION>MB</OPTION>  	<OPTION>ON</OPTION>  	<OPTION>QC</OPTION>  	<OPTION>NS</OPTION>  	<OPTION>NF</OPTION>  	<OPTION>NB</OPTION>  	<OPTION>PE</OPTION>  	<OPTION>NT</OPTION>  	<OPTION>YK</OPTION>  	<OPTION>NU</OPTION>  	<OPTION SELECTED> </OPTION>  	</SELECT>Postal Code<INPUT TYPE="TEXT" NAME="postal_code" SIZE="7" MAXLENGTH="7"><BR><br>Ph: <INPUT TYPE="TEXT" NAME="phone" SIZE="25"><BR>Fx: <INPUT TYPE="TEXT" NAME="fax" SIZE="25"></TD>  </TD>	</TR>	<TR>  <TD WIDTH="25%" VALIGN="TOP"><!-- empty cell --></TD>  <TD WIDTH="55%"><!-- empty cell --></TD>	</TR>	<TR>  <TD COLSPAN="2"><b>More Information:</b><BR>  	<TEXTAREA NAME="info" ROWS="7" COLS="60"></TEXTAREA><INPUT NAME="Submit" VALUE="Submit" TYPE="submit" ><INPUT TYPE="RESET"  	NAME="Reset" VALUE="Reset"></TD></form>	</TR></TABLE></FORM>

Now... The problem here (other the the display between FF/IE) is that my java-script popup calendars aren't following their css. They span the entire top of the page. If I turn off (or ignore) the CSS in the main page (eventsubmit.php) then the calendars work just fine...Here is my main CSS script:

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */  body { background-repeat: repeat-y;    background-image: url();    z-index: 1;    opacity: 1;    }  .title { background-repeat: no-repeat;    margin-top: 0%;    padding-top: 0%;    z-index: 111;    position: relative;    background-color: rgb(255, 237, 183);    background-image: url(images/intro.jpg);    background-position: center;    height: 125px;    top: -10px;    left: -8px;    width: 1005px;    }  .title2 { border-bottom: 4px groove rgb(0, 0, 163);    z-index: 111;    width: 817px;    margin-top: -10px;    margin-left: 179px;    }  .topper { background-repeat: no-repeat;    background-position: left top;    margin-left: 0px;    float: none;    padding-left: 0px;    padding-top: 0px;    display: block;    visibility: visible;    height: 253px;    top: 0px;    left: 0px;    margin-top: 0px;    position: absolute;    background-image: url(images/logo.gif);    width: 100%;    z-index: 112;    }  .text { font-family: Times New Roman,Times,serif;    height: 100%;    margin-left: 200px;    margin-right: 50px;    padding-right: 75px;    overflow: visible;    position: relative;    top: 0px;    z-index: 112 ! important;    margin-top: -850px;    padding-right: 75px;    width: 690px;    }  .menu { border-right: 4px groove rgb(0, 0, 163);    position: relative;    margin-left: -10px;    padding-top: 150px;    padding-bottom: 75px;    background-color: rgb(255, 237, 183);    margin-top: -5px;    height: 110%;    z-index: 111;    width: 200px;    }  .clear  {    margin : 0pt;    padding : 0pt;    clear : both;    line-height : 0pt;    Height : 0pt    }

And here is the javascript calendar CSS:

/* The main calendar widget.  DIV containing a table. */.calendar {  position: relative;  display: none;  border-top: 2px solid #fff;  border-right: 2px solid #000;  border-bottom: 2px solid #000;  border-left: 2px solid #fff;  font-size: 11px;  color: #000;  cursor: default;  background: #d4d0c8;  font-family: tahoma,verdana,sans-serif;  z-index: 113;}.calendar table {  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;  font-size: 11px;  color: #000;  cursor: default;  background: #d4d0c8;  font-family: tahoma,verdana,sans-serif;  z-index: 113;}/* Header part -- contains navigation buttons and day names. */.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */  text-align: center;  padding: 1px;  border-top: 1px solid #fff;  border-right: 1px solid #000;  border-bottom: 1px solid #000;  border-left: 1px solid #fff;}.calendar .nav {  background: transparent url(menuarrow.gif) no-repeat 100% 100%;}.calendar thead .title { /* This holds the current "month, year" */  font-weight: bold;  padding: 1px;  border: 1px solid #000;  background: #848078;  color: #fff;  text-align: center;}.calendar thead .headrow { /* Row <TR> containing navigation buttons */}.calendar thead .daynames { /* Row <TR> containing the day names */}.calendar thead .name { /* Cells <TD> containing the day names */  border-bottom: 1px solid #000;  padding: 2px;  text-align: center;  background: #f4f0e8;}.calendar thead .weekend { /* How a weekend day name shows in header */  color: #f00;}.calendar thead .hilite { /* How do the buttons in header appear when hover */  border-top: 2px solid #fff;  border-right: 2px solid #000;  border-bottom: 2px solid #000;  border-left: 2px solid #fff;  padding: 0px;  background-color: #e4e0d8;}.calendar thead .active { /* Active (pressed) buttons in header */  padding: 2px 0px 0px 2px;  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;  background-color: #c4c0b8;}/* The body part -- contains all the days in month. */.calendar tbody .day { /* Cells <TD> containing month days dates */  width: 2em;  text-align: right;  padding: 2px 4px 2px 2px;}.calendar tbody .day.othermonth {  font-size: 80%;  color: #aaa;}.calendar tbody .day.othermonth.oweekend {  color: #faa;}.calendar table .wn {  padding: 2px 3px 2px 2px;  border-right: 1px solid #000;  background: #f4f0e8;}.calendar tbody .rowhilite td {  background: #e4e0d8;}.calendar tbody .rowhilite td.wn {  background: #d4d0c8;}.calendar tbody td.hilite { /* Hovered cells <TD> */  padding: 1px 3px 1px 1px;  border-top: 1px solid #fff;  border-right: 1px solid #000;  border-bottom: 1px solid #000;  border-left: 1px solid #fff;}.calendar tbody td.active { /* Active (pressed) cells <TD> */  padding: 2px 2px 0px 2px;  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;}.calendar tbody td.selected { /* Cell showing selected date */  font-weight: bold;  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;  padding: 2px 2px 0px 2px;  background: #e4e0d8;}.calendar tbody td.weekend { /* Cells showing weekend days */  color: #f00;}.calendar tbody td.today { /* Cell showing today date */  font-weight: bold;  color: #00f;}.calendar tbody .disabled { color: #999; }.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */  visibility: hidden;}.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */  display: none;}/* The footer part -- status bar and "Close" button */.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */}.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */  background: #f4f0e8;  padding: 1px;  border: 1px solid #000;  background: #848078;  color: #fff;  text-align: center;}.calendar tfoot .hilite { /* Hover style for buttons in footer */  border-top: 1px solid #fff;  border-right: 1px solid #000;  border-bottom: 1px solid #000;  border-left: 1px solid #fff;  padding: 1px;  background: #e4e0d8;}.calendar tfoot .active { /* Active (pressed) style for buttons in footer */  padding: 2px 0px 0px 2px;  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;}/* Combo boxes (menus that display months/years for direct selection) */.calendar .combo {  position: absolute;  display: none;  width: 4em;  top: 0px;  left: 0px;  cursor: default;  border-top: 1px solid #fff;  border-right: 1px solid #000;  border-bottom: 1px solid #000;  border-left: 1px solid #fff;  background: #e4e0d8;  font-size: 90%;  padding: 1px;  z-index: 114;}.calendar .combo .label,.calendar .combo .label-IEfix {  text-align: center;  padding: 1px;}.calendar .combo .label-IEfix {  width: 4em;}.calendar .combo .active {  background: #c4c0b8;  padding: 0px;  border-top: 1px solid #000;  border-right: 1px solid #fff;  border-bottom: 1px solid #fff;  border-left: 1px solid #000;}.calendar .combo .hilite {  background: #048;  color: #fea;}.calendar td.time {  border-top: 1px solid #000;  padding: 1px 0px;  text-align: center;  background-color: #f4f0e8;}.calendar td.time .hour,.calendar td.time .minute,.calendar td.time .ampm {  padding: 0px 3px 0px 4px;  border: 1px solid #889;  font-weight: bold;  background-color: #fff;}.calendar td.time .ampm {  text-align: center;}.calendar td.time .colon {  padding: 0px 2px 0px 3px;  font-weight: bold;}.calendar td.time span.hilite {  border-color: #000;  background-color: #766;  color: #fff;}.calendar td.time span.active {  border-color: #f00;  background-color: #000;  color: #0f0;}

Now.. I know that I have a second set of headers when viewing the eventsubmit.php page.. due to the include of my eventsubmit.htm page (I need the headers there for the javascript calendars to work).. BUT.. what can I do to make the calendars act like they are supposed to.. I know that there is a conflict between the 2 CSS being used...Can someone point me in the right direct to fix it???Jen - edited to add: sorry this post is sooo long!!

Sign In

First CSS project

Recommended Posts

cowcutta

Link to comment

Share on other sites

raimo

Link to comment

Share on other sites

kurtsfar

Link to comment

Share on other sites

cowcutta

Link to comment

Share on other sites

aspnetguy

Link to comment

Share on other sites

cowcutta

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity