Results 1 to 8 of 8

Thread: Strange CSS Bug?

  1. #1

    Strange CSS Bug?

    I have a strange bug that i have found working with CSS and Dreamweaver and didn't know if it was something that I was doing wrong.

    I am trying to set up a background for my links that when you rollOver a link activates the background. Now here is the wierd part. It works fine when I press F12 and Test it in FF locally, but when I put it on my server it doesn't keep the spacing? Then when i test it in IE both locally and on the server it only outlines the text no matter how much I increase the padding.

    Here is the simple navigation in HTML:

    Code:
    <div class="nav"><a href="#">mens apperal</a><a href="#">womens apperal</a><a href="#">about us</a><a href="#">contact us</a><a href="#">home</a></div>
    And here is the related CSS:
    Code:
    .nav {
    	width:739px;
    	margin:16px 0 0 0;
    	right:0;
    	padding:0;
    	display:block;
    	text-align:right;
    	text-transform:uppercase;
    }
    
    .nave a:link {
    	text-decoration:none;
    	color:#d7d7d7;
    	padding:25px 10px 3px 10px;
    }
    
    .nav a:hover {
    	background-color:#13507b;
    	background-position:top;
    	background-repeat:repeat-x;
    	padding:25px 10px 3px 10px;
    }
    
    a:visited {
    	text-decoration:none;
    	color:#d7d7d7;
    	padding:25px 10px 3px 10px;
    }
    
    a:active {
    	text-decoration:underline;
    	color:#d7d7d7;
    	padding:25px 10px 3px 10px;
    }
    It is the strangest problem i have encountered. The effect that i want to have happen is best seen here.

    http://www.versusmediagroup.com/firstventure

    But the spacing is off.

  2. #2
    Fixed the FF bug, but i still can't get the IE bug to work.

  3. #3
    you have "nave" on one statement is it supposed to be "nav" like the others?

    Also try DIV.nav ......

    Oh and use display: block; I think that will allow you to assign a height. I am sure I am missing something but those should put you on the right track. I am burnt out from css and its friday.....i want to go home.

    Oh and can you post a comp (image) of how the menu is supposed to behave?

    shane-c....Your site is a lot like a transvestite in that respect.
    fester8542.I'd hit it like the fist of an angry God .
    JoshuaJonah.I design for DDD. Then clients usually like it, and the ladies find me more attractive.
    Cybercode Albert Einstein Said that my math teacher has that on his wall

    K-Emmys-06: Best "Best Mod" K-Emmys-06: Best "Most Creative Critic"

    Member #1 of the "I wont critique Timmytot's designs anymore" club

  4. #4
    Hey DDD,

    I changed them to images to make it look nicer and used the tutorial on Kirupa that does the long image that gets moved up on the hover state, but they are automatically lining up on top of each other rather than just going straight across?

    http://www.versusmediagroup.com/firstventure/

    You can see the link here where there not going straight across. Here is the HTML:

    Code:
    <div id="nav"><img src="includes/images/nav_bg_2.gif" alt="NavBackGround" /><a href="#" id="mens"></a><a href="#" id="womens"></a><a href="#" id="about"></a><a href="#" id="contact"></a><a href="#" id="home"></a></div>
    And here is the CSS:

    Code:
    #nav {
    	height:37px;
    	width:751px;
    }
    
    #mens{
    	height: 37px;
    	width: 103px;
    	overflow: hidden;
    	background:url(images/mens.gif) top left no-repeat;
    	display: block;
    }
     
    #mens:hover{
    	background-position: bottom left;
    }
    
    #womens{
    	height: 37px;
    	width: 123px;
    	overflow: hidden;
    	background:url(images/womens.gif) top left no-repeat;
    	display: block;
    }
     
    #womens:hover{
    	background-position: bottom left;
    }
    
    #about{
    	height: 37px;
    	width: 76px;
    	overflow: hidden;
    	background:url(images/about.gif) top left no-repeat;
    	display: block;
    }
     
    #about:hover{
    	background-position: bottom left;
    }
    
    #contact{
    	height: 37px;
    	width: 89px;
    	overflow: hidden;
    	background:url(images/contact.gif) top left no-repeat;
    	display: block;
    }
     
    #contact:hover{
    	background-position: bottom left;
    }
    
    #home{
    	height: 37px;
    	width: 50px;
    	overflow: hidden;
    	background:url(images/home.gif) top left no-repeat;
    	display: block;
    }
     
    #home:hover{
    	background-position: bottom left;
    }

  5. #5


    I am aware that apparel is spelled wrong with men's apparel!
    Last edited by VersusMG; December 16th, 2005 at 09:23 PM.

  6. #6
    Fixed it

  7. #7
    what was the fix?? Sorry dude I was drained.....I actually had th same issues with this layout http://www.deepixel.com/clients/ISG/template.htm

    I could have provided a better explanation but I was tired.

    shane-c....Your site is a lot like a transvestite in that respect.
    fester8542.I'd hit it like the fist of an angry God .
    JoshuaJonah.I design for DDD. Then clients usually like it, and the ladies find me more attractive.
    Cybercode Albert Einstein Said that my math teacher has that on his wall

    K-Emmys-06: Best "Best Mod" K-Emmys-06: Best "Most Creative Critic"

    Member #1 of the "I wont critique Timmytot's designs anymore" club

  8. #8

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012