SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Submenus inherit line-height of mains' and search button unaligned with textbox

    The submenus of the navigation items have a line-height of 77px like the main items', however the submenus must have a line-height of 35px. I cannot change the the submenus' line-height without changing the mains'.

    Another problem, is the search button is not aligned with the search box on browsers other than Chrome.

    The site for reference.
    Everything to do with the navigation bar is found in SpryMenuBarHorizontal.css.

    Code:
    #navlogo
    {
        background: url('/Images/Layout/navlogo.png') no-repeat;
        font-size: initial;
        width: 130px;
        overflow: hidden;
        color: transparent;
    }
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    #menucontainer
    { 
        background-color: #15AEBE;
        background: -webkit-gradient(linear, left top, left bottom, from(#00B0F0), to(#15AEBE)); /* Safari 4+, Chrome */
        background: -webkit-linear-gradient(top, #00B0F0, #15AEBE); /* Chrome 10+, Safari 5.1+ */
        background: -moz-linear-gradient(top, #00B0F0, #15AEBE); /* FF3.6+ */
        background: -ms-linear-gradient(top, #00B0F0, #15AEBE); /* IE10 */
        background: -o-linear-gradient(top, #00B0F0, #15AEBE); /* Opera */
        background: linear-gradient(top, #00B0F0, #15AEBE); /* W3C */
        height: 77px;
    }
    
    ul.MenuBarHorizontal
    {
    	list-style-type: none;
    	cursor: default;
    	width: 100%;
        font-family: 'Segoe UI', Arial, sans-serif;
        color: white;
        text-align: center;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    	z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    	list-style-type: none;
    	text-align: left;
    	cursor: pointer;
        line-height: 77px;
        font-size: 24px;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	z-index: 1020;
    	cursor: default;
    	width: 11.5em;
    	position: absolute;
    	left: -1000em;
        font-size: 20px;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
    	left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    	width:  11.5em;
        position: relative;
        left: 0;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
    	position: absolute;
    	margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
    	left: auto;
    	top: 0;
    }
    
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	padding: 0px 20px;
    	color: #ffffff;
    	text-decoration: none;
    }
    
    /* Submenu */
    .sub
    {
        background: url(/Images/Layout/menu_shadow.png) #10AECA no-repeat;
    }
    /* Menu items that have mouse over or focus */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    	color: #000000;
    }
    
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    	ul.MenuBarHorizontal li.MenuBarItemIE
    	{
    		display: inline-block;
    	}
    }
    
    /* Search Box */
    .search {
        padding-left: 18px;
    }
    
    .search input:focus {
        outline: 0;
    }
    
    .searchbox {
        height: 24px;
        width: 165px;
        border: none;
        box-sizing: border-box;
        margin-right: 0;
        overflow: hidden;
    }
    
    .search input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       padding-left: 2px;
    }
     
    .search input:-moz-placeholder {
        color: #999;
        font-weight: normal;
        padding-left: 2px;
    }
     
    .search input:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        padding-left: 2px;
    }   
    
    .search button {
        background: url("/Images/Layout/Nav_search.png") no-repeat scroll left center transparent;
        width: 24px;
        height: 24px;
        border: none;
        position: relative;
        top: 6px;
        line-height: 24px;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .search button:hover {
        cursor: pointer;
        background: url("/Images/Layout/Nav_search_hover.png") no-repeat scroll left center transparent;
    }
    
    .search button:focus {
        outline: 0;
    }
    /* End Search Box*/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    H,

    You can fix the line height like this:

    Code:
    ul.MenuBarHorizontal li ul,
    ul.MenuBarHorizontal li li,
    ul.MenuBarHorizontal li li a {
    line-height:35px;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    For the search box just set the vertical-alignment properly and even out the default padding.

    e.g.
    Code:
    .search input,.search button{vertical-align:middle}
    .search button{top:0}
    .searchbox {padding:0 3px}

  4. #4
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! Thanks. There are no further problems.


Bookmarks

Posting Permissions

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