1 reply [Last post]
scott12
Offline
newbie
Port Huron, MI
Last seen: 3 years 20 weeks ago
Port Huron, MI
Timezone: GMT-4
Joined: 2011-07-30
Posts: 3
Points: 6

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;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Don't post the same thread in different forums

Thread closed. Discussion can continue in the other one.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference