Member Avatar for Looka

Hi!

Here is a situation. I would like to align <li> inside <div> for my simple menu. The thing is that I'm doing a css based menu instead of gifs on an older website (table design). I've managed to write a css (menu.css) that works perfectly in firefox but not in ie 5.5/6/7. That's why I included conditional comment for ie but the result is not quite there. I would appreciate any tips or suggestions on how to achieve the same alignment in ie as it is in Firefox. Thanks!

Here is how it looks ... URL www.pozvek-sp.si/eng/home_tst.htm

/* CSS dokument */
*{
	margin:0;
	padding:0;
}
#menu{
	width:100%;
	margin:0 0 0px 2px;
}
#menu ul{
	list-style:none;
}
#menu li{
	display:block;
	float:left;
	width: 120px;
	margin:0 2 0 0px;
}

#menu ul:last-child {
	margin-left: -2px;
}

#menu li a{
	background: #286293 ;
	border:2px solid #286293;
	padding:15px 0 25px 5px;
	display:block;
	color:#fff;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 28px;
	margin-bottom: 2px;
}
#menu li a span{
	color:#F2F5ED;
	font-size:9px;
	text-transform:uppercase;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style:italic;
}
#menu li a:hover{
	background:#5195ce;
	border:2px solid #fff;
	text-decoration:none;
}
#menu li a:hover span{
	color:#fff;
}

Luka

  • 2 Contributors
  • 4 Replies
  • 84 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Looka

Recommended Answers

All 4 Replies

Member Avatar for essential

Try this layout:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Window-target" content="_top" />
<title>Free Live Help!</title>
<style id="css21" type="text/css">
/* <![CDATA[ */

html, body {
   border : none;
   font : normal normal normal 95%/1.6 "Trebuchet MS", Verdana, Helvetica, Arial, Sans-Serif;
   height : auto;
   margin : 0;
   min-height : 600px;
   min-width : 600px;
   padding : 0;
   text-align : center;
   width : auto; }

body {
   background-color : #FFFFFF;
   color : #405060; }

div, div#menu ul, div#menu li {
   border : none;
   margin : 0;
   padding 0; }

body div#main {
   margin : 0 auto;
   min-height : 600px;
   width : 100%; }

body div#menu {
   height : 28px;
   width : 100%; }

div.tube {
   text-align : left;
   padding : 0 2px 0 2px; }

div#menu ul {
   background-color : #5195ce;
   height : 100%;
   list-style : none;
   float : left;
   clear : both;
   width : 100%; }

div#menu li {
   display : block;
   float : left;
   min-width : 120px;
   height : 100%;
   margin : 0 .020em 0 0;
   width : auto; }

div#menu li a {
   display : block;
   height : 100%;
   text-decoration : none;
   width : 100%;
   background-color : #5195ce;
   font : bold normal normal 10pt/28px Geneva, Arial, Helvetica, sans-serif;
   text-align : center;
   color : #fff; }
/* ]]> */
</style> 
</head>
<body>
<div id="main">
<div id="menu">
<div class="tube">
<ul>
<li><a href="#">Link Sample#1</a></li>
<li><a href="#">Link Sample#2</a></li>
<li><a href="#">Link Sample#3</a></li>
<li><a href="#">Link Sample#4</a></li>
<li><a href="#">Link Sample#5</a></li></ul>
</div>
</div>
</div>
</body>
</html>
Member Avatar for Looka

Thanks for your reply essential. I was actually hoping for a way to add and align a div into existent table design. It works in Firefox I'm just looking for a IE hack. I know it's kinda ad-hoc thing but still.

Member Avatar for essential

This < LINK > might help you out, in search of the things you need to cover this issue.

Hope i've got it covered...

essential

Member Avatar for Looka

This < LINK > might help you out, in search of the things you need to cover this issue.

Hope i've got it covered...

essential

Hey!

A great resource ... thanks a lot. I think this might help with the problem.

Luka

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.