CSS Menu Problem in IE

Navigation Menu works correct in FF, but not in IE

Page 1 of 1

3 Replies - 2979 Views - Last Post: 17 May 2009 - 10:08 AM

#1 msanders5  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-May 09

CSS Menu Problem in IE

Post icon  Posted 16 May 2009 - 05:30 PM

Hello I have a CSS menu that works great within FF, but when viewed in IE the text gets off centered, and the vertical alignment is very off.

I think the problem is more related to me putting the code into a table, as when the code is not in a table it appears to display okay.

I'm looking for a second set of eyes to help me spot my problem.

The code
 <div align="center">
	<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>	
		<div id="dolphincontainer"> 
		<div id="dolphinnav"> 
	<ul> 
	<li><a href="index.php" title="css website navigation menus" class="<?php echo $activehomepg ?>" <span>
	Home</span></a></li> 
	<li><a href="admin/index.php" title="css website navigation menus" class="<?php echo $activeadminpg ?> "<span>
	Admin</span></a></li> 
	<li><a href="" title="css website navigation menus" class="<?php echo $activeannoucementspg ?> "<span>
	Announcements</span></a></li> 
	<?php 
		if($loggedin == 'yes'){
			echo '<li><a href="" title="css website navigation menus" class=".$activedatabasespg."<span>
	Databases</span></a></li>';
		}
		?>
	<li><a href="" title="css website navigation menus" class="<?php echo $activehelppg ?> "<span>
	Help</span></a></li> 
	</ul> 
	</div> 
	</div> </td>
			</tr>
		</table>
		</div>


the css for the menu is here
 /* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#313f67;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */



Any idea's what I'm doing wrong?

Looking forward to any assistance.

-M

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Menu Problem in IE

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: CSS Menu Problem in IE

Posted 16 May 2009 - 05:50 PM

If it looks good without tables, why use tables? Tables are just bad anyway! And don't write your CSS like that, it makes it really horrible to read!

View Postmsanders5, on 17 May, 2009 - 02:30 AM, said:

Hello I have a CSS menu that works great within FF, but when viewed in IE the text gets off centered, and the vertical alignment is very off.

I think the problem is more related to me putting the code into a table, as when the code is not in a table it appears to display okay.

I'm looking for a second set of eyes to help me spot my problem.

The code
 <div align="center">
	<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>	
		<div id="dolphincontainer"> 
		<div id="dolphinnav"> 
	<ul> 
	<li><a href="index.php" title="css website navigation menus" class="<?php echo $activehomepg ?>" <span>
	Home</span></a></li> 
	<li><a href="admin/index.php" title="css website navigation menus" class="<?php echo $activeadminpg ?> "<span>
	Admin</span></a></li> 
	<li><a href="" title="css website navigation menus" class="<?php echo $activeannoucementspg ?> "<span>
	Announcements</span></a></li> 
	<?php 
		if($loggedin == 'yes'){
			echo '<li><a href="" title="css website navigation menus" class=".$activedatabasespg."<span>
	Databases</span></a></li>';
		}
		?>
	<li><a href="" title="css website navigation menus" class="<?php echo $activehelppg ?> "<span>
	Help</span></a></li> 
	</ul> 
	</div> 
	</div> </td>
			</tr>
		</table>
		</div>


the css for the menu is here
 /* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#313f67;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */



Any idea's what I'm doing wrong?

Looking forward to any assistance.

-M

Was This Post Helpful? 0
  • +
  • -

#3 msanders5  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-May 09

Re: CSS Menu Problem in IE

Posted 17 May 2009 - 08:59 AM

Ahh,

I have resolved the issue. I appear to not have closed my brackets at the end of my list. This fixed it, it's working correctly now.

Wimpy, I apologize for posting my code that way. Thanks for taking a look.
Was This Post Helpful? 0
  • +
  • -

#4 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: CSS Menu Problem in IE

Posted 17 May 2009 - 10:08 AM

I'm happy you solved it! :)

View Postmsanders5, on 17 May, 2009 - 05:59 PM, said:

Ahh,

I have resolved the issue. I appear to not have closed my brackets at the end of my list. This fixed it, it's working correctly now.

Wimpy, I apologize for posting my code that way. Thanks for taking a look.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1