3 replies [Last post]
eduski
Offline
newbie
Cleveland, OH
Last seen: 2 years 31 weeks ago
Cleveland, OH
Timezone: GMT-5
Joined: 2012-01-14
Posts: 5
Points: 8

My website works in all other browsers but not IE7. The site is Lacrosse Solutions. The problem is the top link row will not stay in line with the logo header. Any assistance is appreciated. CSS is below.

html, body {
	background-image: url('images/webbg.jpg');
	background-repeat:repeat-x;
	background-color: #fff;
	margin: 0;
	padding: 0;
	line-height: 1em;
	height: 100%;
}
 
img {
	margin: 0;
	padding: 0;
	border: 0;
}
 
li {
	margin: 0;
	padding: 0;
	border: 0;
}
 
div#container {
	position: relative;
	width: 950px;
	margin: 0 auto;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
 
div#topheader {
	position: relative;
	color: #e8e8e8;
	background-color: #000;
	width: 950px;
	margin: 0 auto;
	padding: 4px 0px 3px 0px;
	height: 28px;
	line-height: 28px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
 
#topheader a {
  color: #e8e8e8;
}
 
div#header {
  background-color: #292929;
  width: 950px;
  padding: 0;
  clear: both;
}
 
.logo {
	float: left;
	margin: 0px 0 0px 0px;
	z-index: 100;
}
 
div#navigation {
	float: right;
	width: 645px;
	height: 100px;
	line-height: 100px;
	background-color: #292929;
	text-align: right;
	margin-bottom: 0px;
}
 
div#contentarea {
	padding-bottom: 3em; /* bottom padding for footer */
	width: 950px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #292929;
 }
 
#contentarea a {
	color: #292929;
 }
  .contentbig {
	clear: both;
	width: 950px;
	padding-top: 10px;
}
 
.contentbig .htd { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 18px;
color: #292929;
background-color: #f79c2f;
text-align: center;
}
 
.contentbig .std { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
font-weight: bold;
padding: 4px;
color: #e8e8e8;
background-color: #565656;
}
 
  .contentbig .itd {
	color: #e8e8e8;
	background-color: #565656;
	padding: 4px;
	text-align: center;
}
 
 .contentone {
	width: 680px;
	margin-left: 0px;
	float: left;
}
 
.frontarticle {
	width: 950px;
	height: 447px;
	background: #e8e8e8;
}
 
.col3 {
	float: left;
	width: 300px;
	height: 300px;
	margin: 10px 3px 10px 3px;
	padding: 5px;
	color: #292929;
}
 
.col3_orange {
	float: left;
	width: 300px;
	height: 300px;
	margin: 10px 3px 10px 3px;
	padding: 5px;
	background: #f79c2f;
	color: #292929;
}
 
.col3_blue {
	float: left;
	width: 300px;
	height: 300px;
	margin: 10px 3px 10px 3px;
	padding: 5px;
	background: #1a5bf0;
}
 
.feature3 {
	float: left;
	width: 300px;
	height: 200px;
	margin: 10px 6px 6px 0px;
	padding: 5px;
	color: #292929;
}
 
.feature3_orange {
	float: left;
	width: 300px;
	height: 200px;
	margin: 10px 6px 6px 0px;
	padding: 5px;
	background: #f79c2f;
	color: #292929;
}
 
.feature3_blue {
	float: left;
	width: 300px;
	height: 200px;
	margin: 10px 6px 6px 0px;
	padding: 5px;
	background: #1a5bf0;
}
 
.contentoneimg{
	float: right;
	margin: 6px;
	clear: both;
}
 
 
.contenttwo {
	width: 220px;
	float: right;
	padding-right: 0px;
	padding-top: 10px;
}
 
.zoompic{
	clear: both;
	margin-bottom: 30px;	
}
 
div#push {
	clear: both;
	width: 950px;	
	height: 20px;
}
 
div#footerarea {
	position: absolute;
	clear: both;
	width: 950px;
	bottom: -60px;
	background-color: #e5e5e5;
	background-repeat: repeat-y;
	color: #292929;
}
 
#footerarea a:link, a:visited {
	color: #e8e8e8;
}
 
#footerarea a:hover {
	color: #e8e8e8;
	text-decoration: underline;
}
 
 
.footerone {
	width: 660px;
	font-size: 12px;
	float: left;
	text-align: left;
	padding: 6px;
}
 
 
.footertwo {
	width: 260px;
	float: right;
	text-align: left;
}
 
.title { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 18px;
color: #e8e8e8;
}
 
.title_light { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 18px;
color: #292929;
}
 
.submit {
color: #FFFFFF;
background: #1a5bf0;
border: 1px #1a5bf0 solid;
font-weight: bold;
font-size: 11px;
margin: 0px 0px 0px 0px;
}
 
form {margin: 0px 0px 0px 0px;}

//mode edit: link fixed ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3172

Not tested

Why are you using the child selector?

.navmenu li {
    color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    list-style-type: none;
    padding-left: 10px;
    padding-right: 10px;
}
 
.navmenu > li {
    float: left;
}

As I recall, IE7 does not support it, and I see no compelling reason for its use here.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

eduski
Offline
newbie
Cleveland, OH
Last seen: 2 years 31 weeks ago
Cleveland, OH
Timezone: GMT-5
Joined: 2012-01-14
Posts: 5
Points: 8

Thanks for your input.

Thanks for your input. deleting the child selector makes only the one home link appear within hat row, the rest of the links disappear. Any thoughts?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3172

Did you not move the float

Did you not move the float property to the descendent selector, i.e. .navmenu li {float: left;}?

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.