SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right-Floated Menu Not Flush With Div Container

    Okay, hereís the issue: Iím floating a nav menu right with the goal of it being flush with the right side of itís container. However, no matter what Iíve tried, the menu is still off by a pixel or less. Iím using a reset.css file, Response Grid Systemís 12 column css file, and my own styling css file, of course.

    Any help or insight is greatly appreciated! Iím pulling my hair out over this one.

    The code is here: http://codepen.io/anon/pen/rKBnt . ( Simplified as much as possible. ĎLine 210 is where the nav menu css isí

    *Note: To replicate the problem, make sure the view is wide enough that the blue background appears on both sides of the white container. Then hover your mouse over the Contact link. You should see that it is off ever so slightly.
    Attached Images Attached Images

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You can float the list items to the right. That should bring you peace and joy.

    Browsers tend to round fractional pixel values down to prevent overflowing a limited width container.

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ronpat, thanks for the reply. Floating the li elements right produces the same results. But following up on that rounding of fractional pixels. I changed the column widths so that every column width is now a whole number (e.g. 70 and 30 vs 67.6666 and 33.3333 ). This actually made a difference, but for some reason there is still a slight gap. I've updated the code to demonstrate.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is the code that should be changed.
    Code:
    li {
    	height: 100%;
    	width: 33.33%;
    	float: left;   /* change to "right" */
    	border: none;
    	text-align: center;
    	}
    You will have to reorder the list items in HTML to restore the order.

    I guess it's possible that I'm looking at the wrong thing.

    BTW: 70 - 30 vs 66.6666 - 33.3334 doesn't matter. They are both units of percent which the browser has to translate to pixels to render in the viewport.

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I forgot to include the actual link to the code. It appears to be the same link, but the code has been updated. http://codepen.io/anon/pen/rKBnt I had tried floating right previously. It's hard to distinguish but there is still a slight gap. And thanks for taking the time to help, it's much appreciated.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK. New code. I don't see a pixel jog at the right end of the menu. I'm using Firefox. What's your browser?

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm gonna take a guess that you are using Opera (or maybe this is a webkit thing).

    I don't know what the real fix for this issue is, but I managed to find a hack that doesn't seem to bugger up FF, Chrome, or IE8.
    Code:
    ul {
        width: 50%;
        height: 5em;
        float: right;
        overflow: hidden;
        margin-right:-0.1px;    /* add me */
    }
    If you give it a try, I'd be interested to hear what you see.

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, it seems that when I changed the column widths to whole numbers that actually resolved the issue. It's also become evident that I'm going crazy. I zoomed in on multiple browsers and sure enough the pixels line up perfectly. It must just be tricking my eyes at this point. Thank you so much for the help! I needed that second set of eyes.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The pixel jog is browser width dependent. Sometimes you see it, sometimes you don't. Change with width of the viewport and it will come and go. You're not going crazy and changing the widths to whole numbers did not affect the issue. It's still alive and well in Opera... and Chrome. IE8 and Firefox get it right.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your to compounded rounding errors. Actually it's not so much the frame work but, as mentioned by Ronpat the use of percentages for element sizes will lead to pixel errors on some browsers. This of course is compounded if you have nested elements with their own pixel errors.

    This is a technique I use, when possible, to eliminate that effect.

    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">ul, li , p { margin: 0; padding:0;}
    		.nav li {float:right; width: 33.33333%; list-style: none;  background: #ccc;}
    		.nav {width: 50%; float: right; outline:1px solid green;  }
    		div {border: 1px  solid red; background: pink; overflow: hidden}
    		li:hover{ background: orange}
    		.nav a { display: block; padding:10px; }
     
    				li:last-child{ float: none; width: auto; overflow: hidden; } 
    		</style>
    	</head>
    	<body>
    	<div>
    <ul class="nav">
    	<li><a href="#">first item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">itemLAST </a></li>
     </ul></div>
    	</body>
    </html>
    Essentially, you are unfloating the last element in the row, giving it overflow:hidden; and width:auto;

    hope that helps

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    This is a technique I use, when possible, to eliminate that effect.
    That's the method I advocate also as it cures the pixel gap completely. The last non floated element will stretch to fill the available space on the line automatically. The overflow:hidden creates a rectangular block next to the float (almost like a float) and removing the width allows the element to stretch to the end of the line perfectly (note that ie7 and under would need haslayout to achieve the same effect).

    Most grids suffer from this 'gap' problem (even bootstrap) because they deal with floated columns and percentages and must round up or down depending on the viewport width. You thus end up with ridiculously long decimal point numbers in an effort to minimise the effect but having 4 or more decimal numbers is usually a sign that something is wrong with the concept.

    Some browsers will keep a running total of all the rounding in an effort to minimise the gap and others are not quite so good so you get variances between browsers. Opera used to be the worst offender and would not honour a fraction of a percent at all but luckily the modern versions are ok now although they will still have rounding errors.

    Therefore if you want a seamless join between columns then don't use a grid. Come out of the grid and use a technique such as in Dresden's post above.

  12. #12
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the informative response guys! I had a feeling it was the percentages causing grief. I will try to implement dresdens technique, so far I've managed to make it significantly less noticeable. It's good to know what causes the gap so that I can prevent it in the future.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, katten,

    You can implement @dresden_phoenix (and @Paul O'B )'s technique by doing this:

    Add this code to your local stylesheet (make the selector more specific if necessary to override the "col" and "span_10" styles):
    Code:
    .test {
        float:none;
        overflow:hidden;
        zoom:1.0;
        width:auto;
    }
    Then add the class "test" as shown in blue:
    Code:
    <div class="container">
        <div class="row" id="row1">
            <div class="col span_2">
                <div class="logo">Logo</div>
            </div>
            <div class="col span_10 test">
                <div class="nav-col">
                    <ul id="nav">
                        <li><a class="active" href="#">Intro</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <a href="#" id="pull">Menu</a>
                </div>
            </div>
        </div>
        <div class="row gutters" id="row2">
            <div class="col span_9"></div>
            <div class="col span_3"></div>
        </div>
    </div>
    In this way, you can see it fix the pixel jog and decide how you want to merge it with your code.

  14. #14
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat, for your continued help.

    Below is how I implemented it:


    Code:
    div.col.span_9.test {
    	float: none;
    	overflow: hidden;
    	zoom: 1.0;
    	width: auto;
    }
    
    li:last-child {
    	float: none;
    	width: auto;
    	overflow: hidden;
    }

    Code:
    <div class="container">
    	<div class="row" id="row1">
    		<div class="col span_3">
    			<div class="logo">Logo</div>	
    		</div>
    		<div class="col span_9 test">
    		    <ul id="nav">
    				<li><a href="#contact">Contact</a></li>
    				<li><a href="#folio">Portfolio</a></li>
    				<li class="test"><a href="#intro">Intro</a></li>
    			</ul>
    			<a href="#" id="pull">Menu</a>
    		</div>
    	</div>
    Unforunately this does not eliminate the pixel gap. Unless I'm implementing it incorrectly which is also possible.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    katten, I've repeated the tests and the following colored items seem to matter. Paul's fix seems to depend on floating the list items to the right. Nothing more. No need to apply the "test" fix to the last list item.
    Code:
    li {
    	width:33.33%;
    	height:100%;
    	float:right;
    	border:none;
    	text-align:center;
    }
    .test {
    	float:none;
    	overflow:hidden;
    	zoom:1.0;
    	width:auto;
    }
    Code:
    <div class="container">
        <div class="row" id="row1">
            <div class="col span_3">
                <div class="logo">Logo</div>
            </div>
            <div class="col span_9 test">
                <div class="nav-col">
                    <ul id="nav">
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Intro</a></li>
                    </ul>
                    <a href="#" id="pull">Menu</a>
                </div>
            </div>
        </div>
        <div class="row gutters" id="row2">
            <div class="col span_9"></div>
            <div class="col span_3"></div>
        </div>
    </div>
    If this does not work for you, please post the code in CodePen and tell us more about your testing environment. In what browser(s) are you testing? You've mentioned "barely noticable" a couple of times... do you have a retina display?

    For me, applying the fix that Paul and DP gave, plus floating the list items to the right, fixes the jog in Opera.


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
  •