Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Vertical left menu not appearing properly in firefox but ok in IE

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthornatdesigns
    • CommentTimeAug 10th 2009
     permalink
    Hi,
    Currently have a problem with my list menu which appears right up to the side of the page in IE but when in Firefox ends up with space on the left and pushes the menu to the right of the div. It should appear to the left of the div. Not sure how to remove the random space that appears. Have everything floating to the left and have tried moving a few things around but it does seem to budge.

    Has anyone else experienced this? Or have any idea how this could be fixed?
    Cheers,
    Nat
    • CommentAuthorsumi
    • CommentTimeAug 16th 2009
     permalink
    Can you please show sample XHTML & CSS you have ?
  3.  permalink
    We'll need to see your markup and css to provide any good feedback.
    • CommentAuthornatdesigns
    • CommentTimeAug 25th 2009
     permalink
    The source code is:

    Layout CSS file:
    body {
    text-align: center;
    min-width: 760px;
    background-color: #99d9e8;
    }

    #wrapper {
    width: 850px;
    margin: 0 auto;
    text-align: left;
    background-color:#FFFFFF;
    padding-bottom: 6px;
    /*border-color: #650074;
    border-width: 1px;*/
    }

    #branding {
    width: 850px;
    height: 200px;
    }

    #content {
    width: 850px;
    float: right;
    background-color:#FFFFFF;
    }

    #mainContent {
    width: 470px;
    float: left;

    }

    #secondaryContent {
    width: 200px;
    float: right;
    }

    #mainNav {
    width: 180px;
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #FFFFFF;
    }

    #footer {
    clear: both;
    padding-top: 10px;
    }

    While the layout for the nav which goes inside #mainNav is:
    /* CSS Document */
    #mainNav li {
    padding-left: 0px;
    padding-right: 20px;
    position: relative;
    float: left;
    }

    ol#mm {
    list-style-type:none;
    margin: .25em 0 0;
    }

    ol#mm a {
    display: block;
    width: 12em;
    height: 20px;
    line-height: 1.5em;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #666666;
    padding-left: .5em;
    padding-right: .1em;
    padding-top: .25em;
    text-decoration: none;
    text-align:left;
    font-size: .75em;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    }
    ol#mm a:hover, .selected a{
    background-color: #99d9e8;
    color: #FFFFFF;
    text-decoration: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    }
    ol#mm li.current a{
    background-color: #99d9e8;
    color: #FFFFFF;
    text-decoration: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    }

    And a sample HTML is:
    <body>
    <!-- Holding it all together -->
    <div id="wrapper">
    <!-- Place header here -->
    <div id="branding"><img src="Images/Web/headerBackground_web.gif" width="850" height="200"></div>
    <!-- Content Section -->
    <div id="content">
    <!-- Navigation Bar -->
    <div id="mainNav">
    <ol id="mm">
    <li class="current"><a href="index.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">HOME</a></li>
    <li><a href="services.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">SERVICES</a></li>
    <li><a href="programs.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">PROGRAMS</a></li>
    <li><a href="childrensHealth.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">CHILDRENS HEALTH</a></li>
    <li><a href="about.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">ABOUT</a></li>
    <li><a href="contact.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">CONTACT</a></li>
    </ol>
    <p> </p>
    <p class="padding"><img src="Images/Web/ANTA_Logo.jpg" alt="ANTA Logo" width="67" height="67"> <img src="Images/Web/OAMPS_Logo.jpg" alt="OAMPS_Logo" width="75" height="50"></p>
    </div>
    <div id="mainContent">
    <p span class="italicMainHeadings">'family focused natural health care'</span></p>
    <img src="Images/Web/FamilyStretching_web.jpg" width="480" height="312">
    <p class="body">At Skye Robinson Naturopathy we believe health care should be family orientated and to fit into every budget.</p>
    <p class="body"><span class="subHeadings">We provide health care that is:</span><br>
    - On time with no waiting rooms<br>
    - Convenient at home consultations<br>
    - With a professional and experience practitioner<br>
    - Focused on the importance of family<br>
    - Up to date with research and knowledge<br>
    - Stocked with the latest clinically proven products</p>
    <p class="padding"><span class="italicMainHeadings">What is a Naturopath?</span><br>
    <span class="body"><br>A Naturopath is a health care professional focusing on natural medicine. Our job is to enhance the body's ability to heal itself, using natual products.<br><br>
    A naturopath is different to a doctor. It is a Naturopath's job to explain to you why this health issue is occuring and work with you to improve your health. So that after the consultation you feel empowered, understand why this is happening and how to fix it.</span></p>
    <p class="padding"> </p>
    </div>
    <!-- Secondary information -->
    <div id="secondaryContent">
    <p><a href="monthlyRecipes.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" target="_blank"><img src="Images/Web/monthlyRecipes_btn.gif" width="170" height="310" border="0"></a> </p>
    </div>
    </div>
    </div>
    <!-- Copyright and alternative links here -->
    <div id="footer">
    <div class="body" id = "padding" align = "center">
    <a href="index.htm?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" target="_self" class="body">Home</a> | Services | Programs | Childrens Health | About | Contact <br>
    <span class="copyright"> © Copyright 2009 Skye Naturopathy - All rights reserved. Site created by natdsigns - <a href="www.natdesigns.com?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" target="_blank" class="copyright">www.natdesigns.com</a>.</span></div>
    </div>
    </body>

    Hope you might be able to help. Have tried a few different ways to find a resolution but nothing have done seems to work.
    Thanks heaps
    • CommentAuthorNanimo
    • CommentTimeAug 25th 2009
     permalink
    Have a go at using one of the "reset" css style sheets. They're nice to use because they help you start with a "blank canvas" without some of the quirks. I always seem to work faster when using a reset.

    I recommend :
    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

    I personally use a modified reset.css and use @import at the beginning of my main stylesheet to link it.

    Incidentally, there's a section in the middle of your content where there's a paragraph with a bunch of <br> tags. Ideally, these should be list items in a <ul>
    • CommentAuthornatdesigns
    • CommentTimeAug 31st 2009
     permalink
    Thanks so much for your help on this. Its is exactly the solution and am going to use the Reset CSS in everything that I do from now on. It will save me hours and give me better control when am coding.

    Once again cheers for taking the time to help with this.
    Thanks
    Nat

1 to 6 of 6

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page