# CSS Help - Page fragmented



## AllenJr (Aug 6, 2010)

Hello, I am new here, so please excuse my naivety... I have searched online for the better part of 3 days now to try to figure out what I am doing wrong, and I can't figure it out. Hopefully someone can help.
I am new to CSS and I am using Dreamweaver. I am trying to set up what I think is a simple page layout. I want the footer to be on the bottom, and the text to fill the main area on the page.

Here is a link to what I am getting:
http://www.superbilliardsexpo.com/testBadCSS.html

The top starts off good, but the bottom falls apart. The container is not supposed to be bright teal colored, I just did that so I can see where it is "ending", which I do not understand because it is set to 100% height, with a minumim of 1200px - for smaller pages and testing purposes really... Eventually, the container will have no fill color so that the bdy BG properties will show through.

Here is the CSS from the style sheet I am using - I took the top part from a site I saw explaining how to make 100% height pages:

Any help is super appreciated!! If anyone is a poolplayer out there, you may recognize the site and or names, I can get you an autograph for some help, it's my dad 

Thanks again!

@charset "UTF-8";
html, body, #container {
min-height: 100%;
width: 100%;
height: 100%;
}

/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/

html>body, html>body #container {
height: auto;
}

body {
background-image: url(images/bgpattern30.jpg);
margin: 0px;
padding: 0px;
}
#container {
position:relative;
width:100%;
z-index:1;
height: 100%;
min-height:1200px;
background-color: #0FC;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:200px;
z-index:2;
background-color: #798551;
background-image: url(images/head.jpg);
background-repeat: no-repeat;
background-position: center;
}
#Main {
position:relative;
top:260px;
width:800px;
height:100%;
min-height:900px;
z-index:10;
background-color: #e5e1d9;
margin-right: auto;
margin-left: auto;
border-right-style: ridge;
border-left-style: ridge;
border-right-width: medium;
border-left-width: medium;
border-left-color: #3365a2;
border-right-color: #3365a2;
overflow: visible;
}
#footer {
position:relative;
width:100%;
height:74px;
z-index:40;
background-color: #74804d;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
#MenuBar {
position:absolute;
left:0px;
top:200px;
width:100%;
height:35px;
z-index:15;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
background-image: url(images/MenuBarBG.jpg);
background-repeat: repeat;
text-align: center;
}
#facebook {
position:absolute;
width:200px;
height:699px;
z-index:13;
background-color: #FFF;
right: 3px;
top: 94px;
}
#BannerAd {
position:relative;
top:0px;
width:600px;
height:90px;
z-index:2;
background-color: #999;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 200px;
}
#MainContent {
position:absolute;
left:17px;
top:155px;
width:570px;
height:774px;
z-index:23;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#contact {
position:absolute;
left:0px;
top:0px;
width:200px;
height:90px;
z-index:20;
background-color: #036;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FF0;
padding: 0px;
}
#SubMenu {
position:absolute;
left:0px;
top:235px;
width:100%;
height:25px;
z-index:41;
background-image: url(images/SubMenuBar.gif);
background-repeat: repeat;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#sponsors {
position:absolute;
width:582px;
height:52px;
z-index:22;
left: 8px;
top: 95px;
}

Just thought of some more... I want to set up the page so that I can type text in the main area there, called "MainContent".. Some pages will have more text than others, isnt there a way to set it up so the area just "grows" as I type in it, like what occurs when you type in a table cell? I dont want to overflow:scroll, I just want the pages to get longer, using browser scroll bar... Not sure if this makes sense.

Basically, I just want to have a general area designated for writing in, I dont want everything set by predetermined box sizes. I thought height:100% would take care of this, but that doesnt seem to be doing it... I don't know how to explain this well, but I think looking at my sample page you will understand my intent.

Thanks agian for any help - I assume I am doing something drastically wrong, right from the beginning, but I don't know what...


----------



## colinsp (Sep 5, 2007)

To start debugging this I would suggest that you loose the ie5 conditional code at the beginning of your CSS, the number of visitors likely to be using it is small.

The next thing is to remove the min-heights from each of your divs.

The reason that your text is going out side your content div's is that you have set heights. On all the non-critical elements remove the height statements in your css.

Once you have done this you can then start to put them back one by one to get the actual layout that you want.

Also Google CSS Box model and read up on the box model and make sure you fully understand it. This will help you make the correct layout that you want.


----------



## AllenJr (Aug 6, 2010)

Thanks for the advice.. I have been reading throughout the day and trying to learn how things work... The book I was using taught me to use absolute and relative positioning, but it seems like that may not be best... Also, removing the heights was a big tip... I have to start thinking in a different manner, I was trying to lay out the page and go back and fill it in, but that may not be the best...

Plus, the more I learn about css coding, the more I can realize the poor code dreamweaver is writing and then manually fix it.

Here is the most recent page I've got done:

www.superbilliardsexpo.com

and here is the code of the style sheet:

@charset "UTF-8";

html,body{
height: 100%;
}

body {
background-image: url(images/bgpattern30.jpg);
margin: 0px;
padding: 0px;
position: relative;
}
#container {
position:relative;
width:100%;
z-index:1;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header {
left:0px;
top:0px;
width:100%;
height:200px;
z-index:2;
background-color: #798551;
background-image: url(images/head.jpg);
background-repeat: no-repeat;
background-position: center;
}
#Main {
width:800px;
height:100%;
min-height:900px;
z-index:10;
background-color: #e5e1d9;
margin-right: auto;
margin-left: auto;
border-right-style: ridge;
border-left-style: ridge;
border-right-width: medium;
border-left-width: medium;
border-left-color: #3365a2;
border-right-color: #3365a2;
overflow: visible;
position: relative;
}
.mainText {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #333;
padding-top: 70px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin: 0px;
clear: none;
width: 550px;
}
#footer {
width:100%;
height:74px;
z-index:40;
background-color: #74804d;
margin: 0px;
padding: 0px;
clear: both;
}
#MenuBar {
width:100%;
height:50px;
z-index:15;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
background-image: url(images/MenuBarBG.jpg);
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
#facebook {
width:200px;
height:699px;
z-index:13;
background-color: #FFF;
float: right;
}
#BannerAd {
width:600px;
height:90px;
z-index:2;
background-color: #999;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: right;
}

#contact {
width:200px;
height:90px;
z-index:20;
background-color: #036;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FF0;
padding: 0px;
float: left;
}
#SubMenu {
position:absolute;
left:0px;
top:235px;
width:100%;
height:25px;
z-index:41;
background-image: url(images/SubMenuBar.gif);
background-repeat: repeat;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#sponsors {
width:582px;
height:52px;
z-index:22;
float: left;
}

Does it look like Im improving? The page looks better, but I still have questions...

My biggest issue is how can I set up the main content area so that I can just add more and more text to it without causing the page to break up? As I write and fill the main area, when there is too much text, it overflows and the page breaks apart and I don't know why. I am trying to create a page that I can just add text to, similar to regular HTML tables that continue to grow as you add more content... I assume that must be possible in CSS but I think I am doing something wrong...

Thanks again for you help, very helpful!


----------



## colinsp (Sep 5, 2007)

Its looking much better now.

I suspect that you are running into problems with absolute positioning and relative positioning and using percentages for your layouts. One thing to try would be to turn these off and use fixed widths and relative positioning until you get everything the way you want and then slowly change the elements that need to have % widths etc testing as you go. 

Are you using IE or Firefox? If using FF get the webdevelopers toolbar as that allows you to inspect the elements on your page as displayed and you can then see how your changes are being interpreted by the browser. IE6 and maybe later treat min-height as height so you could also be running into problems there.

Let us know how you get on


----------



## caraewilton (Nov 7, 2007)

Hi Allenjr
There are different methds and styles of designing a webpage and the book you have been using obviously supports the absolute-positioned-zindex method. Nothing wrong with that and it is the way to go if you need a very complex layout. But looking at your site, I think you can get away using an easier method that does not require positioning or z-index.

Have a look at this template. 
You'll see it is not that different from what you are trying to do. Click on the html and css tabs. You'll see the css is far simpler then the one you are using.

I have also attached another template. This one has a header and footer which extend across the whole page and a content area that is fixed in the middle, like yours. This one again uses a far simpler approach to css that requires only one style sheet that works in most browsers, including IE6.

Anyway, maybe this will help.

Cara


----------



## AllenJr (Aug 6, 2010)

Thanks for all of your help... I have beed reading up on the CSS Box Model and studying the sample codes that people have suggested... I still have 1 big question that I cant figure out.

I want to be able to add content to the #Main area, and within that area I have nested the class p.maintext 

I am not sure if this is the best way to do it, and I have also tried a nested APDiv (This is what dreamweaver calls it, I guess it's just another box)

The problem I have is that as I add content, the size of the #main area does not seem to expand to accomodate it. Not sure how to explain this, but the content spills out of the box and overlaps the footer and breaks the container. I have the height set to 100%, so I would assume it would grow as the content fills, but it doesn't. I guess I am doing something wrong, but I can't figure out what.

I know this may sound confusing, but all I want to do is create a "main" area to put all my content and have that area grow as needed. I know I can add overflow:scroll, but then that adds a new scroll bar and I don't want that - I just want the content to flow naturally and use the browser scroll bar. 

Anyone make sense of what I am saying? And if you have any suggestions, I would really appreciate it.

Thanks!


----------



## colinsp (Sep 5, 2007)

A quick look at your code suggests that you are missing a closing div tag for your main div before you start the footer div also it looks like you don't have a closing tag for container div either. Try putting these right and see how you go.

The page does not validate either see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.superbilliardsexpo.com%2F try fixing these and see if it helps.

In Dreamweaver an APdiv is an absolutely positioned div

If this doesn't work post your latest html and css in the reply using code tags in your post and I'll have a look again for you.


----------



## AllenJr (Aug 6, 2010)

Thanks again for the help, I think I am getting there... I reevaluated the code and tried to fix the div tags as you mentioned, and I think I got it. Seems like my big problem may be that dreamweaver is not arranging the code exactly as it should be so I have to go back and tweak it quite a bit - which is helping me learn as well.

I think I achieved the "expanding" effect I wanted on the main area, it seem that if I just enter text in that area directly it will grow to the size I want it, so I am achieving that by using class properties - does that sound correct? Originally I had a nested area within the Main area that I was using to enter text, but the Main area was not expanding to accomodate the text in the Nested area... I know this sounds confusing, sorry - don't know a better way to explain it.

The site is still live at www.superbilliardsexpo.com

The code for the page is here:


```
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Super Billiards Expo</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--

<!--
td img {display: block;}td img {display: block;}#container  {display: block;}
<!--
-->
</style>
<link href="../expoStyles.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('../images/submen_r2_c10_f2.gif','../images/submen_r2_c12_f2.gif','../images/submen_r3_c2_f2.gif','../images/submen_r3_c4_f2.gif','../images/submen_r3_c6_f2.gif','../images/submen_r3_c8_f2.gif','../images/submen_r3_c14_f2.gif','../images/menubar_r2_c1_f2.gif','../images/menubar_r2_c3_f2.gif','../images/menubar_r2_c5_f2.gif','../images/menubar_r2_c7_f2.gif','../images/menubar_r2_c9_f2.gif','../images/menubar_r2_c11_f2.gif')">
<div id="container">

  <div id="header"></div>
  
  <div id="MenuBar">
  <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <!-- fwtable fwsrc="MenuBar_rolls.png" fwpage="Page 1" fwbase="menubar.gif" fwstyle="Dreamweaver" fwdocid = "84454587" fwnested="0" -->
    <tr>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="124" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="26" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="94" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="46" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="90" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="34" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="117" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="33" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="94" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="39" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="103" height="1" border="0" id="undefined_3" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="1" height="1" border="0" id="undefined_3" /></td>
    </tr>
    <tr>
      <td colspan="11"><img name="menubar_r1_c1" src="../images/menubar_r1_c1.gif" width="800" height="6" border="0" id="menubar_r1_c1" alt="" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="1" height="6" border="0" id="undefined_3" /></td>
    </tr>
    <tr>
      <td><a href="amateur.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c1','','../images/menubar_r2_c1_f2.gif',1);"><img name="menubar_r2_c1" src="../images/menubar_r2_c1.gif" width="124" height="22" border="0" id="menubar_r2_c1" alt="" /></a></td>
      <td rowspan="2"><img name="menubar_r2_c2" src="../images/menubar_r2_c2.gif" width="26" height="29" border="0" id="menubar_r2_c2" alt="" /></td>
      <td><a href="proevents.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c3','','../images/menubar_r2_c3_f2.gif',1);"><img name="menubar_r2_c3" src="../images/menubar_r2_c3.gif" width="94" height="22" border="0" id="menubar_r2_c3" alt="" /></a></td>
      <td rowspan="2"><img name="menubar_r2_c4" src="../images/menubar_r2_c4.gif" width="46" height="29" border="0" id="menubar_r2_c4" alt="" /></td>
      <td><a href="exhibitors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c5','','../images/menubar_r2_c5_f2.gif',1);"><img name="menubar_r2_c5" src="../images/menubar_r2_c5.gif" width="90" height="22" border="0" id="menubar_r2_c5" alt="" /></a></td>
      <td rowspan="2"><img name="menubar_r2_c6" src="../images/menubar_r2_c6.gif" width="34" height="29" border="0" id="menubar_r2_c6" alt="" /></td>
      <td><a href="charity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c7','','../images/menubar_r2_c7_f2.gif',1);"><img name="menubar_r2_c7" src="../images/menubar_r2_c7.gif" width="117" height="22" border="0" id="menubar_r2_c7" alt="" /></a></td>
      <td rowspan="2"><img name="menubar_r2_c8" src="../images/menubar_r2_c8.gif" width="33" height="29" border="0" id="menubar_r2_c8" alt="" /></td>
      <td><a href="vip.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c9','','../images/menubar_r2_c9_f2.gif',1);"><img name="menubar_r2_c9" src="../images/menubar_r2_c9.gif" width="94" height="22" border="0" id="menubar_r2_c9" alt="" /></a></td>
      <td rowspan="2"><img name="menubar_r2_c10" src="../images/menubar_r2_c10.gif" width="39" height="29" border="0" id="menubar_r2_c10" alt="" /></td>
      <td><a href="entryforms.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menubar_r2_c11','','../images/menubar_r2_c11_f2.gif',1);"><img name="menubar_r2_c11" src="../images/menubar_r2_c11.gif" width="103" height="22" border="0" id="menubar_r2_c11" alt="" /></a></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="1" height="22" border="0" id="undefined_3" /></td>
    </tr>
    <tr>
      <td><img name="menubar_r3_c1" src="../images/menubar_r3_c1.gif" width="124" height="7" border="0" id="menubar_r3_c1" alt="" /></td>
      <td><img name="menubar_r3_c3" src="../images/menubar_r3_c3.gif" width="94" height="7" border="0" id="menubar_r3_c3" alt="" /></td>
      <td><img name="menubar_r3_c5" src="../images/menubar_r3_c5.gif" width="90" height="7" border="0" id="menubar_r3_c5" alt="" /></td>
      <td><img name="menubar_r3_c7" src="../images/menubar_r3_c7.gif" width="117" height="7" border="0" id="menubar_r3_c7" alt="" /></td>
      <td><img name="menubar_r3_c9" src="../images/menubar_r3_c9.gif" width="94" height="7" border="0" id="menubar_r3_c9" alt="" /></td>
      <td><img name="menubar_r3_c11" src="../images/menubar_r3_c11.gif" width="103" height="7" border="0" id="menubar_r3_c11" alt="" /></td>
      <td><img src="../images/spacer.gif" alt="" name="undefined_3" width="1" height="7" border="0" id="undefined_3" /></td>
    </tr>
  </table>
</div>
  <div id="SubMenu">
    <table border="0" align="center" cellpadding="0" cellspacing="0" width="800">
      <!-- fwtable fwsrc="SubMenuBar_rollovers.png" fwpage="Page 1" fwbase="submen.gif" fwstyle="Dreamweaver" fwdocid = "643399710" fwnested="0" -->
      <tr>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="103" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="5" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="93" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="15" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="130" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="17" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="130" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="13" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="68" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="8" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="44" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="10" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="160" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="3" height="1" border="0" id="undefined_2" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
      </tr>
      <tr>
        <td colspan="15"><img name="submen_r1_c1" src="../images/submen_r1_c1.gif" width="800" height="4" border="0" id="submen_r1_c1" alt="" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="4" border="0" id="undefined_2" /></td>
      </tr>
      <tr>
        <td colspan="9"><img name="submen_r2_c1" src="../images/submen_r2_c1.gif" width="507" height="1" border="0" id="submen_r2_c1" alt="" /></td>
        <td rowspan="3"><a href="photos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r2_c10','','../images/submen_r2_c10_f2.gif',1);"><img name="submen_r2_c10" src="../images/submen_r2_c10.gif" width="68" height="18" border="0" id="submen_r2_c10" alt="" /></a></td>
        <td rowspan="4"><img name="submen_r2_c11" src="../images/submen_r2_c11.gif" width="8" height="21" border="0" id="submen_r2_c11" alt="" /></td>
        <td rowspan="2"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r2_c12','','../images/submen_r2_c12_f2.gif',1);"><img name="submen_r2_c12" src="../images/submen_r2_c12.gif" width="44" height="17" border="0" id="submen_r2_c12" alt="" /></a></td>
        <td colspan="3"><img name="submen_r2_c13" src="../images/submen_r2_c13.gif" width="173" height="1" border="0" id="submen_r2_c13" alt="" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
      </tr>
      <tr>
        <td rowspan="3"><img name="submen_r3_c1" src="../images/submen_r3_c1.gif" width="1" height="20" border="0" id="submen_r3_c1" alt="" /></td>
        <td><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r3_c2','','../images/submen_r3_c2_f2.gif',1);"><img name="submen_r3_c2" src="../images/submen_r3_c2.gif" width="103" height="16" border="0" id="submen_r3_c2" alt="" /></a></td>
        <td rowspan="3"><img name="submen_r3_c3" src="../images/submen_r3_c3.gif" width="5" height="20" border="0" id="submen_r3_c3" alt="" /></td>
        <td><a href="hotels.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r3_c4','','../images/submen_r3_c4_f2.gif',1);"><img name="submen_r3_c4" src="../images/submen_r3_c4.gif" width="93" height="16" border="0" id="submen_r3_c4" alt="" /></a></td>
        <td rowspan="3"><img name="submen_r3_c5" src="../images/submen_r3_c5.gif" width="15" height="20" border="0" id="submen_r3_c5" alt="" /></td>
        <td><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r3_c6','','../images/submen_r3_c6_f2.gif',1);"><img name="submen_r3_c6" src="../images/submen_r3_c6.gif" width="130" height="16" border="0" id="submen_r3_c6" alt="" /></a></td>
        <td rowspan="3"><img name="submen_r3_c7" src="../images/submen_r3_c7.gif" width="17" height="20" border="0" id="submen_r3_c7" alt="" /></td>
        <td><a href="archives.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r3_c8','','../images/submen_r3_c8_f2.gif',1);"><img name="submen_r3_c8" src="../images/submen_r3_c8.gif" width="130" height="16" border="0" id="submen_r3_c8" alt="" /></a></td>
        <td rowspan="3"><img name="submen_r3_c9" src="../images/submen_r3_c9.gif" width="13" height="20" border="0" id="submen_r3_c9" alt="" /></td>
        <td rowspan="3"><img name="submen_r3_c13" src="../images/submen_r3_c13.gif" width="10" height="20" border="0" id="submen_r3_c13" alt="" /></td>
        <td><a href="contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('submen_r3_c14','','../images/submen_r3_c14_f2.gif',1);"><img name="submen_r3_c14" src="../images/submen_r3_c14.gif" width="160" height="16" border="0" id="submen_r3_c14" alt="" /></a></td>
        <td rowspan="3"><img name="submen_r3_c15" src="../images/submen_r3_c15.gif" width="3" height="20" border="0" id="submen_r3_c15" alt="" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="16" border="0" id="undefined_2" /></td>
      </tr>
      <tr>
        <td rowspan="2"><img name="submen_r4_c2" src="../images/submen_r4_c2.gif" width="103" height="4" border="0" id="submen_r4_c2" alt="" /></td>
        <td rowspan="2"><img name="submen_r4_c4" src="../images/submen_r4_c4.gif" width="93" height="4" border="0" id="submen_r4_c4" alt="" /></td>
        <td rowspan="2"><img name="submen_r4_c6" src="../images/submen_r4_c6.gif" width="130" height="4" border="0" id="submen_r4_c6" alt="" /></td>
        <td rowspan="2"><img name="submen_r4_c8" src="../images/submen_r4_c8.gif" width="130" height="4" border="0" id="submen_r4_c8" alt="" /></td>
        <td rowspan="2"><img name="submen_r4_c12" src="../images/submen_r4_c12.gif" width="44" height="4" border="0" id="submen_r4_c12" alt="" /></td>
        <td rowspan="2"><img name="submen_r4_c14" src="../images/submen_r4_c14.gif" width="160" height="4" border="0" id="submen_r4_c14" alt="" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
      </tr>
      <tr>
        <td><img name="submen_r5_c10" src="../images/submen_r5_c10.gif" width="68" height="3" border="0" id="submen_r5_c10" alt="" /></td>
        <td><img src="../images/spacer.gif" alt="" name="undefined_2" width="1" height="3" border="0" id="undefined_2" /></td>
      </tr>
    </table>

  </div>
  <div id="Main">
    <div id="contact">
      <!-- BEGIN: Constant Contact Stylish Email Newsletter Form --> 
  <form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post"> 
  <p>Sign up to be on our mailing list!<br />
    </p>
  <p>
    <input type="text" name="ea" size="20" value=""> </input>
    <br /><br />
    <input type="submit" name="go" value="SUBMIT" class="submit"></input>
    <input type="hidden" name="m" value="1102046028088"> </input>
    <input type="hidden" name="p" value="oi"></input>
  </p>
</form> 
<!-- END: Constant Contact Stylish Email Newsletter Form --> 
</div> 
    <div id="BannerAd"></div>
        <div id="sponsors"><img src="../images/AllSponsorsBar.jpg" width="580" height="50" alt="Sponsors" /></div>
        
    
    <div id="facebook">
    <iframe src="http://www.facebook.com/plugins/likebox.php?id=142907955733194&amp;width=200&amp;connections=10&amp;stream=true&amp;header=true&amp;height=587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:587px;"></iframe>
    </div>
    
    <p class="mainText">Welcome to the Super Billiards Expo website. Our site is currently undergoing some major reconstruction, and none of the links are working as of now. We apologize for the inconvenience, you caught us on a construction day. This message was posted Aug 4, 2010 - please check back soon for full functionality.<br />
      <br />
      If you are looking for dates, the 2011 Super Billiards Expo will be held March 10-13, 2011
    Since you're here, why not become our fan on facebook? Click the icon to the right to join our fan page and follow along with important announcements. The facebook fanpage is new too, so we need to get some of our fans on there!</p>
    <p class="mainText">&nbsp;</p>
<p>&nbsp;</p>
  </div>  
  <!-- Closing tag for Main -->
    

  
    <div id="MenuBarBottom">
      <p class="pBottomMenu"><a href="amateur">AMATEUR EVENTS</a> &plusmn; <a href="pro.html">PRO EVENTS</a> &plusmn; <a href="exhibitors.html">EXHIBITORS</a> &plusmn; <a href="vip.html">VIP TICKETS</a> &plusmn; <a href="entryforms.html">ENTRY FORMS</a> &plusmn; <a href="contactus.html">CONTACT US</a></p>
    </div>
    
  <div id="footer">
  <p><strong>The Super Billiards Expo is produced annually by Allen Hopkins Productions.</strong><br />
  If you have any questions, call our business office at (609)652-6116<br />
  This website designed and maintained by Allen Hopkins Jr. at Fluid Designs
  </div>
  
  </div> <!-- Closing tag for Container -->
  
</body>
</html>
```
And the code for the Style sheet is here:


```
@charset "UTF-8";

html,body{
	height: 100%;
}


body {
	background-image: url(images/bgpattern30.jpg);
	margin: 0px;
	padding: 0px;
	position: relative;
}
#container {
	position:relative;
	width:100%;
	z-index:1;
	padding: 0px;
	margin: 0px;
}
#header {
	left:0px;
	top:0px;
	width:100%;
	height:200px;
	z-index:2;
	background-color: #798551;
	background-image: url(images/head.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#Main {
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
	position: relative;
}
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	padding-top: 70px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
	clear: none;
	width: 550px;
}
#footer {
	width:100%;
	height:74px;
	z-index:40;
	background-color: #74804d;
	margin: 0px;
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	text-align: center;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#MenuBar {
	width:100%;
	height:36px;
	z-index:15;
	border-top-style: dotted;
	border-top-color: #FFF;
	border-top-width: thin;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#facebook {
	width:200px;
	height:699px;
	z-index:13;
	background-color: #FFF;
	float: right;
}
#BannerAd {
	width:600px;
	height:90px;
	z-index:2;
	background-color: #999;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	float: right;
}

#contact {
	width:200px;
	height:90px;
	z-index:20;
	background-color: #036;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FF0;
	padding: 0px;
	float: left;
}
#SubMenu {
	width:100%;
	height:27px;
	z-index:41;
	background-image: url(images/SubMenuBar.gif);
	background-repeat: repeat;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	text-align: center;
}
#sponsors {
	width:582px;
	height:52px;
	z-index:22;
	float: left;
}
#MenuBarBottom {
	width:100%;
	height:35px;
	z-index:15;
	border-top-style: dotted;
	border-top-color: #FFF;
	border-top-width: thin;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	vertical-align: middle;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
}
.pBottomMenu {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	letter-spacing: 0.15em;
	word-spacing: 0em;
	font-weight: normal;
}
#container #MenuBarBottom .pBottomMenu a {
	color: #FFF;
	text-decoration: none;
}
#container #MenuBarBottom .pBottomMenu a:hover {
	color: #FF0;
	text-decoration: none;
}
```
Sorry I wasn't using code tags before - I wasn't aware of what to even look for when embedding code...

Thanks again for all your help, do you think I am on the path to having this set up correctly? I have added the rollover navigation elements, and the validation link you gave me shows lots of errors in there... Its all code generated by Fireworks and Dreamweaver, and it seems to be working properly. Since I don't know how to analyze all those results, I am going ot leave that part alone for now... Do you think thats OK?

Thanks again!


----------



## colinsp (Sep 5, 2007)

It's looking good, from an aesthetic point of view if it was my site I would move some stuff around. For example I would move the sign up to mailing list below the text, imho it is a bit in your face where it is.

You need to get your page to validate correctly there are now 59 errors on the page. This is very important. You will find that if you fix one error a lot of others that follow are corrected. There seem to be lots of issues about this page being a template within DW. Unless you desperately need it to be a DW template then I would make it into a normal page.

One thing to work towards is to get rid of the tables and replace them with div's where appropriate. Tables are not supposed to be used for layout just for displaying tabular data.

The other thing is to read up on CSS menus, because you can do everything you are doing now easily in CSS and imho it is a better way of doing it than the Dreamweaver way. Have a look here at some ways to create menus. This site is very good for all things CSS.

Let us know how you get on.


----------



## AllenJr (Aug 6, 2010)

Thanks again for your suggesstions!

I have reworked the navigation and eliminated the tables, and lots of the errors on the validation page. The code looks so much simpler now too, thanks 

I appreciate your feedback on the layout ideas, and I am aware that the signup box is sort of ugly there - but I do want that to be very noticeable, since a lot of what we do depends on mailing out notices and announcements. Plus, we get lots of phone calls form people saying the can't find this or that on the website, so I make this as easy as possible to find. Yes, I know it is not ideal aesthetically, but this is why...

I have reduced the validation page errors down to 11 - thanks for pointing me to this handy tool. While I don't understand exactly *why* these were errors, since the page was working, I do undertand that they needed to be fixed and can now work better keeping track of my work.

I don't understand why the last remaining errors are errors. Seems to be all in the meta tags and favicon link. Should I just remove these meta tags? I don't really understand their significance. Years ago a more experienced web designer (than me) told me to put these in my sites, so I always have been since then. What do you suggest? Are these outdated now, or do I just have them set-up wrong?

I suppose a lot of my problems come from being self taught and never knowing the ideal course of action. I know what can be done, but not how to do it - so I search until I find a way that works and go with it. Which I know is not always ideal. I've always thought that the Adobe software worked together nicely and didn't know it created so many errors in coding, which I am learning now.

Thank you so much for helping me along with this. It is incredibly helpful to have someone knowledgeable to look at things and suggest what is right or wrong. I really appreciate your generosity and expertise!! Thanks again!


----------



## tomdkat (May 6, 2006)

AllenJr said:


> I don't understand why the last remaining errors are errors. Seems to be all in the meta tags and favicon link. Should I just remove these meta tags? I don't really understand their significance. Years ago a more experienced web designer (than me) told me to put these in my sites, so I always have been since then. What do you suggest? Are these outdated now, or do I just have them set-up wrong?


It's due to the DOCTYPE you're using. The DOCTYPE tells the browser what kind of document follows it and the browser will render the page accordingly.

So, based on the XHTML 1.0 Transitional DOCTYPE you're using, the meta tags can't be in upper case, per the XHTML 1.0 spec.

Change "META" to "meta", "CONTENTS" to "contents" and so on and those errors should be fixed. In fact, here is the description of the first error:


> You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
> 
> This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
> 
> *How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.* If you received this error when using the element to incorporate flash media in a Web page, see the FAQ item on valid flash.


Then, at the bottom of the home page, there is a paragraph that isn't closed.

```
<div id="footer">
<p><strong>The Super Billiards Expo is produced annually by Allen Hopkins Productions.</strong><br />
If you have any questions, call our business office at (609)652-6116<br />
This website designed and maintained by Allen Hopkins Jr. at Fluid Designs
</div>
```
You need to add a closing "

" to that paragraph, and the last error and message should be cleared:

```
<div id="footer">
<p><strong>The Super Billiards Expo is produced annually by Allen Hopkins Productions.</strong><br />
If you have any questions, call our business office at (609)652-6116<br />
This website designed and maintained by Allen Hopkins Jr. at Fluid Designs[b][color=red]</p>[/color][/b]
</div>
```
Fix those things and your page should be very close to passing validation. 

Peace...


----------



## AllenJr (Aug 6, 2010)

Thanks again for all the great help.. I am making some good progress, even though some things may not be perfect - overall, things are working and I am learning as I go.

One thing is puzzling me... for some reason, the links on 2 of my site pages in the class .mainText are appearing smaller than other links, and a:hover property is not taking effect. I cant imaging why or how, maybe someone can help me?

Here is the style sheet, which is getting quite long:


```
@charset "UTF-8";

html,body{
	height: 100%;
}


body {
	background-image: url(images/bgpattern30.jpg);
	margin: 0px;
	padding: 0px;
	position: relative;
}
#container {
	position:relative;
	width:100%;
	z-index:1;
	padding: 0px;
	margin: 0px;
}
#header {
	left:0px;
	top:0px;
	width:100%;
	height:200px;
	z-index:2;
	background-color: #798551;
	background-image: url(images/head.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#Main {
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
}
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	margin: 0px;
	width: 550px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	clear: none;
}
.mainText2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	width: 95%;
	padding-top: 10px;
	padding-left: 15px;
}
#container #Main .mainText a:link {
	font-weight: bold;
	color: #036;
}
#container #Main .SignUpBox .howTo_text a:link {
	color: #006;
}
#container #Main .SignUpBox .howTo_text a:hover {
	color: #900;
}
#container #Main .SignUpBox .ExRegistrationTable tr td a:link {
	color: #006;
	font-weight: bold;
}
#container #Main .SignUpBox .ExRegistrationTable tr td a:hover {
	color: #C00;
}
#container #Main .mainText a:hover {
	color: #03F;
}
#container #Main .mainText a:visited {
	color: #000;
	font-size: 9px;
}
.eventLists {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #FFF;
	background-color: #879160;
	margin: 15px;
	width: 700px;
	border: thin dotted #32649F;
	font-weight: normal;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 25px;
}
#container #Main .eventLists a  {
	color: #000;
}
#container #Main .eventLists a:hover {
	color: #FFF;
}
#footer {
	width:100%;
	height:74px;
	z-index:40;
	background-color: #74804d;
	margin: 0px;
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	text-align: center;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#MenuBar {
	width:100%;
	height:36px;
	z-index:15;
	border-top-style: dotted;
	border-top-color: #FFF;
	border-top-width: thin;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#facebook {
	width:200px;
	height:588px;
	z-index:13;
	background-color: #FFF;
	float: right;
	color: #036;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	font-style: italic;
	background-image: none;
}
#BannerAd {
	width:600px;
	height:95px;
	z-index:2;
	background-color: #000;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	float: right;
}

#contact {
	width:198px;
	height:93px;
	z-index:20;
	background-color: #036;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FF0;
	padding: 0px;
	float: left;
	border: 1px dotted #FFF;
}
#SubMenu {
	width:100%;
	height:27px;
	z-index:41;
	background-image: url(images/SubMenuBar.gif);
	background-repeat: repeat;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	text-align: center;
}
#sponsors {
	width:597px;
	height:52px;
	z-index:22;
	float: left;
	text-align: center;
	position: relative;
	background-color: #e5e1d9;
}
.sponsorLogos {
	float: left;
	padding-right: 23px;
	padding-left: 23px;
	margin-top: 6px;
}
#MenuBarBottom {
	width:100%;
	height:35px;
	z-index:15;
	border-top-style: dotted;
	border-top-color: #FFF;
	border-top-width: thin;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	vertical-align: middle;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
}
.pBottomMenu {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	letter-spacing: 0.15em;
	word-spacing: 0em;
	font-weight: normal;
}
#container #MenuBarBottom .pBottomMenu a {
	color: #FFF;
	text-decoration: none;
}
#container #MenuBarBottom .pBottomMenu a:hover {
	color: #FF0;
	text-decoration: none;
}
#container #Main ul {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 16px;
	width: 500px;
	color: #333;
}
#container #Main div a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #F00;
	text-decoration: underline;
}
#container #Main div a:hover {
	color: #600;
}
.HotelTable {
	background-color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #333;
	margin-left: 25px;
	border: thin dotted #333;
}
#TAPBanner {
	width:800px;
	height:40px;
	z-index:1;
	background-color: #333;
	margin-right: auto;
	margin-left: auto;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: ridge;
	border-top-color: #305F8C;
	border-right-color: #305F8C;
	border-bottom-color: #305F8C;
	border-left-color: #305F8C;
	border-left-style: ridge;
}
#TopOfMain {
	width:800px;
	height:95px;
	z-index:11;
	background-color: #0F0;
	margin-right: auto;
	margin-left: auto;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: ridge;
	border-left-style: ridge;
	border-top-color: #305F8C;
	border-right-color: #305F8C;
	border-bottom-color: #305F8C;
	border-left-color: #305F8C;
	position: relative;
}
#HotelTable tr {
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #666;
}
.maintextRed {
	color: #C00;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
#TopOfMain2 {
	width:800px;
	height:50px;
	z-index:11;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: ridge;
	border-left-style: ridge;
	border-top-color: #305F8C;
	border-right-color: #305F8C;
	border-bottom-color: #305F8C;
	border-left-color: #305F8C;
	position: relative;
}
#AboveFacebook {
	width:200px;
	height:50px;
	z-index:13;
	background-color: #333;
	float: right;
	color: #036;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	font-style: italic;
	background-image: none;
}
#container #Main .mainText2 a:link {
	font-weight: bold;
	color: #036;
}
#container #Main .mainText2 a:hover {
	color: #03F;
}
#container #Main .mainText2 a:visited {
	color: #000;
	font-size: 9px;
}
.eventDetails {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #2456A2;
	padding: 10px;
	width: 500px;
	margin-left: 15px;
	color: #FFF;
	border: thin dotted #003;
}
.eventSpecifics {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #505439;
	padding: 10px;
	width: 500px;
	margin-left: 15px;
	color: #FFF;
	border: thin dotted #003;
}
#SignUpBox {
	background-color: #F90;
	width: 750px;
	padding: 10px;
	border: 1px dotted #006;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 50px;
	margin-left: 15px;
}
.SignUpBox {
	background-color: #FF9;
	width: 750px;
	padding: 10px;
	border: 1px dotted #006;
	margin-top: 5px;
	margin-right: 15px;
	margin-bottom: 5px;
	margin-left: 15px;
}
.ExRegistrationTable {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #333;
	margin: 0px;
	padding: 10px;
	border: thin none #000;
	line-height: 1.3em;
}
.SignUpForm {
	background-color: #FF9;
}
.signUpText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
	margin: 0px;
	padding: 0px;
}
.signUpText h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #060;
	margin: 0px;
	padding: 0px;
	background-color: #30F;
}
#RatingSystem {
	position:absolute;
	left:606px;
	top:656px;
	width:190px;
	z-index:1;
	text-align: center;
	font-style: italic;
	color: #006;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	margin: 0px;
	padding: 0px;
}
.ExhibitorTable {
	background-color: #ACB77A;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #000;
}
#container #Main .ExhibitorTable tr td {
	text-align: center;
	border: 1px dotted #FFF;
	padding: 3px;
}
.oddrow {
	background-color: #D1DA9E;
}
.HeadRow {
	background-color: #5386C2;
}
.ExhibitorTable th {
	background-color: #888E62;
	padding: 6px;
}
.howToHead {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
	background-color: #F00;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: 10px;
	margin-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 0px;
}
.howTo_option1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333;
	background-color: #FC0;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: 10px;
	margin-left: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.howTo_text {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333;
	margin: 0px;
	padding: 7px;
	line-height: 1.4em;
}
.howTo_text_red {
	color: #900;
}
```
And the 2 pages with weird links are here:
http://www.superbilliardsexpo.com/exhibitors.html
and
http://www.superbilliardsexpo.com/exhibitorregistration.html

If you'll look, the links in the mainText class are appearing smaller and with no hover effect. If all styles are linked to the style sheet, since all pages have this same error? How can it be just these 2 pages?

Thanks, hope someone can help!


----------



## tomdkat (May 6, 2006)

AllenJr said:


> One thing is puzzling me... for some reason, the links on 2 of my site pages in the class .mainText are appearing smaller than other links, and a:hover property is not taking effect. I cant imaging why or how, maybe someone can help me?
> 
> (snip)
> 
> ...


I don't see any text links on the page contained in any element assigned class "mainText". So, review your HTML to make sure the links you want to behave the desired way are coded appropriately.

Peace...


----------



## AllenJr (Aug 6, 2010)

Thanks for taking a look, I should have posted code to make it easier... This is the line of text right under the maps on the exhibitorregistration.html page


```
<p class="mainText">&nbsp;</p>
    <p class="mainText"><strong>To see the list of registered vendors and check availability, please go back to the <a href="exhibitors.html">main exhibitors page</a></strong></p>
    <p class="mainText">&nbsp;</p>
```
Did I not assign the class correctly? Shouldn't the link be the same size as the rest of the text?

Maybe I am stating something incorrectly, sorry, im very new to CSS


----------



## tomdkat (May 6, 2006)

Ok I searched the FIRST page for the link inside the element with the class "mainText" assigned and didn't find any. 

Here's the dealio:

First, the font size of that link is too small because of the style rule of the #Main element id:


```
#Main {
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
[b][color=red]font-size: 9px;[/color][/b]
}
```
Since this rule is for a particular element, elements contained within #Main will need some "help" to get their styles applied.

So, you'll need to add an "! important" specification to get your style rules to apply, like this:


```
#container #Main .mainText a {
[b][color=red]	font-size: 12px [u]! important[/u];[/color][/b]
	font-weight: bold;
	color: #036;
}

#container #Main .mainText a:hover {
	color: #03F[b][color=red] ! important[/color][/b];
}
```
Also, you'll notice I took the ":link" off of the selector for the anchor element AND I specified the desired font size for the anchor element in the style rule for the anchor element.

I tend to stay away from using specific element style rules due to issues like this. 

Peace...


----------



## AllenJr (Aug 6, 2010)

Thanks again! I updated the code based on your suggestion, and the font is now the same size... I have never seen that !important code before.

I am curious why you suggest removing "link" from the a: selector, is it just unnneccesary?

Also, not sure if it is related, but now none of the "hover" effects are taking place... the links all used to change colors when highlighted, but now nothing happens... not a major deal, Im mainly just confused as to why?

Here is the relevant code (I think):


```
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px ! important;
	color: #333;
	margin: 0px;
	width: 550px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	clear: none;
}
#container #Main .mainText a: {
	font-size: 12px ! important;
	font-weight: bold;
	color: #036;
}
#container #Main .mainText a:hover {
	color: #03F;
}
#container #Main .mainText a:visited {
	color: #000;
	font-size: 9px;
```
Also, I was thinking, I probably don't need to specify the font size 9 in the code below:

```
#Main {
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
}
```
I typically apply a class everywhere text is used anyway, so I should probably just remove that specification, right? Seems like maybe it is just causing problems?

Thanks again for all your help!!


----------



## AllenJr (Aug 6, 2010)

Oh wow, duh, I just looked at the code I posted and I have the font size set to 9 for a:vistited - I don't know why I would have done that, must have been an accident.

I didn't notice that before, that is probably causing the error too, right? 

Im gonna work on things for a bit, just wanted to post quickly so you knew I saw that...


----------



## tomdkat (May 6, 2006)

AllenJr said:


> I am curious why you suggest removing "link" from the a: selector, is it just unnneccesary?


You need to be more careful with your changes. 

I didn't suggest removing "link" but "*:*link". You left the colon in your CSS style rule below:


```
#container #Main .mainText a[b][color=red]:[/color][/b] {
	font-size: 12px ! important;
	font-weight: bold;
	color: #036;
}
```
which I believe is a syntax error. Get that corrected and see what happens. On my test version of the exposition page, the text links I could find on the page all changed color when I hover the mouse over them.



> Also, I was thinking, I probably don't need to specify the font size 9 in the code below:
> 
> ```
> #Main {
> ...


Well, that's for you to decide since the style rules are yours. 

Peace...


----------



## tomdkat (May 6, 2006)

AllenJr said:


> Oh wow, duh, I just looked at the code I posted and I have the font size set to 9 for a:vistited - I don't know why I would have done that, must have been an accident.
> 
> I didn't notice that before, that is probably causing the error too, right?


Nope, I don't think that's related. If you want a different font size for a visited link, that's for you to decide. 

The problem you described above was due to a syntax error you introduced by removing "link" incorrectly.

Peace...


----------



## AllenJr (Aug 6, 2010)

OK, so I'm still confused... I took the size spec off the a:visited selector, and everything else seems Ok, but the hover effect still is not working on this page, but it does work on a different page. If all pages refer to the same style sheet, shouldn't the same thing happen on all pages?

So confused, sorry to be so bothersome with my questions.

Here is the relevant CSS code (I think)


```
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px ! important;
	color: #333;
	margin: 0px;
	width: 550px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	clear: none;
}
.mainText2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	width: 95%;
	padding-top: 10px;
	padding-left: 15px;
}
#container #Main .mainText a: {
	font-size: 12px ! important;
	font-weight: bold;
	color: #036;
}
#container #Main .mainText a:hover {
	color: #03F;
}
#container #Main .mainText a:visited {
	color: #000;
```
And here are 2 sample pages, both refer to the same style sheet as far as I can tell, unless I did something wrong:
Page with hover working: http://www.superbilliardsexpo.com/index.html
Page with hover NOT working: http://www.superbilliardsexpo.com/exhibitorregistration.html

Thanks again!


----------



## AllenJr (Aug 6, 2010)

Sorry, my messages overlapped yours  I will get back to working on it, being more careful...

Thanks again!


----------



## tomdkat (May 6, 2006)

tomdkat said:


> You need to be more careful with your changes.
> 
> I didn't suggest removing "link" but "*:*link". You left the colon in your CSS style rule below:
> 
> ...





AllenJr said:


> OK, so I'm still confused...
> 
> (snip)
> 
> ...


You should fix that first and see what happens.

Peace...


----------



## AllenJr (Aug 6, 2010)

Haha, Ok, I just don't get it... I still can't see the hover effect. I can see it when I preview the site locally (I am using Dreamweaver and tweaking the code myself as I go)

Can you use more than 1 hover effect per page, in different classes? I am doing that, I wonder if only 1 is working and that's the one you see? The main link I am looking at is directly under the map graphics on this page:

http://www.superbilliardsexpo.com/exhibitorregistration.html

I know the rollover is working on the "Home/Back" nav buttons, but those are a different class. Maybe thats the problem? I ruled that out because I have multiple classes on other pages and they are working fine. Maybe its just a browser issue, Im using Chrome, and checking in Firefox and Safari as well...

And here is the CSS, which I think I've edited correctly now:

```
#Main {
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
}
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px ! important;
	color: #333;
	margin: 0px;
	width: 550px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	clear: none;
}
#container #Main .mainText a {
	font-size: 12px ! important;
	font-weight: bold;
	color: #036;
}
#container #Main .mainText a:hover {
	color: #03F;
}
#container #Main .mainText a:visited {
	color: #000;
}
```
Thanks for being so patient and helpful, I am trying to learn this on my own through a book and google  It is extremely helpful to have someone knowledgeable to help me out...


----------



## tomdkat (May 6, 2006)

AllenJr said:


> Sorry, my messages overlapped yours  I will get back to working on it, being more careful..


No problem, it happens. 

Now, during my testing, I found removing the ":link" from the style rule for the anchor element caused the link, in question, to behave the way you wanted. Try removing the "*:*link" (not just the work "link") and see what happens.

Peace...


----------



## AllenJr (Aug 6, 2010)

Is it possible that the hover effect will not work on a link after it has been visited?

From what I know, the hover should always work, whether you ve used the link before or not. Could I have coded that out somehow?

That seems to be what just happened, in Safari. I saw the link, it changed when I hovered, I clicked through and went back, and then the hover didn't work again...

Hmmm.. no idea


----------



## tomdkat (May 6, 2006)

AllenJr said:


> Haha, Ok, I just don't get it... I still can't see the hover effect. I can see it when I preview the site locally (I am using Dreamweaver and tweaking the code myself as I go)


Ok, please go back to post #15 and review my comments there. The answer to this question is in that post. 

You should also read about CSS order of precedence:

http://www.w3.org/TR/CSS2/cascade.html
http://htmlhelp.com/reference/css/structure.html
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

It's dry reading and confusing but might help shed some light on things. Basically, having the div with id 'Main' having "element specific" style rules is causing you grief.

Peace...


----------



## AllenJr (Aug 6, 2010)

haha, guess I shouldn't try to follow instructions before my caffeine fix 

Working now, thanks so much! I still don't understand exactly "why" I need to add "! important", but I am going to spend some time later or this weekend reading over the links you sent.... Most of what I have read so far dealt with the CSS Box Model, there is so much out there to read, and sometimes I dont know where to start... any more links you wanna send would be appreciated!

Thanks again!


----------



## tomdkat (May 6, 2006)

Actually, here is a link to a thread I started about a great tutorial on CSS floats. You might want to check that out too. 

Good luck!

Peace...


----------

