#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Content Overslaping


    Hi,

    I am using tabs from this article http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/

    But as you can see here http://infinetwireless.com.mx/productos/familia/infilink.php my boxers of the footer doesn’t respect the height of the tabs and overlap, I need to add a table and fix the height so it doesn’t overlap, the problem it´s when I click in a other menu it remains with the same height when it doesn’t require so much space.

    Thanks in advance.

    Hope you can help me, regards.

    BTW this are the CSS

    Code:
    #flip-tabs4{
    width:512px;
    position:relative;
    }
    #flip-navigation4{
    padding:0; 
    list-style:none;
    }
    #flip-navigation4 li{ 
    display:inline; 
    }
    #flip-navigation4 li a{
    text-decoration:none; padding:10px; 
    margin-right:0px;
    color:#000; outline:none;
    font-family:Arial; font-size:12px; text-transform:uppercase;
    }
    #flip-navigation4 li a:hover{
    color:#000;
    }
    #flip-navigation4 li.selected a{
    color:#000;
    text-decoration: underline;
    
    }
    #flip-container4{ 
    width:512px;
    font-family:Arial; font-size:13px;
    }
    #flip-container4 div{ 
    background:#fff;
    }
    #flip-container4 div ul{
    background:#f9f9f9;
    border:1px solid #f0f0f0;
    margin:0; padding:15px 5px;
    list-style-position:inside;
    }
    #flip-container4 div ul li{
    padding:5px 0;
    }
    #flip-container4 div ul.orange{ 
    background:#fff; 
    list-style:square; 
    line-height: 16px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#696969;
    height:auto;
    margin-top:6px;
    margin-left:16px;
    margin-right:40px;
    float:left;
    }
    Last edited by Kravvitz; January 7th, 2013 at 04:20 PM. Reason: fixed the broken URL
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, JGurtubay.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, JGurtubay.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    (Under "more options", make sure it's set it to use "CSS level 3".)
    Thanks for your answer

    it works when I add the table :S, it´s not only that i must add another css property somewhere?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    The errors in your page need to be corrected before we can do much to help you and fixing errors often solves problems like this one.

    Two of the errors are repeated many times. Only <li> elements may be directly nested within a <ul> (or <ol>). Also <li> elements may only be directly nested within <ul> and <ol> elements.

    If adding a table fixes things, then it is helping the browser's automatic error correction (which should not be relied upon).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo