www.webdeveloper.com
Results 1 to 14 of 14

Thread: [RESOLVED] disp over in FF but under in IE?

  1. #1
    Join Date
    Apr 2007
    Posts
    21

    resolved [RESOLVED] disp over in FF but under in IE?

    im making a tab'd menu on top of a table, but in IE, the tabs are actually UNDER the table. In firefox, they are displayed correctly, ABOVE the table. Any ideas on a fix?

    Code:
    <html>
    <head>
    <title>TABS</title>
    <style>
    
    .tabs
    {
      margin: 0;
      padding: 0;
      margin-bottom: -1px;
    }
    
    .tabs li
    {
      list-style-type: none;
      margin: 0;
      margin-left: 0;
      margin-right: 10;
      padding: 0;
      color: #000000;
      display: inline;
    }
    
    .tabs li a
    {
      padding: 0;
      padding-left: 10;
      padding-right: 10;
      padding-top: 1px;
      text-decoration: none;
      margin: 0;
      height: 20px;
      text-align: center;
      border: 1px solid black;
      background: url(tabbg.gif) top left repeat-x;
      color: #003366;
    }
    
    .tabs li a.current
    {
      background: url(tabbg.gif) 0 -20px repeat-x;
      border-bottom: 0;
      padding-bottom: 1px;
      padding-top: 0;
    }
    
    .tabtable
    {
      border: 1px solid black;
      width: 600;
      height: 200;
      background-color: white;
    }
    
    </style>
    
    <script>
    function tabular(num)
    {
      var tabids = document.getElementById("tabs").getElementsByTagName('A');
      for (var x = 0; x < tabids.length; x++)
        {tabids[x].className = "";}
      tabids[num-1].className = "current";
    }
    
    
    </script>
    </head>
    <body>
    <BR><BR>
    <ul class="tabs" id="tabs">
    <li><a href='javascript:tabular(1)' class="current">anything1</a></li>
    <li><a href='javascript:tabular(2)' class="">anything2</a></li>
    <li><a href='javascript:tabular(3)' class="">anything3</a></li>
    <li><a href='javascript:tabular(4)' class="">anything4</a></li>
    <li><a href='javascript:tabular(5)' class="">anything5</a></li>
    </ul>
    
    <table class="tabtable" id="tabtable"><tr><td>blah</td></tr></table>
    
    
    
    </body>
    </html>
    any suggestions would be great

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    start (make it the FIRST line) your CSS with:

    * {padding:0; margin:0;}

    You may now need to re-state padding and margin for elements now 'zero-d' of their browser-specific default margin/padding. Even if this doesn't solve this problem, this is still invaluable and should be retained and used.
    It appears that you do have things 'zero-ed' out, but there may be items that still have padding &/or margin, like text, etc.

  3. #3
    Join Date
    Apr 2007
    Posts
    21
    yeah, i have allready messed with some similar stuff, but have since slimmed down the css as much as possible to make sure i wasnt doing anything stupid. btw, no fix, still looking for some help

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'm still looking at this... noted:

    .tabtable
    { border: 1px solid black; width: 600; height: 200;
    background-color: white;
    }

    width & height:

    is that 600 pt, px, in, cm, em, ex, mi, km, ft.. (etc). Browser might default to expected "px", -but don't count on it...

    (Several instances of this... not stating value-unit. The only 'value' that can be without a unit-of-measure is "0", because zero-inches = zero-px = zero-feet = (ect..)
    Last edited by WebJoel; 05-17-2007 at 03:45 PM.

  5. #5
    Join Date
    Apr 2007
    Posts
    21
    hehe, thought IE defaulted to px anyway, but i went ahead and added px to all values. Btw, to clarify here, the issue is that IE is not displaying correctly, and FF is, yeah, kinda backward. There is a layering going on here, that doesnt quite make sense. I have tried to solve it with layers, but then I just run into placement issues between the browsers instead. Also, no fix from the units.

    Thank you for your continued help

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */


    .tabs
    { margin-bottom: -1px;}

    .tabs li
    { list-style-type: none;
    margin-right: 10px;
    color: #000000;
    display: inline;
    }

    .tabs li a
    { padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    text-decoration: none;
    height: 20px;
    text-align: center;
    border: 1px solid black; border-bottom:0;
    background: url(tabbg.gif) top left repeat-x;
    color: #003366;
    }

    .tabs li a.current {background: url(tabbg.gif) 0 -20px repeat-x; border-bottom: 0; padding-bottom: 1px;}

    .tabtable {border: 1px solid black; width: 600px; height: 200px; background-color: white;}

    </style>


    <script>
    function tabular(num)
    {
    var tabids = document.getElementById("tabs").getElementsByTagName('A');
    for (var x = 0; x < tabids.length; x++)
    {tabids[x].className = "";}
    tabids[num-1].className = "current";
    }
    </script>

    </head>
    <body>
    <BR><BR>
    <div style="margin:25px">
    <ul class="tabs" id="tabs">
    <li><a href='javascript:tabular(1)' class="current">anything1</a></li>
    <li><a href='javascript:tabular(2)' class="">anything2</a></li>
    <li><a href='javascript:tabular(3)' class="">anything3</a></li>
    <li><a href='javascript:tabular(4)' class="">anything4</a></li>
    <li><a href='javascript:tabular(5)' class="">anything5</a></li>
    </ul>


    <table class="tabtable" id="tabtable"><tr><td>blah</td></tr></table>
    </div>


    </body>
    </html>
    Looks exactly the same now in IE to Fx

  7. #7
    Join Date
    Apr 2007
    Posts
    21
    >.> no it doesnt, you have the same issue my man, in firefox, the border of active tab is gone, but in IE, it shows. not the same.

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    (bak) :

    What am I missing... what effect are you after here?

  9. #9
    Join Date
    Apr 2007
    Posts
    21
    making them look the same is doable ofcourse, I am trying to achieve a desired effect in both though. The selected tab should be 1 pixel lower than the rest, and it should be overlapping the table's top border, while the other tabs do not. Again, the issue comes about from the tabs going litterally underneath the table in IE, but in FF, they overlap it correctly.

  10. #10
    Join Date
    Apr 2007
    Posts
    21
    quick screen shot of what i am trying to achieve, this is a cut from Firefox, which displays correctly w/o messing around, I can also make IE look this way, though, it stops looking correctly in FF due to layer alignments.
    Attached Images Attached Images

  11. #11
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Then you need to try this:

    ul.tabs li a.current {background:white url(tabbg.gif) 0 -2px repeat-x; position:relative;}

    you need a default background-color. I do not have the URL to your 'background-image' called "tabbg.gif" so obviosly am seeing something different. A default-stated background-color covers the overlap 'bottom border' of the UL.

    using:

    ul.tabs li a.current {background:white url(tabbg.gif) 0 -2px repeat-x; position:relative;}

    see screenshot: ie and Fx

    (afk) :
    Attached Images Attached Images
    Last edited by WebJoel; 05-17-2007 at 04:51 PM.

  12. #12
    Join Date
    Apr 2007
    Posts
    21
    .... Something tells me you are using IE7 .... i copied your earlier code then added "white" to the background calls and I do not see the same thing in IE6 and firefox. >.< MS H8

    PS. the bg image really shouldnt matter. afterall, it IS a background. The element itself (of height: 20px) should be covering small part of the top border of the table when the element becomes lowered by 1px. This effect does show true in Firefox, though in IE5 and IE6, it would seem that the "tab" element simply goes behind the table, rather than atop.
    Last edited by Spikeddragon; 05-17-2007 at 04:59 PM.

  13. #13
    Join Date
    Apr 2007
    Posts
    21
    OMG!!!!!!!!! I really should add more "!"
    I love you joel, no joke, Ima dood, but you solved my issue with a simple css statement and you didnt even realize it!

    POSITION: RELATIVE;!!! thx so much >.<

  14. #14
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    shucks, -ain't nuthin' but a thang

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles