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 11
  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Argh ! :angry:

    i am having a problem creating menu buttons so that they look the same in all browsers.

    Here is the html code that i am using for the site button
    Code:
    <td width="80" align="center"><span class="nav"><a href="#">Site</a></span></td>
    and the css...
    Code:
    .nav a:link, .nav a:visited, .nav a:active {
    	font-family: verdana;
    	font-size: 12px;
    	color: #000000;
    	border-left: 1px #cccccc solid;
    	border-bottom: 1px #cccccc solid;
    	width: 80px;
    	height: 16px;
    	text-decoration: none;
    	cursor: hand;
    }
    
    .nav a:hover{
    	font-family: verdana;
    	font-size: 12px;
    	background-color: #3B9194;
    	color: #ffffff;
    	border-left: 1px #cccccc solid;
    	border-bottom: 1px #cccccc solid;
    	width: 80px;
    	height: 16px;
    	text-decoration: none;
    	cursor: hand;
    }
    this is what it is meant to look like (IE)

    and what it looks like in moz (attached)

    thanks
    Attached Images Attached Images
    JR

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Not an easy fix... netscape doesn't support width on an A class.

    Here's the fix:

    Code:
    <td class="nav"><a class="nav" 
    	onmouseover="over(this)" 
    	onmouseout="out(this)" href="#">
    	Site</a></td>
    and the css...
    Code:
    td.nav {
    	width: 80px;
    	height: 16px;
    	text-align: center;
    	background-color: #FFFFFF;
    	border-left: 1px #cccccc solid;
    	border-bottom: 1px #cccccc solid;
    }
    
    td.navOn {
    	width: 80px;
    	height: 16px;
    	text-align: center;
    	background-color: #3B9194;
    	border-left: 1px #cccccc solid;
    	border-bottom: 1px #cccccc solid;
    }
    
    a.nav {
    	font-family: verdana;
    	font-size: 12px;
    	color: #000000;
    	text-decoration: none;
    	cursor: hand;
    }
    
    a.navOn{
    	font-family: verdana;
    	font-size: 12px;
    	color: #ffffff;
    	text-decoration: none;
    	cursor: hand;
    }
    And finally, add this JS to your head:
    Code:
    <script language="javascript" type="text/js">
    function over(link) {
    	link.className = 'navOn';
    	link.offsetParent.className = 'navOn';
    }
    function out(link) {
    	link.className = 'nav';
    	link.offsetParent.className = 'nav';
    }
    </script>
    That should work out for you. The reason you have to use JS is because you can't extent the hover event to other elements. Sucks, but that's how it is.

  4. #3
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    thanks, i was hoping it was just a problem with the css

    i will give you the money
    JR

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Here's a sample page I made for you (attached)

  6. #5
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    thanks, but i want the whole button to be the link, not just the text. I will probably be able to do this

    thanks for your help
    JR

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Here's another example, where I made the cells clickable and added a hand cursor to them (attached):

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    By the way, these are essentially the same thing I have going on in my Transio navigation... I actually even advanced them a bit by using relative identifiers (i.e. "this") instead of absolute identifiers (i.e. the id) which makes additions easier.

  9. #8
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    what is the correct way to use 'this'? -

    like document.this.className - how is that done?
    JR

  10. #9
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    also is there a way using css to make the colour solid, as opposed to a few slightly different colour pixels, as the rollovers look a different colour to my banner
    JR

  11. #10
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Stinks that Moz doesn't support the cursor property.
    - Brian


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 05:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com