Sat, 2011-07-30 16:34
I work for non-profit housing and I want to build a site to recruit volunteers and donations. I have validated my code and am currently testing on different browsers. The only problem I see is that the navigation menu shifts around on IE 7 and earlier. IE 8, IE 9, Firefox, Chrome, etc seem to be fine. The temporary site I got from hostmonster is:
http://74.220.215.79/~phhcvolu
My CSS code is as follows:
body {
padding : 0;
line-height : 1.2em;
margin : 0;
text-align : justify;
background-color : white;
background-image : url(images/silvervine.jpg);
}
#maincontainer {
width : 980px;
margin : 0 auto;
background-color : white;
background-image : url(images/1.gif);
background-repeat : repeat-y;
}
#topsection {
background : #233873;
height : 120px;
padding-bottom: 30px;
}
#topsection h1 {
margin: 0;
padding-top : 15px;
}
#contentwrapper {
float : left;
width : 100%;
}
#contentcolumn {
margin-left : 220px;
}
#leftcolumn {
float : left;
width : 220px;
margin-left : -980px;
background : #233873;
color : #a0a0a0;
border-right-color : #a0a0a0;
border-right-width : 3px;
border-right-style : solid;
}
img.vistalogo {
float : left;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 5px;
margin-right : 8px;
}
img.lablogo {
float : left;
margin-top : 5px;
margin-bottom : 15px;
margin-left : 5px;
margin-right : 8px;
}
img.habitatlogo {
float : left;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 5px;
margin-right : 8px;
}
img.tomato {
float : left;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 5px;
margin-right : 8px;
}
img.grocery {
float : left;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 5px;
margin-right : 8px;
}
h3 {
font-weight : bold;
font-size : 1.5em;
font-family : "Pristina", "Monotype Corsiva", "Freestyle Script", "MV Boli", "Comic Sans MS", "Papyrus";
}
#sitelogo {
text-indent : -5000px;
background : url(images/orgbanner1.jpg) no-repeat;
width : 980px;
height : 120px;
line-height : 120px;
}
#lab {
clear : left;
}
#garden {
clear : left;
}
#donate {
clear : left;
}
#habitat {
clear : left;
}
p#welcome {
font-weight : bold;
font-variant : small-caps;
font-size : 1.2em;
}
h4 {
text-decoration : underline;
font-weight : bold;
font-size : 1.1em;
}
#footer {
clear : left;
width : 100%;
background : #a0a0a0;
color : #233873;
text-align : center;
padding : 4px 0;
}
.innertube {
margin : 20px;
}
ul.underlinemenu
{
margin-top:-18px;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul.underlinemenu li
{
display:block;
float:left;
margin:0;
padding:0;
margin-right: 12px;
}
ul.underlinemenu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul.underlinemenu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul.underlinemenu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
.collinks a {
color : #a0a0a0;
padding : 3px;
text-decoration : none;
}
.collinks a:hover, a.selected {
color : #ffffff;
border-bottom-color : #ffffff;
border-bottom-style : solid;
}
.element1 {
margin-left : 120px;
}
.element2 {
margin-left : 60px;
}
