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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    please help - lack of border is making page shift down when hovering over link

    I created a new menu bar recently with css. I set it up where there is a bottom border (single line) which displays only on an active page.

    It works great except when a user is on a page that does not have a link in the menu. When on a page such as this, when user hovers over link, the whole page below this shifts down due to the new white bottom border appearing. I want to keep the white bottom border on hover, but I want to get rid of the page shifting down.

    I have been going through css. I added a blue bottom border that is same color as menu (instead of white) to a "a menu" and other css elements, but I can't get it to work properly. I thought if a border (blue and hidden) was there all of the time, when a user hovers and a while bottom border appears, the page would not shift down.

    Here is a page with a the white bottom border showing properly in the menu for an active page:
    Visionrise Marketing - Gain A Superior Internet Presence!

    Here is a test page which has no active menu link. You can see the shift down when hovering over link in menu bar:
    menu-test | Main

    Any suggestions on how to modify the css to prevent the page from shifting down? Thank you for any suggestions.

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    33
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hello Andrew, so after a bit of looking how the CSS was done, it still seems a bit confusing how you have it currently setup.

    On your first link I noticed it does have that dark brown border around all links that are not selected/hovered. The fix I found for this was to edit your style.css file in wordpress. Depending on how this theme was setup there may be a separate css file for the header, so if you do not see this check for any other css files that may be related to the header.

    Currently you should see a section that looks similar to this
    Code:
    .menu {
    	background-color: #585858;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    	background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    	background-image: linear-gradient(top, #585858, #3d3d3d);
    	clear: both;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    	margin: 0 auto;
    }
    This section is what is causing that dark brown background instead of it all being blue. You should be able to go ahead and remove everything that deals with those colors. The end result should be.
    Code:
    .menu {
    	clear: both;
    	margin: 0 auto;
    }
    This also fixes your issue with your second link, having a brown background as well, however it does not resolve the issue with the page dropping down.
    For that issue it seems to be an issue with the padding and border.
    To fix this you need to go back into your style.css file and find a rule that looks like the following:
    Code:
    .menu a {
    	color: #FFFFFF;
    	cursor: pointer;
    	display: block;
    	font-size: 20px;
    	height: 30px;
    	line-height: 30px;
    	position: relative;
    	text-decoration: none !important;
    	text-shadow: 0 0px 0 #000000;
    	white-space: nowrap;
    	border-left-width: 0px;
    	border-left-style: none;
    	border-left-color: #585858;
    	font-weight: normal;
    	margin-top: 0;
    	margin-right: 45px;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0em;
    	padding-bottom: 0;
    	padding-left: 0em;
    }
    You need to change the padding-bottom from 0 to 3px so that line should be
    Code:
    padding-right: 3px;
    And below this rule you should find another rule that has many classes for it, in there you will find a style rule that says
    Code:
    padding-bottom: 3px;
    You need to change this to
    Code:
    .menu .current_page_item a,
    .menu .current-menu-item a,
    .home .menu .current_page_item a,
    .menu li li:visited > ul,
    .menu li:visited > ul,
    .menu li li a:visited,
    .menu ul li a:visited, 
    .menu a:visited,
    .menu li li a:visited,
    .menu a:visited, 
    .menu .current_page_item a:visited,
    .menu .current-menu-item a:visited,
    .home .menu .current_page_item a:visited,
    .menu li li:hover > ul,
    .menu li:hover > ul,
    .menu li li a:hover,
    .menu ul li a:hover, 
    .menu a:hover,
    .menu .current_page_item a:hover,
    .menu .current-menu-item a:hover,
    .home .menu .current_page_item a:hover,
    .menu .current_page_item a:active,
    .menu .current-menu-item a:active,
    .home .menu .current_page_item a:active,
    .menu li li:active > ul,
    .menu li:active > ul,
    .menu li li a:active,
    .menu ul li a:active, 
    .menu li li a:active,
    .menu a:active, 
    .menu li li:active > ul,
    .menu li:active > ul,
    .menu li li a:active,
    .menu ul li a:active {
    	color: #FFFFFF;
    	text-shadow: 0 0px 0 #000000;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	background-color: #0066CC;
    	border-bottom: 2px solid #FFFFFF;
    	padding-bottom: 0; /* Changed from 3px to 0 */
    	text-decoration: none !important;
    	text-shadow: 0 0px 0 #000000;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#0066CC), to(#0066CC));
    	background-image: -webkit-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -moz-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -ms-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -o-linear-gradient(top, #0066CC, #0066CC);
    	background-image: linear-gradient(top, #0066CC, #0066CC);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0066CC, endColorstr=#0066CC);
    	font-weight: normal;
    }
    The Game

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    mikemrm - thank you for the reply and taking the time to give a thorough explanation.

    The WordPress theme I am using does have a lot of css. To override the theme css, I have a child theme with my own custom css stylesheet.

    I could be missing something, but if I cut out the css from...

    Code:
    .menu {
    ...the original css will show up, replacing the blue background.

    I didn't see the brown background you referred to in my browser or using firebug, but I got paranoid and went ahead a put blue css for .menu, just in case it is showing in other browsers.

    I tried your suggestion with adding just "padding-bottom: 3px;" without any color, which makes sense. It didn't seem to work though. The page is still getting pushed down when a link is hovered over on menu-test | Main

    So I'm still back to the original issue. I left the code in the css you suggested.

    Thank you for any new suggestions.

  • #4
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    33
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hello again Andrew!

    So I looked at it again, and I do no longer see that Brown background, not sure why I was seeing it, but it is fixed now.

    Additionally, I looked at the css, and I am not seeing the last rule changed.

    Code:
    .menu .current_page_item a,
    .menu .current-menu-item a,
    .home .menu .current_page_item a,
    .menu li li:visited > ul,
    .menu li:visited > ul,
    .menu li li a:visited,
    .menu ul li a:visited, 
    .menu a:visited,
    .menu li li a:visited,
    .menu a:visited, 
    .menu .current_page_item a:visited,
    .menu .current-menu-item a:visited,
    .home .menu .current_page_item a:visited,
    .menu li li:hover > ul,
    .menu li:hover > ul,
    .menu li li a:hover,
    .menu ul li a:hover, 
    .menu a:hover,
    .menu .current_page_item a:hover,
    .menu .current-menu-item a:hover,
    .home .menu .current_page_item a:hover,
    .menu .current_page_item a:active,
    .menu .current-menu-item a:active,
    .home .menu .current_page_item a:active,
    .menu li li:active > ul,
    .menu li:active > ul,
    .menu li li a:active,
    .menu ul li a:active, 
    .menu li li a:active,
    .menu a:active, 
    .menu li li:active > ul,
    .menu li:active > ul,
    .menu li li a:active,
    .menu ul li a:active {
    	color: #FFFFFF;
    	text-shadow: 0 0px 0 #000000;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	background-color: #0066CC;
    	border-bottom: 2px solid #FFFFFF;
    	padding-bottom: 3px;
    	text-decoration: none !important;
    	text-shadow: 0 0px 0 #000000;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#0066CC), to(#0066CC));
    	background-image: -webkit-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -moz-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -ms-linear-gradient(top, #0066CC, #0066CC);
    	background-image: -o-linear-gradient(top, #0066CC, #0066CC);
    	background-image: linear-gradient(top, #0066CC, #0066CC);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0066CC, endColorstr=#0066CC);
    	font-weight: normal;
    }
    Inside here you need to change
    Code:
    padding-bottom: 3px;
    to
    Code:
    padding-bottom: 0px;
    and that seems to fix it.

    If it does not, try making it
    Code:
    padding-bottom: 0px !important;
    And let me know what worked, there may be another css rule elsewhere that is overriding it.
    The Game

  • Users who have thanked mikemrm for this post:

    andrew55 (06-08-2014)

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you very much - works great.


  •  

    Posting Permissions

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