Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css nav bar problem with IE

    Hi guys,

    I'm not a developer and could do with some much needed advice/help.

    I've managed to put a site together on my Mac and have tested it on most browsers and have run into a formatting problem on IE6 Win2k/XP.

    Here's the problem

    http://www.red9media.com/course-direct.html

    the nav bar on the left is adding an extra blank line indiscriminently and no matter how much i trim down my css i can't seem to fathom it out.

    Any help at all would be much appreciated.

    Here's the relevant css section :-

    ------------------------------------------------------------

    .nav {
    text-align: left;
    color: #333333;
    padding: 0px 0 0 2px;
    width: 176px;
    }

    .nav li {
    /* margin: 5px 0 5px 0px; */
    /* margin: 0px 0px 0px 0px; */
    background: #CCCCCC;
    padding: 5px 0 0 5px;
    /* border-bottom: 0px solid #CCCCCC; */
    list-style: none;
    }

    .nav li a {
    color:#000000;
    font-weight:bold;
    text-decoration: none;
    /* padding: 5px 0 1px 5px; */
    padding: 5px 0px 1px 5px;
    /* background: #ffffff; */
    background: #CCCCCC;
    /* border-top: 0px solid #CCCCCC; */
    /* border-bottom: 0px solid #CCCCCC; */
    border-left: 4px solid #40cb25;
    display: block;
    /* margin-bottom: 0px; */
    }

    .nav li a:hover {
    color: #999999;
    text-decoration: none;
    background:#ffffff;
    /* border-top: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff; */
    border-left: 4px solid #4fb6e5;
    display: block;
    /* margin-bottom: 0px; */
    }

    #main {
    background: #666666;
    width: 800px;
    margin: 0 ;
    color: #808080;
    }



    #main .left {
    float: left;
    width: 160px;
    /* padding: 0px 0px 0px px;
    margin: 0px; */
    }

    #main .left .hitems {
    margin: 0px;
    padding: 0px;
    }

    #main .left .hitems ul {
    /* margin: 0px 0px 0px 0px;
    padding : 0px; */
    color: #333333;
    }

    #main .left .hitems li {
    /* margin: 0 0 2px 2px; */
    /* padding: 0 0 0 0px; */
    color: #FFFFFF;
    }

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I came across this same problem with IE6 as well. I cound't find a solution. I remydied by collapsing all the navigational code. Heres an cutting:

    Code:
    <DIV class=nav><!-- <h2>left Column</h2>
                    <div class="text">
                You could use this space to display the 
    
    latest news, a calendar, random photos, the choice is yours, its here if you need it.
                    </div> --><!-- <h2>The Courses</h2> -->
    <UL><!-- <li><p class="style1">blop</p> -->
      <LI><A href="http://www.red9media.com/courses/hocdsr450.html">Hands on Camera DSR450</A><LI><A 
    
    href="http://www.red9media.com/courses/hoc-locam01.html">Location camera skills</A><LI><A href="http://www.red9media.com/courses/hoc-sonyz1.html">Hands on 
    
    Camera Sony Z1</A><LI><A href="http://www.red9media.com/courses/lighting-wshop01.html">Lighting workshop #1</A><LI><A 
    
    href="http://www.red9media.com/courses/creative-wshop01.html">Concept development and creativity workshop</A><LI><A 
    
    href="http://www.red9media.com/courses/director-mv01.html">Music Video Director #1 </A><LI><A 
    
    href="http://www.red9media.com/courses/director-mv02.html">Music Video Director #2</A><LI><A 
    
    href="http://www.red9media.com/courses/director-comm01.html">Commercials Director #1</A><LI><A 
    
    href="http://www.red9media.com/courses/director-comm02.html">Commercials Director #2</A><LI><A 
    
    href="http://www.red9media.com/courses/freelance-pd01.html">Freelance Producer Director</A><LI><A 
    
    href="http://www.red9media.com/courses/director-viral.html">Viral Director workshop</A><LI><A 
    
    href="http://www.red9media.com/courses/director-actor-workshops01.html">Directing Actors #1</A><LI><A 
    href="http://www.red9media.com/courses/director-actor-workshops02.html">Directing Actors #2</A><LI><A 
    
    href="http://www.red9media.com/courses/actor-workshops01.html">Actors workshops</A> <LI><A 
    href="http://www.red9media.com/courses/screenwriting01.html">Screenwriting #1 - The short</A> <LI><A 
    href="http://www.red9media.com/courses/screenwriting02.html">Screenwriting #2 - The feature length screenplay</A> <LI><A 
    href="http://www.red9media.com/courses/filmmaker-intro.html">Introduction to filmmaking</A> <LI><A href="http://www.red9media.com/intern01.html">The 
    
    production Internship</A><LI><A href="http://www.red9media.com/courses/edit-avid01.html">Desktop Editing for Avid Xpress pro #1 </A><LI><A 
    
    href="http://www.red9media.com/courses/edit-fcp01.html">Desktop Editing 
      for Final Cut Pro #1</A>
    You could try IE6 specific comments - haven't tried that
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    IE = S**t basically

    Yeah there is a solution... and it might seem incredibly stupid but then again we are dealing with the worst browser EVER.

    Go through all the links in the nav bar (in the HTML) and add a space after the text (before </a>)
    For example:

    Code:
    <li><a href="courses/freelance-pd01.html">Freelance Producer Director</a></li>
    becomes

    Code:
    <li><a href="courses/freelance-pd01.html">Freelance Producer Director </a></li>
    Notice the space after Director.

    Simple as!



    ~Jordan

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Seriously!!

    If that's it then a) wicked and b) that's crap

    Ah well never mind 'ay

    But cheers a million

    L.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    /*hide from IE Mac\*/
    * html .nav li, * html .nav li a {
    height:1%;
    }
    /*end hide*/
    That should work and IMO is a more elegant solution.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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