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 Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Menu - Hover Not Applying All Rules

    Hi,
    I am working on a website which has a CSS menu. I am having one small but very annoying problem.

    The code below is for one of the menu items, the same effect is applied to all items.

    The problem I am having is that it is ignoring the one of the rules of ".current_doorstyles" style. It applies the "background-position: 0 -30px;" but not "border-bottom:#d17100 8px solid;".

    It works and applies all rules on "HOVER" but not when I set the class to ".current_doorstyles".

    I also tried applying the class to the <li> instead, but it has the opposite effect. It applies "border-bottom:#d17100 8px solid;" only.

    Any ideas?

    CSS
    Code:
    /*Door Styles*/
    a#door_styles {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_styles.png); border-bottom:#d17100 solid 5px; margin: 0 auto;}
    a#door_styles:hover {border-bottom:#d17100 solid 8px; background-position: 0 -30px;}
    .current_doorstyles {background-position: 0 -30px; border-bottom:#d17100 8px solid;}
    a#door_styles .alt { display: none; }
    HTML
    Code:
    <div id="navigation">
    	<ul>
        <li><a id="home" href="index.html" title="Home [Access Key H]" accesskey="H"></a></li>
        <li><a id="door_styles" class="current_doorstyles" href="door_styles.html" title="Door Styles [Access Key S]" accesskey="S"></a></li>
        <li><a id="door_guide" href="door_guide.html" title="Door Guide [Access Key D]" accesskey="D"></a></li>
        <li><a id="order" href="order.html" title="Order [Access Key O]" accesskey="O"></a></li>
        <li><a id="qoute" href="quote.html" title="Qoute [Access Key Q]" accesskey="Q"></a></li>
        <li><a id="guarantee" href="guarantee.html" title="Guarantee [Access Key G]" accesskey="G"></a></li>
        <li><a id="contact" href="contact.html" title="Contact [Access Key C]" accesskey="C"></a></li>
        </ul>
    </div><!--End Nav.-->
    Last edited by Seb Meikle; 07-13-2011 at 07:29 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    241
    Thanks
    16
    Thanked 2 Times in 2 Posts
    i don't quite understand what you are trying to do.

    are you trying to have a differant affect when you hover over the door styles?

    if so change .current_doorstyles in the css to .current_doorstyles:hover

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Each menu item has a different border-bottom colour, each with a thickness of 5px. When you hover the mouse over an item it moves the background position and changes the border-bottom thickness to 8px. This works fine.

    When you click an item and are taken to the relevant page, that button is given a "current" style. The problem is, is that it is only applying the rule to move the background position an is ignoring the border-bottom 8px rule.

    I've tried various ways round it. Like creating a separate rule and applying it to the <li> instead, but instead it does the opposite. It applies the border-bottom 8px rule but ignores the background position rule.

    Hope that's a bit clearer.

    I also tried the following:
    Code:
    /*Door Styles*/
    a#door_styles {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_styles.png); border-bottom:#d17100 solid 5px; margin: 0 auto;}
    a#door_styles:hover , .current_doorstyles {border-bottom:#d17100 solid 8px; background-position: 0 -30px;}
    a#door_styles .alt { display: none; }
    You should notice that I moved the ".current_doorstyles" to the "a#door_styles:hover" rule.

  • #4
    Regular Coder
    Join Date
    Jun 2011
    Posts
    241
    Thanks
    16
    Thanked 2 Times in 2 Posts
    ok i think i understand what your trying to do, could you post the link to your website?

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't really post you a link as this website is for a client who won't want public access to any pages yet. I will however post the HTML and CSS code.

    You'll notice I removed the border-bottom effect I want and changed it to 3px. But I would still like to achieve the effect.

    HTML - index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>The Coloured Door Company</title>
        <link rel="stylesheet" type="text/css" href="rotator/wt-rotator.css"/>
    	<script type="text/javascript" src="rotator/js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="rotator/js/jquery.easing.1.3.min.js"></script>
        <script type="text/javascript" src="rotator/js/jquery.wt-rotator.min.js"></script>
    	<script type="text/javascript">
        	$(document).ready(	
    			function() {
    				$(".container").wtRotator({
    					width:614,
    					height:198,
    					button_width:24,
    					button_height:24,
    					button_margin:5,
    					auto_start:true,
    					delay:10000,
    					play_once:false,
    					transition:"fade",
    					transition_speed:1600,
    					auto_center:true,
    					easing:"",
    					cpanel_position:"inside",
    					cpanel_align:"BR",
    					timer_align:"top",
    					display_thumbs:true,
    					display_dbuttons:true,
    					display_playbutton:true,
    					display_numbers:true,
    					display_timer:true,
    					mouseover_pause:false,
    					cpanel_mouseover:false,
    					text_mouseover:false,
    					text_effect:"fade",
    					text_sync:true,
    					tooltip_type:"image",
    					lock_tooltip:true,
    					shuffle:false,
    					block_size:75,
    					vert_size:55,
    					horz_size:50,
    					block_delay:25,
    					vstripe_delay:75,
    					hstripe_delay:180			
    				});
    			}
    		);
        </script>  
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">
    <div id="slider">
    <div class="container">
    	<div class="wt-rotator">
        	<div class="screen">
                <noscript>
                	<!-- placeholder 1st image when javascript is off -->
                    <img src="rotator/images/madness_arch2.jpg"/>
                </noscript>
          	</div>
            <div class="c-panel">
          		<div class="thumbnails">
                    <ul>
                        <li>
                        	<a href="images/_doorshots/example_slide1.png" title="architecture"></a>
                            <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>                        
                            <div style="top:10px; left:10px; width:330px; height:0; color:#FFF; background-color:#000;">
                               <h1>Caption Title</h1>
                               You can use this slideshow to display your doors installed.
                               This box can be placed anywhere on this slidehow.
                          	</div>
                        </li>
                        <li>
                        	<a href="images/_doorshots/example_slide2.png" title="architecture"></a>
                            <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>                        
                            <div style="top:10px; left:275px; width:330px; height:0; color:#FFF; background-color:#000;">
                               <h1>Caption Title</h1>
                               You can show as many doors and/or images as you like...
                          	</div>
                        </li>
                  	</ul>
              </div>     
          </div>
        </div>	
    </div>
    </div><!--End Slider-->
    </div><!--End Header-->
    <div id="navigation">
    	<ul>
        <li><a id="home" href="index.html" class="current" title="Home [Access Key H]" accesskey="H"></a></li>
        <li><a id="door_styles" href="door_styles.html" title="Door Styles [Access Key S]" accesskey="S"></a></li>
        <li><a id="door_guide" href="door_guide.html" title="Door Guide [Access Key D]" accesskey="D"></a></li>
        <li><a id="order" href="order.html" title="Order [Access Key O]" accesskey="O"></a></li>
        <li><a id="qoute" href="uv_values.html" title="Qoute [Access Key Q]" accesskey="Q"></a></li>
        <li><a id="guarantee" href="guarantee.html" title="Guarantee [Access Key G]" accesskey="G"></a></li>
        <li><a id="contact" href="contact.html" title="Contact [Access Key C]" accesskey="C"></a></li>
        </ul>
    </div><!--End Nav.-->
    <div id="content">
    <div id="title_line_red"><img src="images/_titles/welcome.png" alt="Welcome" width="447" height="58" class="title" /></div>
    <div id="textbox_fancy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor neque, aliquet sit amet pretium hendrerit, tincidunt vitae velit. Etiam sed enim ut felis ullamcorper faucibus id id orci. Quisque sollicitudin, justo non fringilla rutrum, ante mi dignissim lacus, quis ultrices ligula nulla aliquet enim. Maecenas sapien nunc, rhoncus in euismod eget, pretium sodales ipsum. Donec lacinia orci id lacus aliquam feugiat eu eu sem. Integer ac diam mi, a iaculis erat. Phasellus elementum interdum pellentesque. Sed tellus lectus, tincidunt commodo molestie fringilla, condimentum vel nisi. Nulla tellus turpis, tincidunt eget posuere non, bibendum non mi. Duis neque magna, bibendum sed blandit et, elementum eu orci. Nulla facilisi. Sed vulputate turpis mauris.</p>
    </div>
    </div><!--End Content-->
    <div id="footer">
    <div id="footer_links">
    <a href="index.html">Home</a> | <a href="door_styles.html">Door Styles</a> | <a href="guarantee.html">Guarantee</a> | <a href="uv_values.html">Qoute</a> | <a href="order.html">Order</a> | <a href="door_guide.html">Door Guide</a> | <a href="contact.html">Contact Us</a><br />
    <span class="copyrighttext">The Coloured Door Company Ltd &copy; 2011 | Web Site by <a href="http://www.meikledesign.co.uk">Meikle Web Design</a></span></div>
    </div><!--End Footer-->
    </div>
    <!--End Content-->
    </div><!--End Wrapper-->
    </body>
    </html>
    CSS
    Code:
    body {background:#FFF; margin:0px; font-family:"Century Gothic"}
    a:link {color:#000}
    a:visited {color:#000}
    
    h1 {font-family:"Century Gothic"; font-size:18px; margin-top:10px; text-shadow:#999 2px 2px 2px;}
    h2 {font-family:"Century Gothic"; font-size: 18px; text-shadow:#999 2px 2px 2px; margin-top:0px}
    
    #wrapper {width:1050px; margin-left:auto; margin-right:auto; position: !important}
    #header {width:1050px; background:url(images/TheColouredDoorCo.png) left no-repeat; height:200px; margin-top:50px; position:relative}
    #slider {width:615px; height:200px; float:right; background:#ca0029;}
    #content {width:1050px; height:auto; margin-left:auto; margin-right:auto; font-size:13px; padding-top:5px}
    #textbox {width:500px; text-align:justify; padding-top:5px; float:left;}
    #textbox_fancy {width:500px; text-align:justify; float:left; border:#CCC solid 1px; border-radius:15px; box-shadow:  5px 5px 12px #CCC; background-color:#F1F1F1; padding: 0px 15px 15px 15px; margin: 10px 10px 10px 0px}
    #textbox_wide {width:1050px; text-align:justify; padding-top:5px; position:inherit}
    #newsbox {width:300px; text-align:justify; padding-top:5px; padding-left:220px; float:left; font-size:13px}
    
    .ordernow_btn {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #bababa) );
    	background:-moz-linear-gradient( center top, #ffffff 5%, #bababa 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#bababa');
    	background-color:#ffffff;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border-radius:5px;
    	border:1px solid #bababa;
    	display:inline-block;
    	color:#666666;
    	font-family:"Century Gothic";
    	font-size:15px;
    	font-weight:bold;
    	padding:6px 60px;
    	text-decoration:none;
    	text-shadow:1px 1px 0px #ffffff;
    	float:right;
    }.ordernow_btn:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bababa), color-stop(1, #ffffff) );
    	background:-moz-linear-gradient( center top, #bababa 5%, #ffffff 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#ffffff');
    	background-color:#bababa;
    	cursor:pointer;
    }.ordernow_btn:active {
    	position:relative;
    	top:1px;
    }
    
    /*Nav Menu*/
    #navigation {
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    width:1050px;
    height:30px;
    background:url(_images/_page_bg/nav_bg.png) top center no-repeat;
    }
    
    #navigation a span {
    display:none;
    }
    
    #navigation a:hover span {
    display:block;
    position:absolute;
    width:150px;
    height:30px;
    bottom:-35px;
    font-size:10px;
    text-align:left;
    padding-left:28px;
    }
    
    #navigation ul {
    position:relative;
    margin: 0; 
    padding: 0;
    list-style-type: none;
    text-align:center;
    vertical-align:middle;
    z-index:1;
    } 
    
    #navigation li {
    position:relative;
    margin: 0 0 0 0;
    position:relative;
    float:left;
    width:150px;
    height:30px;
    }
    
    #navigation li a:hover, #navigation li .current {background-position: 0 -30px;}
    
    /*Button Blank*/
    a#button { display: block; width: 150px; height: 24px; background-image:url(images/_buttons/button.png); border-bottom:#7f0300 solid 3px; margin: 0 auto; font-family:"Century Gothic"; font-size:14px; font-weight:bold; color:#FFF; text-decoration:none; padding-top:6px}
    a#button:hover {background-position: 0 -30px;}
    a#button .alt { display: none; }
    
    /*Home Button*/
    a#home { display: block; width: 150px; height: 30px; background-image:url(images/_buttons/home.png); border-bottom:#7f0300 solid 3px; margin: 0 auto; border-left:#000 solid 1px;}
    a#home:hover {background-position: 0 -30px;}
    a#home .alt { display: none; }
    
    /*Door Styles*/
    a#door_styles {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_styles.png); border-bottom:#d17100 solid 3px; border-left:#000 solid 1px; margin: 0 auto}
    a#door_styles:hover {background-position: 0 -30px;}
    a#door_styles .alt { display: none; }
    
    /*Door Guide*/
    a#door_guide {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_guide.png); border-bottom:#397388 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#door_guide:hover {background-position: 0 -30px;}
    a .alt { display: none; }
    
    /*Order*/
    a#order {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/order.png); border-bottom:#00c62e solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#order:hover {background-position: 0 -30px;}
    a .alt { display: none; }
    
    /*Qoute*/
    a#qoute {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/qoute.png); border-bottom:#6a2d01 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#qoute:hover {background-position: 0 -30px;}
    a .alt { display: none; }
    
    /*Guarantee*/
    a#guarantee {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/gaurantee.png); border-bottom:#7d7c7e solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#guarantee:hover {background-position: 0 -30px;}
    a .alt { display: none; }
    
    /*Contact*/
    a#contact {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/contact.png); border-bottom:#515051 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#contact:hover {background-position: 0 -30px;}
    a .alt { display: none; }
    /*Nav. Menu End*/
    
    #doorstyles_table { width:480px; height:auto; float:left; text-align:justify; padding:0px 15px 0px 15px; border:solid 1px #CCC; margin-right:10px; background:url(images/doorstyles_bg.png) repeat-y center; border-radius: 15px; box-shadow: 5px 5px 12px #CCC;}
    #doorstyles_textbox_wide {width:1005px; height:auto; text-align:justify; float:left; border:#CCC solid 1px; border-radius:15px; box-shadow:  5px 5px 12px #CCC; background-color:#F1F1F1; padding: 15px 15px 15px 15px; margin: 10px 10px 10px 0px}
    #box_title {text-align:center; width:100%; height:auto}
    #colour_swatch { width:220px; margin-right:40px; float:left; text-align:center; font-weight:bold}
    #colour_swatch img {border:1px #404040 solid;}
    #colour_swatch_end {float:left; text-align:center; font-weight:bold}
    #colour_swatch_end img {border:1px #404040 solid}
    
    .doorstyles_img {padding-right:5px}
    
    #contact_form {width:400px; height:400px; float:right;}
    #title_line_red {width:1050px; height:82px; border-bottom:#7f0300 solid 2px;}
    #title_line_orange {width:1050px; height:82px; border-bottom:#d17100 solid 2px;}
    #title_line_blue {width:1050px; height:82px; border-bottom:#397388 solid 2px;}
    #title_line_green {width:1050px; height:82px; border-bottom:#00c62e solid 2px;}
    #title_line_brown {width:1050px; height:82px; border-bottom:#6a2d01 solid 2px;}
    #title_line_grey {width:1050px; height:82px; border-bottom:#7d7c7e solid 2px;}
    #title_line_darkgrey {width:1050px; height:82px; border-bottom:#515051 solid 2px;}
    #3day {float:right; padding-top:36px; padding-right:36px}
    
    .title {padding-top:20px}
    #divider {height:15px; width:1050px; float:left}
    .justify_text {text-align:justify}
    
    #footer {margin-bottom:0px; margin-left:auto; margin-right:auto; background:url(images/swirl_150px.png) top no-repeat; width:1050px; height:150px; float:left}
    #footer .address {width:300px; height:100px; float:left; margin-left:0px; margin-top:120px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px}
    #footer_links {width:1050px; height:20px; text-align:left; font-size:12px; padding-bottom:50px; padding-top:150px}
    .copyrighttext {color:#666}

  • #6
    New Coder
    Join Date
    Jun 2011
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    First in your latest CSS I dont see any reference to the border on your hover. However, I think your original problem was that you were calling the border attributes in the wrong order. You should be calling your border width first, followed by style, then lastly by color.
    Code:
    border-bottom:8px solid #d17100;
    Thats what it should look like. I hope that helps.

    Matt

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your input Matt. I tried that, still no joy. Time is running out, so I may have to leave it with it just moving the background.

    Still any other ideas would be great as it would come in handy for future reference.

  • #8
    New Coder
    Join Date
    Jun 2011
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    What browser are you using. I tested this and it worked fine for me. Here is the exact css code that I tested.

    Code:
    /*Home Button*/
    a#home { display: block; width: 150px; height: 30px; background-image:url(images/_buttons/home.png); border-bottom:#7f0300 solid 3px; margin: 0 auto; border-left:#000 solid 1px;}
    a#home:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a#home .alt { display: none; }
    
    /*Door Styles*/
    a#door_styles {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_styles.png); border-bottom:#d17100 solid 3px; border-left:#000 solid 1px; margin: 0 auto}
    a#door_styles:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a#door_styles .alt { display: none; }
    
    /*Door Guide*/
    a#door_guide {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/door_guide.png); border-bottom:#397388 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#door_guide:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a .alt { display: none; }
    
    /*Order*/
    a#order {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/order.png); border-bottom:#00c62e solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#order:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a .alt { display: none; }
    
    /*Qoute*/
    a#qoute {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/qoute.png); border-bottom:#6a2d01 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#qoute:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a .alt { display: none; }
    
    /*Guarantee*/
    a#guarantee {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/gaurantee.png); border-bottom:#7d7c7e solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#guarantee:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a .alt { display: none; }
    
    /*Contact*/
    a#contact {display: block; width: 150px; height: 30px; background-image:url(images/_buttons/contact.png); border-bottom:#515051 solid 3px; border-left:#000 solid 1px; margin: 0 auto;}
    a#contact:hover {background-position: 0 -30px; border-bottom: 3px solid #397388;}
    a .alt { display: none; }
    As you can see the only item I messed with was the a#xxxxx:hover. To that all I did was add
    Code:
    border-bottom: 3px solid #397388;
    If that isnt working for you then I dont know what is going on. Because that is something all browsers should support. If still have problems make sure you validate your code. Outside of that I am at a lost being unable to recreate it.

    Matt
    Last edited by mpresley; 07-15-2011 at 10:49 PM.

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tested it in IE 8, Google Chrome and FF 5.

    Can I ask what is actually working for you? When you set the button to ".current" does it apply both the border-bottom and the background-position rule?

    Both rules work on hover, but only the background-position rule works for .current.

    I have attached chopped down screenshot to show you what I mean.

    The "current" button should be the same as the hovered button. You'll see that the bottom border rule is not being applied.
    Attached Thumbnails Attached Thumbnails CSS Menu - Hover Not Applying All Rules-button_example.png  

  • #10
    New Coder
    Join Date
    Jun 2011
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wait, I misunderstood your question all along. You created a class call .current that would take the place of someone using a: active. Okay, in that case I would add a line to each button in my css
    Code:
    a#home:active {background-position: 0 -30px; border-bottom #397388;}
    I think that would be a little easier to control then would using a class that is within a list that is within another div. Hope that helps and I hope I am in the ballpark of what you are trying to do now. I thought your original question was the hover not working. I apologize.

    Matt
    Attached Thumbnails Attached Thumbnails CSS Menu - Hover Not Applying All Rules-screen-shot-2011-07-18-9.41.31-am.png  


  •  

    Posting Permissions

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