SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Location
    Leeds
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE 5.5 space between <ul>s nightmare!

    Hi guys,

    I'm having a nightmare with some tabbed navigation I'm building - the tabs in the following page work fine on all pc browsers until I get to IE5.5 and below - it puts lots of lovely white space (17px worth!) between each UL element.

    http://ss76.shared.server-system.net...006/index.html

    I've tried and failed with zeroing out everything, turning my ULs and LIs into divs....you name it.....any ideas out there?!

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

    Here's the CSS code in question:

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #info_outer {
    float: left;
    clear: none;
    padding: 0px;
    margin: 0px;
    border:0px;
    width: 375px;
    height: 360px;
    background-color: #efefef;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #info_outer {
    float: left;
    clear: none;
    padding: 0px;
    margin: 0px;
    border:0px;
    width: 375px;
    min-height: 360px;
    height: auto;
    background-color: #efefef;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #tabs_outer {
    float: left;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 375px;
    height: 68px;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #tabs_outer {
    float: left;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 375px;
    min-height: 68px;
    height: auto;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    .tabs_holder {
    float: left;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    width: 74px;
    height: 64px;
    color: #ffffff;
    text-align: center;
    list-style: none;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] .tabs_holder {
    float: left;
    padding: 0px 1px 0px 0px;
    margin: 0px;
    width: 74px;
    min-height: 64px;
    height: auto;
    text-align: center;
    list-style: none;
    }

    .tab_top {
    width:74px;
    height:6px;
    margin:-4px 0px -2px 0px;
    border:0px;
    padding:0px;
    background-image:url(../images-css/tabs/tab_top.gif);
    background-repeat:no-repeat;
    font-size:0;
    list-style:none;
    }

    body> div[id] .tab_top {
    width:74px;
    height:6px;
    margin:0px;
    border:0px;
    padding:0px;
    background-image:url(../images-css/tabs/tab_top.gif);
    background-repeat:no-repeat;
    font-size:0;
    list-style:none;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    .tab_mid {
    padding: 50px 0px 0px 0px;
    margin: 0px;
    width: 74px;
    height: 14px;
    background-image: url(../images-css/tabs/tab_mid.gif);
    background-repeat: repeat-y;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] .tab_mid{
    padding: 50px 0px 0px 0px;
    margin: 0px;
    width: 74px;
    min-height: 14px;
    height: auto;
    background-image: url(../images-css/tabs/tab_mid.gif);
    background-repeat: repeat-y;
    }

    /*******************************************START tabs with indivdual icons with rollovers**************************************/

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #itin_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    height: 14px;
    background-image: url(../images-css/tabs/itin_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #itin_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    min-height: 14px;
    height: auto;
    background-image: url(../images-css/tabs/itin_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #itin_tab a {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/itin_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #itin_tab a:hover, #itin_tab a:active {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/itin_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #hotel_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    height: 14px;
    background-image: url(../images-css/tabs/hotel_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #hotel_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    min-height: 14px;
    height: auto;
    background-image: url(../images-css/tabs/hotel_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #hotel_tab a {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/hotel_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #hotel_tab a:hover, #hotel_tab a:active {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/hotel_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #map_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    height: 14px;
    background-image: url(../images-css/tabs/map_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #map_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    min-height: 14px;
    height: auto;
    background-image: url(../images-css/tabs/map_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #map_tab a {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/map_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #map_tab a:hover, #map_tab a:active {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/map_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #review_tab {
    padding: 0px;
    margin: 0px;
    border: 0px;
    white-space: wrap;
    width: 74px;
    height: 14px;
    background-image: url(../images-css/tabs/review_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #review_tab {
    padding: 0px;
    margin: 0px;
    border: 0px;
    white-space: wrap;
    width: 74px;
    min-height: 14px;
    height: auto;
    background-image: url(../images-css/tabs/review_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #review_tab a {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    border: 0px;
    white-space: wrap;
    background-image: url(../images-css/tabs/review_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #review_tab a:hover, #review_tab a:active {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    border: 0px;
    white-space: wrap;
    background-image: url(../images-css/tabs/review_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }


    /*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
    #media_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    height: 15px;
    background-image: url(../images-css/tabs/media_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    white-space: nowrap;
    }

    /*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
    body> div[id] #media_tab {
    padding: 0px;
    margin: 0px;
    width: 74px;
    min-height: 15px;
    height: auto;
    background-image: url(../images-css/tabs/media_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    white-space: nowrap;
    }

    #media_tab ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #media_tab li {
    display: inline;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
    list-style: none;
    }

    #media_tab a {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/media_tab.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #media_tab a:hover, #media_tab a:active {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/media_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

    #media_tab li.chosen {
    display: block;
    margin: 0px;
    padding: 0px;
    background-image: url(../images-css/tabs/media_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    white-space: nowrap;
    list-style: none;
    }

    #media_tab a.chosen {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/media_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    white-space: nowrap;
    list-style: none;
    }

    #media_tab a:hover.chosen, #media_tab a:active.chosen {
    display: block;
    margin: 0px;
    padding: 50px 0px 0px 0px;
    background-image: url(../images-css/tabs/media_tab_over.gif);
    background-repeat: no-repeat;
    background-color: #bcbcbc;
    list-style: none;
    }

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

    ......and the xhtml.....

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

    <!--START tabs area-->
    <div id="tabs_outer">

    <ul class="tabs_holder">
    <li class="tab_top">lets go magoo</li>
    <li id="itin_tab"><a href="#" title="Itinerary">Itinerary</a></li>
    </ul>

    <ul class="tabs_holder">
    <li class="tab_top"></li>
    <li id="hotel_tab"><a href="#" title="Hotel">Hotel</a></li>
    </ul>

    <ul class="tabs_holder">
    <li class="tab_top"></li>
    <li id="map_tab"><a href="#" title="Map">Map</a></li>
    </ul>

    <ul class="tabs_holder">
    <li class="tab_top"></li>
    <li id="review_tab"><a href="#" title="Reviews">Reviews</a></li>
    </ul>

    <ul class="tabs_holder">
    <li class="tab_top"></li>
    <li id="media_tab"><a href="#" class="chosen" title="Media">Media</a></li>
    </ul>

    </div>
    <!--END tabs area-->

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

    Thanks for reading!
    theboypayne

  2. #2
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fist thing to try is removing any whitespace or line breaks between the list items.
    Olly Hodgson
    thinkdrastic.net

  3. #3
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Olly Hodgson
    thinkdrastic.net

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Location
    Leeds
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice one Gnarly, I'm onto it!
    theboypayne

  5. #5
    SitePoint Member
    Join Date
    Oct 2005
    Location
    Leeds
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm no joy there sadly!

    I'm wondering whether versions of IE prior to 6 render whitespace between the <UL> elements that make up the tabs on my page?

    The problem definitely seems to be with the <ul class="tabs_holder"> class.

    Is there a hack command that only talks to IE5.0 and 5.5? I could put a minus value on the margin of this <UL> that only these browsers could see!
    theboypayne

  6. #6
    SitePoint Member
    Join Date
    Oct 2005
    Location
    Leeds
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using this hack on tantek that makes IE5 and derivitives fall out of a CSS command, allowing me to define 2 different margin values for the UL tabs!

    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Thanks for your help!



    PS I look forward to the day when I don't have to support said browsers!
    theboypayne


Bookmarks

Posting Permissions

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