SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    0 Post(s)
    0 Thread(s)

    CSS Menu Explodes Header


    I have a CSS flyout menu that I'm very happy with. The challenge is that when I add it to the header of my site it exploded the header css. It's moving the submenu background color up and shifting the contents of another menu.

    So is there a way to wrap a self contained CSS Flyout that's called via a PHP string into the header of a website (the css is embedded) without having it effect anything else? Even though its embedded, I did move the css to the styles.css file too. It just explodes the header in a different way. It's so strange, it appears fine when its all alone...
    Involved Code Bases: PHP, XML, PHTML, CSS etc. It's messy..

    Here's a sample of the code if you'd like to take a stab at this...

    #csflyout {width:140px; height:24px; position:relative; float:right; margin-bottom:24px; z-index: 12000; }
    #csmenu {padding:0; margin:0; list-style:none; width:140px; height:24px; }
    #csmenu li.cslevel1-li {float:left; height:24px; width:134px;}

    <body id="body">
    <div id="wrapper">
    <!-- end of header -->
    <div id="info">
    <div id="csflyout">
    <ul id="csmenu">
    <li class="cslevel1-li sub"><a class="cslevel1-a" href="#url">Customer Service<!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="listHolder col3">
    <div class="listCol">

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)

    We'd need to see the site to debug properly but it just sounds like you have existing rules for the header that are cascading into the menu you inserted which is what css does by its very nature. Nothing is really self contained and will always be affected by the cascade, inheritance and specificity.

    For example if you have existing rules that say #header ul{} then that will affect the menu you have just inserted.

    Use Firebug in Firefox and you will see what styles are being applied to your menu and where they are coming from. Once you know where they are coming from you can counteract them with more specific styles.

    It also looks like you are using Stu Nichols menu which is not the easiest menu to work with where you are inserting into an existing element.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts