CSS Not working in Internet Explorer

**Aldous** · 15-01-2010

Hello friends,

I am facing some issue with Internet Explorer, where i am working on a page where i had created a a navigation bar in CSS and at the same time i am using image backgrounds to shape the bar. Everything works fine expect the top image is repeated twice, instead of the second cell having the image assigned for it. Can anyone help me out with this issue ?

**Benedict** · 15-01-2010

Sure i will help you out with your issue but before that can you tell me which version of Internet explorer are you using it and is it possible for you to provide me CSS code so that i can check it out whether there is some mistake in your code or there is some another issue ?

**Aldous** · 15-01-2010

I am trying to use it in Internet Explorer 7 and following is the code which i am using for my navigation bar table

Code:

<table style="width: 100%; margin-top: 5px;" cellspacing="0" cellpadding="3">
 <tr>
  <td class="submenutop">&nbsp;</td>
  <td rowspan="4" class="mainbody">&nbsp;</td>
 </tr>
 <tr>
  <td class="submenumed">&nbsp;</td>
 </tr>
 <tr>
  <td class="submenumed">&nbsp;</td>
 </tr>
 <tr>
  <td class="submenubot">&nbsp;</td>
 </tr>
</table>

and if i try to use it in Mozilla Firefox then it works fine, but in Internet Explorer i am facing this issue and below part the the CSS code hope it will help you out ?

Code:

.submenutop {
 background-color: white;
 width: 145px;
 height:30px;
 font-family: Italic;
 font-size: medium;
 background-image: url('images/NAV1/menubar_top.jpg');
}
.submenumed{
 background-color: white;
 width: 145px;
 height:30px;
 font-family: Arial;
 font-size: medium;
 background-image: url('images/NAV1/menubar_mid.jpg');
}
.submenubot{
 background-color: white;
 width: 145px;
 height:31px;
 font-family: Italic;
 font-size: medium;
 background-image: url('images/NAV1/menubar_bot.jpg');
}
.mainbody {
 vertical-align: top;
}

**Benedict** · 15-01-2010

Your CSS code seems to be very confusing and meaningless on your requirements i had create a HTML page along with CSS code have a look over it hope you get some idea from it.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Child Association - home page</title>
<link href="main_styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <h1>Child Association</h1>
  <ul id="main_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Information</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">About Us</a></li>
  </ul>
  <ul class="sub_menu">
    <li><a href="#" class="first">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#" class="last">Link4</a></li>
    </ul>
  <div id="content">Content Goes Here</div>
  <div id="footer">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Information</a></li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Links</a></li>
      <li class="last"><a href="#">About Us</a></li>
    </ul>
  </div>
</div>
</body>
</html>

and try to use the following CSS with it

HTML Code:

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #000080;
	color: #FFFFFF;
	font-family: Times New Roman, Helvetica, sans-serif;
	font-size: 14px;
}
#wrapper {
	width: 760px;
	margin: 0 auto;
	background-color: #FFFFFF;
	color: #000000;
}
h1 {
	display: block;
	height: 150px;
	background-image: url(images/new_banner.png);
	font-size: 1px;
	text-indent: -1000px;
}
#main_nav {
	display: block;
	overflow: hidden;
	height: 1.5em;
}
#main_nav li {
	list-style: none;
	float: left;
	display: inline;
}
#main_nav a {
	display: block;
	width: 152px;
	background-color: #0000D9;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	height: 1.5em;
	line-height: 1.5em;
}
#main_nav a:hover {
	background-color: #5172CA;
}
.sub_menu {
	margin: 5px 2px;
	float: left;
}
.sub_menu li {
	list-style: none;
}
.sub_menu a {
	display: block;
	width: 150px;
	height: 29px;
	text-align: center;
	text-decoration: none;
	line-height: 29px;
	background-image: url(images/NAV!/menubar_mid.jpg);
	color: #000000;
}
.sub_menu .first {
	background-image: url(images/NAV1/menubar_top.jpg);
	height: 30px;
}
.sub_menu .last {
	background-image: url(images/NAV1/menubar_bot.jpg);
	height: 37px;
}
.sub_menu a:hover {
	color: #0000FF;
}
#content {
	margin: 5px 10px 5px 160px;
}
#footer {
	clear: both;
}
#footer ul {
	text-align: center;
}
#footer li {
	list-style: none;
	display: inline;
	border-right: 1px solid black;
}
#footer .last {
	border: 0;
}
#footer a {
	color: #0000FF;
	text-decoration: none;
	font-weight: bold;
	padding: 2px  5px;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
}
#footer a:hover {
	color: #000000;
}

**SreeKanth** · 15-01-2010

According to me whatever you had made is meaningless, according to me you should think of content display and then styling, which means you need to first get rid of tables which are not used for layout purpose. Along with that Main banner should marked up as <h1> which is know as heading text, which can then be styled to show the graphic rather than the text and menus should be lists of lists of links, which can be styled anyway you like. The overall site can be contained within a wrapper to define width and centering.