I have a div, which has it's border property set to:
border: 1px solid #3a87ad;
When I inspect this div in my browser (using Firefox 60.0.1), the computed values for the border are 0.6 px. This wouldn't be an issue alone, but I am using multiple numbers of these divs in a plugin, which places them one below the other, and when it calculates the top position of each div, it uses exact values. After 3-4 divs placed, I can see a tiny white line (the extra white-space from the borders), that starts adding up on the screen.
Unfortunatly, I can't provide a fiddle, as the code is too large, but I am hoping someone else also experienced simmilar issues, and knows a solution.
What I already tried, is refreshing my zoom settings in the browser, but that didn't help either, viewing on 100% zoom, the problem still persists.
Thanks!
I think your code is overridden by some other CSS you use in your Plugin
Check it Carefully
and try border: 1px solid #3a87ad!important;
I hope it works
Related
I am developing a responsive UI for web project with Google Chrome's inspect element. Everything was fine until the screen is re-sized to 640px and below.
The images shows that the Swipe Left to Right and vice versa has just been enabled? Or something like that.
I have tried removing all the paddings and margins, but the "Black-Margin-Like" is still there.
How can I remove that Swipe LR to RL effect, or whatever they call it?
Finally I got the very reason of this behavior.
The reason is the overlapping elements.
For those who may stumble on this problem, try my approach on finding the overlapping elements.
Add this to your css file:
body * {
border: 1px solid;
background: #000000;
}
Adding that css styles will enable you to see the elements that causes RL to LR swipe because of extra width.
Happy coding!
I've got two inputs, styled primarily by Zurb's Foundation framework. They're in a .row.collapse and each in a .medium-6.columns (these columns are 50% width, floated left, no margins). The inputs themselves are 100% wide within their containers. It's all pretty simple, and the Inspector and jQuery.css are all returning what I'd expect them to. But there's a border issue. Here's the gist of the CSS:
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
This is to have the effect of collapsing the middle border. But for some reason, this border-right-width: 0 is throwing Webkit (Chrome and Safari but not Firefox) off. The inspector shows 1px border, and the proper border-color. The white input background lines up properly with the second input (that is, there's room for the border), but there's no gray border. Maybe it's rendering transparent?
If I open this up on a retina display, it renders normally - proper borders on both. If I zoom in, the borders show up when it hits the "small" media query (mobile device sizes). But I can't make this border show up on a non-retina, desktop display in Chrome.
Here's how it looks in Chrome:
And here's how it looks in Firefox:
To double-check, I used the Web Inspector to apply a simple border to the first element. It showed up fine (looked like the Firefox screenshot). Adding border-right-width: 0 reintroduced the problem. It seems clear that that's the issue. But I don't know why?
It seems like border-radius may play into this as well? The Firefox screenshot above shows a double-border in the middle, despite the Inspector showing 0 right border. If I uncheck border-radius, in Firefox, it fixes that issue.
These properties should all be independent of one another. Why are they affecting each other?
Edit
Trying to recreate in codepen. Unsuccessful so far, but it looks like it has something to do with transform - these inputs are in a container that is set with the following
position: absolute;
top: 50%;
left: 50%;
#include transform(translate(-50%,-50%));
This has the effect of vertically and horizontally centering the element no matter the width or height in modern browsers. When I turn off transform the border shows up as it should. As I understand, transform accesses the GPU? Or it can? It seems quite possible that this is what's throwing it off. If you look at the screenshot, there are strange border artifacts (like, a partial, interior border on the right side of the left element) that I can't explain.
Edit 2
It's got to be transform - changing the border-color to red makes this clear: the border is being rendered at a sub-pixel level and then, for some reason, cut off in a funky way. You can see a vague pink border around the left input:
This may or may not help and without the fiddle, it's difficult to recreate; but I wanted to share something I've recently encountered with webkit browsers and Foundation.
By default, Foundation attaches a right float on the last column in each row or horizontal block...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99% of the time this is never an issue, unless you have a very small border between columns. Webkit browsers calculate percentages strangely at times.
You mentioned your columns were floated left, but just in case this is still an issue; overriding the above pseudo class to float the last-child column left may help.
I am trying to recreate that Google-style toolbar on G-mail and a few other Google services.
I have tried doing this as both a formatted list and nested div elements in one container but I have the same problem each time.
When you mouse over, the new 1px border moves all the other elements around and I have to apply stuff like:
left: -1px;
bottom: 1px;
Which is all well and good for the element currently :hover'd, all the rest move around and it looks ugly.
So I guess my question is:
Is there any way to display things such that a new 1px on :hover, will not alter the positioning, while still displaying these elements WITHOUT absolute positioning.
Obviously if the only avenue is absolute positioning where I have to put in pixel co-ordinations then sure, but there has to be a more elegant way.
You can do several thing to avoid the 1px border shifting things around on hover.
http://jsfiddle.net/ZeikJT/tBmm2/
One solution is to add a transparent border (border:1px solid transparent) so that there is always a gap. This will work in pretty much all situations. It also allows you to then simply change the border-color on hover and not re-specify the border-width so you won't ever need to make changes in two places if you decide to change the width.
http://jsfiddle.net/ZeikJT/NkBwp/
Another solution is to add a margin or padding that then gets taken out on hover. This is a little trickier to get working properly but can work just as well.
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.