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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE PC Horizontal Image Menu Problem

    Hello,

    I recently dove head-first into a new site design with a bit of a deadline. The site works perfectly in every browser for the Mac (including IE) that I've tested it on, but is presenting a bit of a problem with IE PC.

    I've set-up an horizontal nav bar with image swaps, and very specific widths, etc. IE PC renders the images correctly side by side, except seems to "step" each consecutive image down 10px.

    Screenshots here:

    Correct: www.landworksvt.com/IE_MAC_screenshot.gif
    Incorrect: www.landworksvt.com/IE_PC_screenshot.gif

    The relevant code is:

    Code:
    <div id="nav">
          <ul>
            <li id="n-company"><a href="company/index.html">Company</a></li>
            <li id="n-capabilities"><a href="capabilities/index.html">Capabilities</a></li>
            <li id="n-portfolio"><a href="portfolio/index.html">Portfolio</a></li>
            <li id="n-contact"><a href="contact/index.html">Contact Us</a></li>
            <li id="n-client"><a href="client/index.html">Client Log-In</a></li>
          </ul>
    	</div>
    Code:
    #nav {
    z-index: 2;
    background-image: url(../images/nav_bar.gif);
    background-repeat: repeat-x;
    position: absolute;
    top:50px;
    height:44px;
    width:688px;
    }
    
    ul {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    height:44px;
    }
    
    #n-company a, #n-company a:hover, 
    #n-capabilities a, #n-capabilities a:hover, 
    #n-portfolio a, #n-portfolio a:hover, 
    #n-contact a, #n-contact a:hover, 
    #n-client a, #n-client a:hover {
    text-indent: -9000px;
    overflow: hidden;
    float: left;
    height: 44px;
    background-repeat: no-repeat;
    }
    
    #n-company a { background: url(../images/buttons/company.gif); width: 150px;}
    #n-company a:hover { background: url(../images/buttons/company_up.gif) }
    #n-company a.current { background: url(../images/buttons/company_up.gif) }
    
    #n-capabilities a { background: url(../images/buttons/capabilities.gif); width: 131px; margin-left:-1px; }
    #n-capabilities a:hover { background: url(../images/buttons/capabilities_up.gif) }
    #n-capabilities a.current { background: url(../images/buttons/capabilities_up.gif) }
    
    #n-portfolio a { background: url(../images/buttons/portfolio.gif); width: 131px; margin-left:-1px; }
    #n-portfolio a:hover { background: url(../images/buttons/portfolio_up.gif) }
    #n-portfolio a.current { background: url(../images/buttons/portfolio_up.gif) }
    
    #n-contact a { background: url(../images/buttons/contact.gif); width: 131px; margin-left:-1px; }
    #n-contact a:hover { background: url(../images/buttons/contact_up.gif) }
    #n-contact a.current { background: url(../images/buttons/contact_up.gif) }
    
    #n-client a { background: url(../images/buttons/client.gif); width: 149px; margin-left:-1px; }
    #n-client a:hover { background: url(../images/buttons/client_up.gif) }
    #n-client a.current { background: url(../images/buttons/client_up.gif) }
    I'm working in a MAC only environment, so am relying on the help of friends and screenshots for the PC browsers.

    The site validates as XHTML and CSS.

    The site is live at: www.landworksvt.com . Any help would be much appreciated. Thanks!

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Post

    I'm thinking its because you're using a list to line up your images. Try using a table, inside the DIV, like this:

    Code:
    <div>
    <table class="my nav bar class">
    <tr>
    <td>
    <img src="1st image">
    </td>
    <td>
    <img src="1st image">
    </td>
    <td>
    <img src="1st image">
    </td>
    <td>
    <img src="1st image">
    </td>
    <td>
    <img src="1st image">
    </td>
    </tr>
    </table>
    </div>
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    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
    that would work however slight line breaks may appear in IE if left that way
    Code:
    <div>
    <table class="my nav bar class">
    <tr>
    <td><img src="1st image"></td>
    <td><img src="1st image"></td>
    <td><img src="1st image"></td>
    <td><img src="1st image"></td>
    <td><img src="1st image"></td>
    </tr>
    </table>
    </div>
    td tags should be butted up against the content or just use a single div and have all of the images one right after the other setting padding:0px;
    Code:
    <div style="padding:0px;"><img src="image.jpg" border="0"><img src="image2" border="0"><img src="image3" border="0"><img src="image4" border="0"><img src="image5" border="0"></div>

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Unhappy

    Thats kinda dumb. Whitespace should N-O-T matter in A-N-Y language!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #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
    thats IE for ya

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm thinking its because you're using a list to line up your images. Try using a table, inside the DIV, like this:
    AUUUUGH. Noooooooooooooooooooooooooooooooooooo

    Try floating the list items instead of the links, and declare links as block-level elements so they fill up the list items. That usually works for me...
    Code:
    
    #nav li {
    float: left;
    }
    
    #nav a {
    height:44px;
    display: block;
    background-repeat: no-repeat;
    text-indent: -9000px; 
    overflow: hidden; 
    }
    Remember also to give your <li>s height and width...

    p.s. nice looking site, btw!
    Last edited by rmedek; 02-08-2005 at 01:01 PM.

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was totally missing giving any direction to the <li>s! Floating them did the trick.

    Thanks for the help!

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright -- who's idea was it to suggest tables over semantic, proper markup? I know we're here to help people -- but what about 'current' methods, not coding like it's 1997!?

    Tables for a list... that's great. http://css.maxdesign.com.au/listamatic/
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #9
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    sorry, I was just thinking for a quick fix until something else works...

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard
    sorry, I was just thinking for a quick fix until something else works...

    Dan
    Don't take it offensive, I was serious but joking around, so I hope you don't think I was yelling

    Your suggestion was useful, but it's better to teach what we're doing now so that we can all improve is all!
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  

    Posting Permissions

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