In the recent versions of Firefox, horizontal lines change thickness as the page scrolls on one of my pages. If I scroll the page until a line gets thin or disappears, and leave it at the position, it stays that way (scrolling itself isn't the problem, position on the screen is). These lines are generated in the border-bottom property of table cells. I'm trying to turn on must the bottom border of each td to create a horizontal rule between each tr.
IE, Chrome and Safari all behave.
In FF, if I change the border-collapse property to "separate", from "collapse", the lines behave, but I have unwanted gaps in the line, between each td.
Looking at the box model of the td element in Firebug, a 3px border-bottom is converted into a 1px top border and a 1px bottom border. A 12px border-bottom is converted into a 5px top border and a 6px bottom border.
I haven't been able to duplicate the behavior in jsfiddle, yet, so there must be some other property that is creating the artifacts. Therefore, I'm not too hopeful at getting a useful answer, unless someone happens to have already fought this battle and recognizes symptoms. I'm making my lines thicker and lighter in color to kludge this problem for now. The effect still occurs, but the eye doesn't notice it as much when the lines are thick.
I don't think we are allowed to post URLs, otherwise, I would post an example page from the live site.
give margin-bottom -1 it will be solve the problem.
Related
I have a list of items with some styling. Basically, I have an anchor inside the list item, and the anchor has the gray background etc, while the item itself has a gradient bottom border.
Between some items, I get a white line. I've found that it's caused by the list item it self 'shining through' the label. Why?
It looks like it doesn't happen if no anchor text wraps.
It also doesn't happen if the bottom border has an even thickness (2px, 4px, etc)
I know I can hide the effect by setting the background color on the item itself. I'm more interested in why it happens then how to solve it.
Here's a link to a codesandbox showing the effect.
It seems that you are coming across a fairly well known problem.
It arises when the system is trying to map CSS pixels into the several screen pixels that make up one CSS pixel on many modern screens.
Sometimes a screen pixel gets ‘left behind’ so causing a narrow line.
It’s a bit like a rounding error.
It can often be seen when zooming at certain levels. The fact that you see it on 1px sizing is what makes me feel this is the problem here too.
Edit #3 - Question rewritten
Issue: border width of anchor tags unexpectedly increase on mouseover when a:hover css selector is used.
Question: Is this a Firefox bug or a CSS behavior I am unaware of?
Requires Firefox 57.0.0 - 57.0.2
Adjust browser page size to 2,000+ pixels.
Run code snippet.
Increase and decrease the width of the browser page using the two-headed horizontal arrow cursor.
Hover your mouse over the link and you will see the border width increase from 1px to 1.11667px.
a:hover {}
a {
border: 1px solid #000;
}
Link
Original Question
This does not happen on Chrome or Firefox 50.0.0 and 56.0.2.
To test this you'll need:
Firefox 57.0.0 - 57.0.2 (the latest version on Dec 13th, 2017).
A large screen around 2,000 pixels.
If your screen isn't that big, you can press cmd - to zoom out. If you're not sure how big your screen is, you can use Firefox's page rulers.
Issue
I've created a js fiddle. Move the vertical column separating the JavaScript and rendered output as far to left as it goes. Make the browser window as wide as you can, and zoom out if you need to. Click Run. Move your mouse over the yellow boxes and take note that nothing happens.
Now, resize the width of the browser window, making it smaller and larger. Hover over the boxes again and you'll see they start moving. For some reason, Firefox is changing the border width from 1px to 1.66667px.
I've found the a:hover CSS selector is causing this issue. If you read the comments in the js fiddle, even just putting an empty a:hover {} in the CSS will cause the issue. I cannot remove the a:hover line from the CSS on our website, unfortunately. I realize I can use outlines instead of borders to fix the rendering issue.
My question is whether this is a Firefox bug or something I don't know about the a:hover selector and borders?
Edit: The desired behavior is for the borders to not change their width.
Edit #2: A simpler js fiddle.
I was just about to create a bug on the chromium issue tracker, but then I thought I would give it a try here first.
Try having a look at this site:
http://www.norabrowndesign.com/css-experiments/border-image-frame.html
However it appears that chrome does support border-image-outset now or so I thought.
It responds to the command, but does not behave as I would expect.
Is moves the images outward and thus creates more whitespace around the content instead of less.
Reading the spec I am not sure if chrome is wrong in doing what it does, but it certainly seems the author of the linked site expected something else.
Further more, if the present behavior is correct then I cannot see what the purpose of it is. And the problem with the large border image, will have no solution at all.
So what is it, should I submit a bug or?
I believe Chrome behaves as it should. border-image-outset is supposed to extend the border image area beyond the border box. It seems to do that in Chrome.
Removing the whitespace around the content would require the opposite which can be achieved with the help of border-image-width.
border-image-width divides the border image area and is basically the counterpart to border-image-slice (which divides the border image). It's initial value is 1 (multiples of the corresponding computed border-width). So without assigning a border-image-width every slice would be resized to border-width.
See border-image-width at w3.org
To remove the whitespace around the content while keeping the size of the border image you would have to reduce border-width and set border-image-width to an appropriate value.
Try the following changes in the example from your question:
#one {
border-width: 74px;
border-image-width: auto;
}
I am designing a site for a new foundation, and I have set April 15 as my deadline for finishing it. It is ready except for editing the content and fine-tuning the design. In the fine-tuning, I am wrestling with an irksome little problem that I would like to ask someone to please help me solve. The problem is simply this: a division in the site's structure will not function as I would like for it to function unless it has a border around it. Never seen a thing so erratic before.
The problem appears to be related to how the elements interact in the layout. First, there is the html tag which holds the background image, a jpeg of a creek with some buildings on the far side and a green grove of grass created by a divisional tag (#greengrass) positioned at the bottom of the background image . div#greengrass is styled to extend downward as a content div, resting on top of it, lengthens. It is this #greengrass element that performs awkwardly unless there is a border laced around it.
Specifically, if its border is removed, it projects upward and covers the background image, even though positioned to start where the background image ends. Its upward projection, therefore, makes the entire page background green. But when it has a border, the background image of the creek shines through as bright as the sunny spring sun.
Thus, I have one question: Why does the absence or presence of the division's border affect its behavior? Here is the url to the test site for the foundation: http://postmaterial.org/tests/signin-ap.php. At top center, I've added a link that lets you toggle between the bordered and borderless div#greengrass effects. I have no clue as to the reason for the tag's behavior and would appreciate an explanation. Thanks.
To answer your question: "Why does the absence or presence of the division's border affect its behavior?" I agree with ichao (as his answer stated) that collapsing margins is the issue.
However, I think the solution is to keep only a border-top: 1px solid #009900 as it is only the top border that is needed to prevent the margin collapse. This will prevent the horizontal scroll bar from showing up.
without the border of #greengrass, the negative margin-top of its child collapses through (and pulls the entire construct out of sight, topwards), and in consequence, #greengrass is not pushed down enough by top anymore.
border prevents collapsing margins, as display:inline-block or display:table or float:left would in this case (overflow:hidden is not an option here). In old IE, any haslayout trigger like zoom:1 should do. I did not test it, though.
I have a Chrome extension with a browser action that is trying to imitate the visual style of a different app. Part of this style is a header and footer that extend to the edges of the app. The problem is that the browser action popup contains a small margin and rounded border by default that appears to be hard coded to display as white space.
It would be nice if there was some way to either remove this margin or force my content to be able to extend all the way to the edges. Does anyone know of a way to do this? (I highly suspect that there's nothing to be done, but it never hurts to ask, right?)
Oh, and for the record, negative margins get you nowhere in this case. :(
From my experience in developing the extensions as well as using them. There isn't a way to get rid of that small border.
The best experience I've seen is matching the rounded corners with a border-radius: 5px
You can't remove the 1px white margin but you can remove the 8px margin you have to add body{margin:0px !important;} to your css then you can add a border-radius as suggested by Ryan