5 replies [Last post]
ajpeters
Offline
newbie
Browerville, MN
Last seen: 5 years 22 weeks ago
Browerville, MN
Timezone: GMT-5
Joined: 2009-05-19
Posts: 4
Points: 0

1st of all, I am a programmer not a designer. Trying to learn CSS. Using Dreamweaver templates. There are a couple of validation errors, but I have the same error on validated pages.

I am building a site http://www.northlandcedar.com
I have several subpages that seem to work correctly in firefox and IE but not in chrome or safari.

1. In http://www.northlandcedar.com/livingroom.html the links on the pictures do not work right.
2. Same on http://www.northlandcedar.com/livingroom1.html
3. the footer on both renders incorrectly on both with the odd numbered piece of furniture in the wrong place.

I assume I am doing something really dumb.
css

.clear  {
	clear: both;	
}
/* Turn OFf boarders on image links */
img {border:0;}
body {
  font-family: "Times New Roman", Times, serif;
  background:#000000
}
 
td {
	font-family: "Times New Roman", Times, serif;
	color:#FFFFFF;
}
 
th {
	font-family: "Times New Roman", Times, serif;
	color:#FFFFFF;
}
p {
	font-family: "Times New Roman", Times, serif;
	color:#FFFFFF;
}
h2 {
margin-bottom:2px;
margin-top: 2px;
font-size:36px;
color:#ae7c63;
}
h3{
margin-bottom:2px;
margin-top: 2px;
font-size:18px;
color:#f0c096;
}
#wrapper {
	margin: auto;
	width: 900px;
 
}
#header {
   width: 900px;
   background-image:url(/images/header.jpg);
   height: 186px;
}
#headerText {
   position:relative;
   top: 120px;
   left: 340px;
   width:520px;
   font:bold italic 25px "Times New Roman", Times, serif;
    color:#FFFFFF;
}
#Index-headerText {
   position:relative;
   top: 100px;
   left: 270px;
   width:600px;
   font:bold italic 25px "Times New Roman", Times, serif;
    color:#FFFFFF;
}
 
#navigation {
   width: 258px;
   float:left;
}
#nav1 {display:none;}
li.nav1 ul a { display: none; }
       li.nav1:hover ul { display: block; 
	   float:left;
	   position:absolute;
	   top: 200px;
	   background-color:#666666;
	   width:100px;
	   }
 
#footer {
width:642px;
 position:relative; 
   }
 #footer li {
   font-size:9px;
   font:Arial, Helvetica, sans-serif;
   color:#FFFFFF ;
   display:inline;
   background:#000000;
   }
#content-home{
   float:right;
   position:relative;
   top:0px;
   min-height:500px;
 
   width:642px;
/*  background-image:url(/images/backgroud.jpg);
   background-repeat:no-repeat;*/
}
content-sub{}
#left{
   float:left;
   width: 290px;
   top: 30px;
     padding-left: 20px;
	 padding-top: 30px;
	 color:#f0c096;
   }
#right{
   float:right;
   width: 290px;
   top: 30px;
   padding-right: 20px;
    padding-top: 30px;
 
   }
#center1{
 
width:600px;
position:absolute;
bottom: 5px;
}
#menu-call{
 
}

more css

@charset "UTF-8";
#mainnav {
	position: relative;
	background-image: url(../images/mainnav/pole.png);
	background-repeat: no-repeat;
	background-color: #000000;
	height: 722px;
	width: 250px;
	background-position: center;
	float: left;
	z-index: 999;
}
#mainnav ul {
	width: 174px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 5;
	margin-bottom: 0px;
	margin-left: auto;
	list-style-type: none;
}
#mainnav li a, #mainnav li ul.subnav a {
	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	line-height: 36px;
}
#mainnav li a:hover {
	color: #000;
}
#mainnav li a#nav_homes {
	height: 43px;
	width: 174px;
	background-image: url(../images/mainnav/nav_products.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_products {
	height: 43px;
	width: 174px;
	background-image: url(../images/mainnav/nav_products.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_about {
	height: 40px;
	width: 174px;
	background-image: url(../images/mainnav/nav_about.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_product_info {
	height: 40px;
	width: 174px;
	background-image: url(../images/mainnav/nav_about.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_contact {
	height: 40px;
	width: 174px;
	background-image: url(../images/mainnav/nav_contact.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_ordering {
	height: 45px;
	width: 174px;
	background-image: url(../images/mainnav/nav_ordering.png);
	background-repeat: no-repeat;
}
#mainnav li a#nav_shipping {
	height: 45px;
	width: 174px;
	background-image: url(../images/mainnav/nav_shipping.png);
	background-repeat: no-repeat;
}
 
 
#mainnav li ul.subnav {
	position: absolute;
	display: block;
	background-color: #000000;
	left: 214px;
	top: 10px;
	border: 1px solid #FFFFFF;	
	z-index: 10000;
 
}
#mainnav li ul.subnav a:hover {
	color: #666;
}
#mainnav li ul.subnav li.listHeader{
	color: #666;
	text-align: center;
}

livingroom

<!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"><!-- InstanceBegin template="/Templates/subpage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Northalnd Cedar</title>
<!-- InstanceEndEditable -->
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all" />
 
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
.style2 {
	font-size: small
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
 
 $(document).ready(function() {
 	//hide subnav on pageload
   $('.subnav').hide();
 
 
 
    $('a#nav_products').hover(
      function () {
        $('.subnav').show();
      } 
 
    );
 
	 $('ul.subnav').hover(
	  function () {
        $('ul.subnav').show();
      },
      function () {
        $('ul.subnav').hide();
      } 
 
    );
 
 
 
 
 
 
 });
</script>
<!-- ***************IE extra whitespace in list link bug fix*************** -->
<!--[if IE]>
<style type="text/css"> 
#mainnav ul.subnav a {
height: 1%;
zoom: 1;
}
</style>
<![endif]-->
<!-- ******************** IE 6 PNG TRANSPARENCY FIX ******************* -->
<!-- DD_belatedPNG version 0.0.7a - javascript fix for IE6 transparent png bug.  Downloaded 4/24/2009:     <a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" rel="nofollow">http://www.dillerdesign.com/experiment/DD_belatedPNG/</a>      -->
<!--[if IE 6]>
<script src="../scripts/DD_belatedPNG.js"></script>
<script>
 
/* MAINNAV BACKGROUND IMAGES */
DD_belatedPNG.fix('#mainnav, #mainnav ul li a, #mainnav ul li a#products, #mainnav ul li a#about, #mainnav ul li a#contact, #mainnav ul li a#ordering, #mainnav ul li a#shipping');
 
 
</script>
<![endif]-->
</head>
 
<body>
<div id="wrapper">
  <div id="header">
     <div id="headerText">
	     <!-- InstanceBeginEditable name="header" -->Living Room <!-- InstanceEndEditable -->
	 </div>
  </div>
<div id="mainnav">
  <ul>
    <li><a id="nav_products" href="products.html">Products</a>
      <ul class="subnav">
        <li class="listHeader">Products</li>
        <li><a href="livingroom.html">Living Room </a></li>
        <li><a href="diningroom.html">Dining Room </a></li>
        <li><a href="bedroom.html">Bedroom</a></li>
        <li><a href="office.html">Office</a></li>
        <li><a href="barroom.html">Bar Room</a></li>
        <li><a href="lighting.html">Lighting/Misc</a></li>
        <li><a href="fabrics">Fabrics </a></li>
        <li><a href="/pdf/NorthernCedar1Brochure.pdf">Printed Brochure</a> </li>
      </ul>
    </li>
    <li><a id="nav_product_info" href="product_info.html">Product Info </a></li>
    <li><a id="nav_contact" href="contactus.html">Contact Us</a></li>
    <li><a id="nav_ordering" href="ordering.html">Ordering</a></li>
    <li><a id="nav_shipping" href="shipping.html">Shipping</a></li>
    <li><a id="nav_homes" href="index.html">Home</a></li>
 
  </ul>
</div>
 
  <div id="content-home">
  <!-- InstanceBeginEditable name="content" -->
  <h6 align="center" class="style3">Click on Image to See More Info </h6>
  <div id="left">
        <h3 align="center"><a href="livingroomsofa.html"><img src="images/living-sofa.gif" alt="Livingroom Sofa" width="251" height="165" border="0" /></a></h3>
        <p align="center">Living Room Sofa</p>
        <p align="center"><a href="livingroomendtable.html"><img src="images/living-end.gif" alt="Living room End table" width="216" height="184" border="0" /></a> </p>
        <p align="center">Living Room End Table</p>
        <p align="center"><a href="livingroombench.html"><img src="images/living-bench.gif" alt="Living room Bench" width="216" height="163" border="0" /></a> </p>
        <p align="center">Living Room Bench</p>
        <p align="center"><a href="livingroomcoffetable.html"><img src="images/living-coffee.gif" alt="Living Room Coffee Table" width="201" height="177" border="0" /></a></p>
        <p align="center">Living Room Coffee Table </p>
  </div>
  <div id="right">
    <p align="center"><a href="livingroomloungeset.html"><img src="images/living-lounge.gif" alt="Living room Lounge Set" width="251" height="195" border="0" /></a></p>
    <p align="center">Living Room Lounge Set</p>
    <p align="center"><a href="livingroomlogendtable.html"><img src="images/living-log-end.gif" alt="Living room Log End table" width="180" height="199" border="0" /></a> </p>
    <p align="center">Living Room Log End Table</p>
    <p align="center"><a href="livingroomtable.html"><img src="images/living-wolf-table.gif" alt="Living Room Log table" width="206" height="181" border="0" /></a> </p>
    <p align="center">Living Room Table </p>
  </div>
<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
 
  <!-- InstanceEndEditable -->
<div id="footer">
      <div align="center"><img src="images/NorthlandCedar.gif" alt="Northand Cedar Accepts All Major Crdit Cards" />
	  <ul id = "footer">
	  <li>(218) 349-7565</li>
	  <li>   |   P.O. Box 2685</li>
	  <li>   |   Baxter, MN  56425</li>
	  <li>   |   northlandcedar.com</li>
	 </ul>
	 </div>
    </div>
</div>
 
</body>
<!-- InstanceEnd --></html>

livingroom1.html
<!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"><!-- InstanceBegin template="/Templates/subpage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Northalnd Cedar</title>
<!-- InstanceEndEditable -->
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all" />
 
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
.style2 {
	font-size: small
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
 
 $(document).ready(function() {
 	//hide subnav on pageload
   $('.subnav').hide();
 
 
 
    $('a#nav_products').hover(
      function () {
        $('.subnav').show();
      } 
 
    );
 
	 $('ul.subnav').hover(
	  function () {
        $('ul.subnav').show();
      },
      function () {
        $('ul.subnav').hide();
      } 
 
    );
 
 
 
 
 
 
 });
</script>
<!-- ***************IE extra whitespace in list link bug fix*************** -->
<!--[if IE]>
<style type="text/css"> 
#mainnav ul.subnav a {
height: 1%;
zoom: 1;
}
</style>
<![endif]-->
<!-- ******************** IE 6 PNG TRANSPARENCY FIX ******************* -->
<!-- DD_belatedPNG version 0.0.7a - javascript fix for IE6 transparent png bug.  Downloaded 4/24/2009:     <a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" rel="nofollow">http://www.dillerdesign.com/experiment/DD_belatedPNG/</a>      -->
<!--[if IE 6]>
<script src="../scripts/DD_belatedPNG.js"></script>
<script>
 
/* MAINNAV BACKGROUND IMAGES */
DD_belatedPNG.fix('#mainnav, #mainnav ul li a, #mainnav ul li a#products, #mainnav ul li a#about, #mainnav ul li a#contact, #mainnav ul li a#ordering, #mainnav ul li a#shipping');
 
 
</script>
<![endif]-->
</head>
 
<body>
<div id="wrapper">
  <div id="header">
     <div id="headerText">
	     <!-- InstanceBeginEditable name="header" -->Living Room <!-- InstanceEndEditable -->
	 </div>
  </div>
<div id="mainnav">
  <ul>
    <li><a id="nav_products" href="products.html">Products</a>
      <ul class="subnav">
        <li class="listHeader">Products</li>
        <li><a href="livingroom.html">Living Room </a></li>
        <li><a href="diningroom.html">Dining Room </a></li>
        <li><a href="bedroom.html">Bedroom</a></li>
        <li><a href="office.html">Office</a></li>
        <li><a href="barroom.html">Bar Room</a></li>
        <li><a href="lighting.html">Lighting/Misc</a></li>
        <li><a href="fabrics">Fabrics </a></li>
        <li><a href="/pdf/NorthernCedar1Brochure.pdf">Printed Brochure</a> </li>
      </ul>
    </li>
    <li><a id="nav_product_info" href="product_info.html">Product Info </a></li>
    <li><a id="nav_contact" href="contactus.html">Contact Us</a></li>
    <li><a id="nav_ordering" href="ordering.html">Ordering</a></li>
    <li><a id="nav_shipping" href="shipping.html">Shipping</a></li>
    <li><a id="nav_homes" href="index.html">Home</a></li>
 
  </ul>
</div>
 
  <div id="content-home">
  <!-- InstanceBeginEditable name="content" -->
  <h6 align="center" class="style3">Click on Image to See More Info </h6>
  <div id="left">
        <h3 align="center"><a href="livingroomsofa.html"><img src="images/living-sofa.gif" alt="Livingroom Sofa" width="251" height="165" border="0" /></a></h3>
        <p align="center">Living Room Sofa</p>
        <p align="center"><a href="livingroomendtable.html"><img src="images/living-end.gif" alt="Living room End table" width="216" height="184" border="0" /></a> </p>
        <p align="center">Living Room End Table</p>
        <p align="center"><a href="livingroombench.html"><img src="images/living-bench.gif" alt="Living room Bench" width="216" height="163" border="0" /></a> </p>
        <p align="center">Living Room Bench</p>
        <p align="center">&nbsp;</p>
        <p align="center">&nbsp;</p>
  </div>
  <div id="right">
    <p align="center"><a href="livingroomloungeset.html"><img src="images/living-lounge.gif" alt="Living room Lounge Set" width="251" height="195" border="0" /></a></p>
    <p align="center">Living Room Lounge Set</p>
    <p align="center"><a href="livingroomlogendtable.html"><img src="images/living-log-end.gif" alt="Living room Log End table" width="180" height="199" border="0" /></a> </p>
    <p align="center">Living Room Log End Table</p>
    <p align="center"><a href="livingroomtable.html"><img src="images/living-wolf-table.gif" alt="Living Room Log table" width="206" height="181" border="0" /></a> </p>
    <p align="center">Living Room Table </p>
  </div>
<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td><p align="center"><a href="livingroomcoffetable.html"><img src="images/living-coffee.gif" alt="Living Room Coffee Table" width="201" height="177" border="0" /></a></p>
      <p align="center">Living Room Coffee Table</p></td>
  </tr>
</table>
 
  <!-- InstanceEndEditable -->
<div id="footer">
      <div align="center"><img src="images/NorthlandCedar.gif" alt="Northand Cedar Accepts All Major Crdit Cards" />
	  <ul id = "footer">
	  <li>(218) 349-7565</li>
	  <li>   |   P.O. Box 2685</li>
	  <li>   |   Baxter, MN  56425</li>
	  <li>   |   northlandcedar.com</li>
	 </ul>
	 </div>
    </div>
</div>
 
</body>
<!-- InstanceEnd --></html>

I will also accept any comments on coding style. The design style is directed by customer.
Yes, I will be fixing the graphic of the post.

jadexsoln
jadexsoln's picture
Offline
Regular
Leicestershire, England
Last seen: 5 years 7 weeks ago
Leicestershire, England
Joined: 2009-02-18
Posts: 31
Points: 0

Z-Index

It could be to do with z-index.

I had this the other day on a web site I was doing and when I floated some links over a relatively positioned block the links stopped working until I brought the parent block to the front using the z-index property. I set this to something silly like z-index: 100;

Try setting this on either #content-home, or #left and #right.

Incidentally the links don't work in FF v2, but are fine in Opera.

Also you have the Living Room Sofa as an H3 element and the 'Click on Image to See More Info' as an H6 element.

From a usability and accessibility point of view neither of these are headings and an H3 should never follow an H6. Headings are meant to flow hierarchically down the document so that when viewed without formatting the document is reads semantically still.

Cheers

Neil Taylor
Jadex Solutions Ltd.
Small Business Web Site Design

ajpeters
Offline
newbie
Browerville, MN
Last seen: 5 years 22 weeks ago
Browerville, MN
Timezone: GMT-5
Joined: 2009-05-19
Posts: 4
Points: 0

Z-Index

Are you suggesing I change the z-index in mainnav or add a z-index to the content of the left and right divs.

would a clear somewhere help?

Also, from a usability point of view, I should create a couple of new styles.

Right.

ajpeters
Offline
newbie
Browerville, MN
Last seen: 5 years 22 weeks ago
Browerville, MN
Timezone: GMT-5
Joined: 2009-05-19
Posts: 4
Points: 0

clear

I did a clear both in the footer and after the left and right divs. That got ride of the link problem and misplacing the footer. Safari and chrome still have the misplaced the od item in livingroom1.html

jadexsoln
jadexsoln's picture
Offline
Regular
Leicestershire, England
Last seen: 5 years 7 weeks ago
Leicestershire, England
Joined: 2009-02-18
Posts: 31
Points: 0

Z-Index

ajpeters wrote:

Are you suggesing I change the z-index in mainnav or add a z-index to the content of the left and right divs.

would a clear somewhere help?

Also, from a usability point of view, I should create a couple of new styles.

Right.

Try setting Z-Index on either #content-home, or #left and #right.

For the usability point I was making you don't need to create new styles it's a case of keeping the headings in order.

Basically the first (top) heading should be an H1 - the main topic of the page.

Sub headings of this should be H2, sub sub headings H3 etc. So a sub heading of H1 should never be an H3, or 4...

The document should be laid out where the headings follow in the correct hierarchical order - think of it like indenting.

Cheers

Neil Taylor
Jadex Solutions Ltd.
Small Business Web Site Design

ajpeters
Offline
newbie
Browerville, MN
Last seen: 5 years 22 weeks ago
Browerville, MN
Timezone: GMT-5
Joined: 2009-05-19
Posts: 4
Points: 0

jadexsoln wrote: Try

jadexsoln wrote:

Try setting Z-Index on either #content-home, or #left and #right.

For the usability point I was making you don't need to create new styles it's a case of keeping the headings in order.

Basically the first (top) heading should be an H1 - the main topic of the page.

Sub headings of this should be H2, sub sub headings H3 etc. So a sub heading of H1 should never be an H3, or 4...

The document should be laid out where the headings follow in the correct hierarchical order - think of it like indenting.

Cheers

In my case, I am not using them as heading but as Labels. for clarity sake, I think I should create another tag. Also, since I had them in different divs (incorrectly because of inheritance), I did not think of an orderly progression

Snce the clear:both seemed to fix my current problems, do you think a z-index is a good thing to add for future compatibility?