asked on

I need help with CSS positioning of horizontal list items

Hi,

I have a this menu

<div id="top_area">
<div id="logo"><a href=""><img src="images/logo.jpg" alt="PhunkaWebsites"/></a></div>
<div id="nav_area">
<ul id="navigation" >
<li class="<%= home %>"><a href="Default.aspx">Home</a></li>
<li class="<%= whyUs %>"><a href="WhyUs.aspx">Why Us</a></li>
<li class="<%= services %>"><a href="Services.aspx">Services</a></li>
<li class="<%= contactUs %>"><a href="ContactUs.aspx">Contact Us</a></li>
</ul>
</div>
<div class="clear"></div>
</div>

and this CSS to position it

ul#navigation {
      list-style-type: none;
      height:80px;
      margin:0;
}

ul#navigation a {
      background-image:url(../images/nav_devider.jpg);
      background-repeat: no-repeat;
      background-position: right;
      padding:0 12px 0 12px;
      display: block;
      line-height:80px;
      text-decoration: none;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:16px;
      font-weight:normal;
      color:#8fc5cf;
      float:left;
}

This works perfect for IE 8, Firefox 3 but not on IE 7. I have not tested on IE 6 but will

Can anyone help please

Thanks
H

ludofulop

try to attach a screenshot...
for me, the following code looks same in IE6,7,8:

<html>
<style>
ul#navigation {
list-style-type: none;
height:80px;
margin:0;
background-color: black;
}

ul#navigation li {
float: left;
}

ul#navigation a {
background-image:url(../images/nav_devider.jpg);
background-repeat: no-repeat;
background-position: right;
padding:0 12px 0 12px;
display: block;
line-height:80px;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#8fc5cf;
float:left;
}
</style>
<body>
<ul id="navigation" >
<li><a href="Default.aspx">Home</a></li>
<li><a href="WhyUs.aspx">Why Us</a></li>
<li><a href="Services.aspx">Services</a></li>
<li><a href="ContactUs.aspx">Contact Us</a></li>
</ul>

</html>

Clipboard01.jpg

gbzhhu

ASKER

Yes that code gave me same result too so it is probably something else in the CSS. I attach the whole CSS and html portion, plus image

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>PhunkaWebsites</title>
        <link href="stylesheet/common.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="document.submitEnquiry.name.focus();">
    
        <!--Page container-->
        <div id="container">
            <!--blank_area-->
            <div id="blank_area">
                <div id="link_area">
                    <img src="images/home_icon.jpg" alt="" /> <a href="Default.aspx" class="link_text">Home</a> <span class="link_text">|</span> <img src="images/contact_icon.jpg" alt="" width="11" height="8" /> <a href="ContactUs.aspx" class="link_text">Contact Us</a>
                </div>
            </div>
            <!--blank_area-->
        
            <!--top_header-->
            <div id="top_area">
                <div id="logo"><a href=""><img src="images/logo.jpg" alt="PhunkaWebsites"/></a></div>
                <div id="nav_area">
                    <ul id="navigation" >
                        <li class="<%= home %>"><a href="Default.aspx">Home</a></li>
                        <li class="<%= whyUs %>"><a href="WhyUs.aspx">Why Us</a></li>
                        <li class="<%= services %>"><a href="Services.aspx">Services</a></li>
                        <!--<li class="<%= portfolio %>"><a href="Portfolio.aspx">Portfolio</a></li>-->
                        <!--<li class="<%= testimonials %>"><a href="Testimonials.aspx">Testimonials</a></li>-->
                        <li class="<%= contactUs %>"><a href="ContactUs.aspx">Contact Us</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!--top_header-->

            <!--header-->
            <div id="header_image">
                <asp:ContentPlaceHolder ID="strapline" runat="server"></asp:ContentPlaceHolder>        
            </div>
            <div id="under_header_tile">
                <div id="sitemap">
                    <asp:SiteMapPath ID="SiteMapPath" runat="server" 
                        SkipLinkText="Skip Breadcrumb"
                        RootNodeStyle-CssClass="sitemap_root_node" 
                        CurrentNodeStyle-CssClass="sitemap_current_node"
                        NodeStyle-CssClass="sitemap_node">
<%--                      <PathSeparatorTemplate>
                        <asp:Image ID="Image1" Runat="Server" 
                          Width="10" 
                          ImageUrl="Images/arrow.jpg" />
                        </PathSeparatorTemplate>     --%>                                           
                    </asp:SiteMapPath>
                </div>                        
            </div>
            <!--header-->

            <!--main_body_area-->
            <div id="main_body_area">

                <div id="main_body_part_area_1">
                    <div id="under_part_area_left">
                        <!--content-->
                        <div id="content">
                            <asp:ContentPlaceHolder ID="Content" runat="server">
                            
                            </asp:ContentPlaceHolder>
                        </div>
                        <!--content-->
                    </div>
                </div>                 
            </div>
            <!--main_body_area-->

        </div>
        <!--Page container-->
    </body>
</html>

Open in new window

sample.jpg
common.css

ASKER CERTIFIED SOLUTION

ludofulop

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gbzhhu

ASKER

Spot on ludofulop,

Thank you VERY much. It works on all browsers now.

H