Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

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
0
gbzhhu
Asked:
gbzhhu
  • 2
  • 2
1 Solution
 
ludofulopCommented:
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
0
 
gbzhhuAuthor Commented:
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
0
 
ludofulopCommented:
in your css file:

ul#navigation.li {
      float: left;
}

should be

ul#navigation li {
      float: left;
}
0
 
gbzhhuAuthor Commented:
Spot on ludofulop,

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

H
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now