Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    rnDesign menu problems. (Hyperlink Removed)

    Have a peekaboo in Internet Explorer, and then in Mozilla Firefox 0.8/0.9 and Safari 1.2. Attached are screenshots. Internet Explorer is showing it correctly, the others are not. Is there any way to fix this? You will need to rollover in Moz Firefox or Safari to see more problems .

    Edit: Basically the menu option rollovers are misaligned and the wrong width in Firefox/Safari, as well as it not being the correct width.
    Attached Images Attached Images
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  2.  

  3. #2
    Senior Member ceetee's Avatar
    Join Date
    Jul 2003
    Posts
    117
    Member #
    2035
    You could always try a table. It has the virtue of being obvious.

    <table id="h_menu" cellspacing="0"><tr><td>link</td><td class="gap"></td><td>link</td></tr></table>

    and the css is, wait for it

    td{padding:0}

    #h_menu a
    {
    display:block;
    width:whatever;
    height:whatever
    }

    .gap{width:whatever}

    or some variation

  4. #3
    Member drews's Avatar
    Join Date
    Nov 2002
    Location
    St. Petersburg, Florida
    Posts
    63
    Member #
    341
    If I know justlivyalife well enough, something tells me that he is using DIVs and not tables. So a single table in an otherwise tableless site would not be the answer here.
    -drews
    -White Fiber Hosting - Coming Soon!

  5. #4
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    You would be correct there, drews!

    I have transferred everything to DIVs apart from obvious tabulated content. This menu is something that works on Listamatic's site (where the basic code is from), but it doesn't work for me .
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  6. #5
    Member drews's Avatar
    Join Date
    Nov 2002
    Location
    St. Petersburg, Florida
    Posts
    63
    Member #
    341
    I love ALA. That's wierd. Could it be IE handling margins or padding incorrectly? I have hardly seen a problem where mozilla handles stuff incorrectly (because they follow standards lol). So becuase It works in those two, I'm going to go ahead and say its a problem with IE handling the divs wrong. Double check your margins and padding.
    -drews
    -White Fiber Hosting - Coming Soon!

  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    post your css/markup or provide a link. It sounds like a problem with IE's incorrect implimentation of the box model.


  8. #7
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    But IE displays it correctly!

    This is available via the link at the top of the first post, glyakk .

    HTML Code:
    /* navigation elements */
    #navigation {
     	width: 722px;
    	padding: 3px;
    	margin: 0px auto;
    	text-align: left;
    	border: 1px solid #e0e0e0;
    }
    #navcontainer:after
    {
    content: ".";
    display: block;
    line-height: 1px;
    font-size: 1px;
    clear: both;
    }
    
    ul#navlist
    {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 722px;
    font-size: 12px;
    height: 26px;
    }
    
    ul#navlist li
    {
    display: block;
    float: left;
    width: 137px;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    
    ul#navlist li a
    {
    display: block;
    width: 100%;
    padding: 3px;
    border-width: 1px 0px 1px 1px;
    border-color: #aaa;
    border-style: solid;
    color: #555;
    text-decoration: none;
    background: #e0e0e0;
    }
    
    ul#navlist li#last a
    {
    display: block;
    width: 100%;
    padding: 3px;
    border-width: 1px;
    border-color: #aaa;
    border-style: solid;
    color: #777;
    text-decoration: none;
    background: #e0e0e0;
    }
    
    #navcontainer>ul#navlist li a { width: auto; }
    
    ul#navlist li#active a
    {
    background: #83afe0;
    color: #555;
    }
    
    ul#navlist li a:hover, ul#navlist li#active a:hover, ul#navlist li#last a:hover
    {
    color: #333;
    background: transparent;
    border-color: #aaa ;
    }
    HTML Code:
    <div id="navigation">
    	  <ul id="navlist">
    		 <li id="active"><a href="#" id="current">Home</a></li>
    		 <li><a href="#">Portfolio</a></li>
    		 <li><a href="#">Services</a></li>
    		 <li><a href="#">Tutorials</a></li>
    		 <li id="last"><a href="#">Contact</a></li>
    		</ul>
    	 </div>
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  9. #8
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    I think they mean you have doen it wrong (no offence) and moz is doing it right, and IE is trying to help. But failign miserably.

    Dunno about the problem though sorry, my navigation experiences arent too shiny.
    tekp :cheeky: tekponline.com

  10. #9
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    Yeah good point. IE always 'tries to help'. I see what you mean. Any ideas anyone?
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  11. #10
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Haha.. sorry I just noticed that link...

    But ok I have adjusted your code, it was not far off..

    I noticed when you rolled over your links that part of your link's color would 'bleed' into the next menu option.. to fix that I took off the width property from [ul#navlist li a] it is not needed, in fact it was causing problems.
    HTML Code:
    ul#navlist li a /*took of the width property*/
    {
    display: block;
    padding: 3px;
    border-width: 1px 0px 1px 1px;
    border-color: #aaa;
    border-style: solid;
    color: #555;
    text-decoration: none;
    background: #e0e0e0;
    }
    
    ul#navlist li#last a /*eliminated some redundancy, you only need to specify different properties*/
    {
    border-width: 1px;
    border-color: #aaa;
    border-style: solid;
    color: #777;
    }
    Then to get it to center propertly, all I did was put a percentage value as the width for [ul#navlist li] instead of pixles. And that is it.
    HTML Code:
    ul#navlist li
    {
    display: block;
    float: left;
    width: 20%; /*used percentages instead of pixles*/
    margin: 0px;
    padding: 0px;
    text-align: center;
    }
    Also added the (px) suffix on some of your values, IE will use pixles by default, however other browsers probably wont.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com