1 reply [Last post]
scott12
Offline
newbie
Port Huron, MI
Last seen: 11 years 1 week 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
any help is appreciated.

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: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Shift around?

What does shift around mean?

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