#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    Matte NavBar Resize Issue


    Hey all, just joined the forums today. I am new to web dev and for the past month I've been working on my first website. I've been having a lot of trouble with this issue recently regarding CSS. Specifically, it's regarding the adjustment of a matte navbar when zooming in and out of a web browser. It happens on the latest versions of IE, Firefox, and Chrome.

    I am using David Appleyard's Dropdown CSS menu (pixelsdaily.com/resources/html-css/dropdown-css-menu/).

    Everything seems fine at 100% size on my computer (15.6 inch screen 1366x 700 resolution), but as you zoom out, you can see that the tabs of the navbar seem to push the others ones out until another row below forms. I'm sure either the Menu or Menu_Wrapper is the culprit, but no matter how much I've played around with it, I can't find the solutions.

    Thanks for any help!

    Here's the full code:

    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" />
    <title>NavBar Test</title>
    <style media="screen" type="text/css">
    
    	/* The CSS Code for the menu starts here */
    #menu {
    	font-family: Arial, sans-serif;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 41px 0;
            padding: 0px;
            list-style-type: none;
    	background-color: #eee;
    	font-size: 13px;
    	height: 25px;
            border-bottom: 2px solid #ccc;
    }
    #menu li {
    	float:left;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: auto;
    	margin-right: auto;
    }
    #menu li a {
    	text-decoration: none;
    	display: block;
    	padding: 0 39.25px;
    	line-height: 25px;
    	color: #666;
    }
    
    
    #menu li a:hover, #menu li.active a {
    	background-color: #f5f5f5;
    	border-bottom: 2px solid #DDD;
    	color: #999;
    }
    #menu_wrapper ul {
    }
    #menu_wrapper {
    	background-image: url(images/grey.png);
    	background-repeat: no-repeat;
    	background-position: right;
    	width: 810px;
    	margin-top: -41px;
    
    }
    /*
    #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}*/
    
    /* Black Menu */
    #menu_wrapper.black ul {
    	border-bottom: 2px solid #000;
    	background-color: #333;
    }
    #menu_wrapper.black a {color: #CCC;}
    #menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444; }
    #menu_wrapper.black {background: url(images/black.png) no-repeat right;}
    #menu_wrapper.black div {background: url(images/black.png) no-repeat left;}
    </style>
    
    </head>
    
    <body>
      <!-- Black Menu -->
    <div id="menu_wrapper" class="black">
      <ul id="menu">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="research.html">Research</a></li>
        <li><a href="papers.html">Papers</a></li>
        <li><a href="people - all.html">People</a></li>
        <li><a href="internal.html">Internal</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    anyone? bummmp
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, snaplodon.

    Why would someone want to zoom out? Zooming in makes sense to me, but not zooming out (unless you're using a smart phone).

    I recommend giving the list-items "display:table-cell" instead of "float:left", but if you support any IE versions 7 and older you'll need an alternative for them.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, snaplodon.

    Why would someone want to zoom out? Zooming in makes sense to me, but not zooming out (unless you're using a smart phone).

    I recommend giving the list-items "display:table-cell" instead of "float:left", but if you support any IE versions 7 and older you'll need an alternative for them.
    Thanks for the replay Kravvitz, I realize the post was a bit long. Wow, that single line makes it work for zooming in now! Yes, I was most worried about zooming in, but I was just thinking that on monitors with different resolutions, they might "adapt" a zoomed out version (I am not sure of this).

    The only problem now is that the words in the menu bar will push each other out to the right as I zoom out, but I'll look into it.

    Thanks again!
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    You're welcome.

    I realize the post was a bit long.
    Long? It seems like a normal length for this kind of question.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by Kravvitz
    You're welcome.


    Long? It seems like a normal length for this kind of question.
    Glad to hear it then.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Location
    London
    Posts
    7
    Rep Power
    0
    Looks fine to me on chrome and firefox i tried resizing the window as well could not replicate your problem

    i50.tinypic.com/33pdlyh.png

IMN logo majestic logo threadwatch logo seochat tools logo