Solved

Need help with web design issue on IE8

Posted on 2009-07-06
2
610 Views
Last Modified: 2012-05-07
Dear fellow web developers:

I am having some issues with my website: http://www.mcnickel.com .  On the "About us" section, unfortunately, in IE8, the page is not appearing correctly (http://www.mcnickel.com/aboutus.html).
Instead of the vertical navigation menu bar appearing on the left hand side, the options "testing", "outplacement", and "Contact/Office Locations" are appearing as a bulletted list in the picture.  As I said earlier, this is only happening in IE8, and not any other browser like firefox or safari.  Can anyone figure out why it is doing this?  I am attaching a screen shot of the error, and I am also providing the CSS markup for the site as well.  The HTML for the page can simply be viewed by checking the source code directly from the browser.

Thanks to all who reply.
body {
	font: 11px Tahoma, Arial, sans-serif;
	background:#265051;
	color:#fff;
	margin:0;
}
form {
	margin:0;
	padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
	text-decoration: underline;
	color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
	overflow: hidden;
	width: 100%;
}
#main {
	margin:0 auto;
	width:780px;
	overflow:hidden;
	position:relative;
}
/* header block styles */
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding: 93px 0 0;
	width: 100%;
	height:310px;
	overflow:hidden;
}
#header .header-area {
	background: #fff;
	overflow: hidden;
	padding: 1px 0;
	width: 100%;
	height: 253px;
	clear: both;
}
#header .header-area img {
	float: right;
}
/* logo styles */
#header strong.logo {
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
	width: 780px;
	height: 93px;
	margin: -93px 0 0 20px;
}
#header strong.logo a {
	position: relative;
	cursor: pointer;
	display: block;
	height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
	background: url(../images/bg-slogan.png) repeat-x;
	overflow: hidden;
	height: 55px;
}
#header span.slogan {
	background: url(../images/slogan.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: right;
	width: 585px;
	height: 55px;
}
/* navigation menu styles */
#navigation {
	font: bold 15px/15px Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	text-transform: uppercase;
	background: #aec2c3;
	list-style: none;
	padding: 13px 0 0;
	margin: 0;
	width: 227px;
	height: 100%;
	float: left;
}
#navigation li {
	margin: 0 0 6px;
	width: 100%;
	float: left;
}
#navigation a {
	padding: 6px 0 4px 93px;
	text-decoration: none;
	color: #fff;
	background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
	/* uncomment this line for light grey color */
	/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
	display: block;
	width: 134px;
}
#navigation a:hover,
#navigation a.active {
	background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
	position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
	background: #aec2c3;
	position: absolute;
	list-style: none;
	display: none;
	padding: 6px 0 0;
	margin: 0;
	left: 217px;
	top: -6px;
	width: 270px;
}
#navigation ul a {
	background-position: 10px 10px !important;
	padding: 6px 5px 4px 30px;
	width: 235px;
}
#navigation ul ul {
	left: 260px;
	width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
 
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#elabour #navigation .elabour a,
#eadmin #navigation .eadmin a{
	background-color: #407273; 
	background-image: url(../images/menuitem-hover.gif);
	color: white;
}
/* content block styles */
#content {
	background: url(../images/bg-content.png) repeat-y;
	padding: 0 0 22px;
	overflow:hidden;
	width: 100%;
}
#content .content-area {
	margin: 0 0 0 28px;
	overflow: hidden;
	padding: 25px 18px 0;
	display: inline;
	width: 476px;
	float: left;
}
#content h1, #content h2 {
	font: 20px/20px "Times New Roman", Times, serif;
	text-transform: uppercase;
	margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
	background: #067d81;
	padding: 14px 30px 14px 15px;
	margin: 0 0 17px;
	overflow: hidden;
	width: 430px;
}
#content .welcome img {
	border: 1px solid #fff;
	margin: 3px 0 0;
	float: left;
}
#content .welcome .welcome-text {
	width: 315px;
	float: right;
}
#content .welcome strong {
	margin: 0 0 5px;
	display: block;
}
#content .welcome a {
	color: #e79836;
}
#content .welcome p {
	line-height: 18px;
	margin: 0;
}
/* content columns block styles */
#content .columns-holder {
	background: url(../images/bg-divider.png) repeat-y 214px 0;
	overflow: hidden;
	clear: both;
	width: 520px;
}
#content .columns-holder .column1 {
	padding: 0 20px;
	width: 179px;
	float: left;
}
#content .columns-holder .column2 {
	padding: 0 84px 0 20px;
	width: 179px;
	float: left;
}
/*#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}*/
 
#content .columns-holder p,
#content .columns-holder q {
	line-height: 17px;
	margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
	color: #adc2c2;
	font-weight: bold;
	font-style: italic;
	display: block;
	text-align: right;
	padding: 0 4px 0 0;
	margin: 0;
}
/* side column block styles */
#content .sidecolumn {
	padding: 35px 29px 20px 35px;
	width: 176px;
	float: right;
	text-align: center; 
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
	list-style: none;
	padding: 0;
	margin: 0;
}
#content ul.headlines li {
	padding: 0 0 22px;
}
#content ul.headlines span.date {
	color: #14989b;
	display: block;
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: bold;
}
#content ul.headlines strong {
	display: block;
	color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
	font-weight: bold;
	font-size: 9px;
	padding: 15px 0 0;
	text-align: right;
	display: block;
}
#content ul.headlines span.read-more a {
	background: url(../images/readmore.gif) no-repeat 0 50%;
	padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
	background: url(../images/bg-footer.png) repeat-y;
	padding: 9px 0;
	overflow:hidden;
	width:100%;
}
/* copyright string styles */
#footer strong {
	padding: 0 0 0 46px;
	font-weight: normal;
	color: #819d9d;
	float: left;
}
/* footer navigation styles */
#footer ul {
	overflow: hidden;
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0 20px 0 0;;
	float: right;
}
#footer ul li {
	background: url(../images/separator1.gif) no-repeat 100% 50%;
	margin: 0 -1px 0 0;
	padding: 0 13px 0 14px;
	float: left;
}
/*#footer a {color:#e79836;}*/
#footer a {color:#14989b;}

Open in new window

aboutus-error.jpg
0
Comment
Question by:fsyed
2 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 24788641
In line 46 of your code of your HTML, there is an extra </li>  
Delete it and tell me if that works for you.
0
 

Author Closing Comment

by:fsyed
ID: 31600303
Thanks very much for your prompt reply, your solution fixed the problem!  Points well deserved!  

Take care.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
add image on html mail 6 27
Index on a Table 6 25
Html fieldset fix its height and width 4 33
How do I select this logo using CSS? 6 30
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question