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.
Related
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
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 have been searching for an hour on how to remove a black border/shadow around the top and left sides of a select element in IE 8 and less. Everything I have come across does not work.
I am using normalize.css and setting a 1 pixel solid red border around the error state of a select element.
Can someone tell me how to remove the black from the top and left sides? I have tried all sorts of things including the filter property, absolute positioning, and a few other things but nothing works.
Here's a zoomed in screenshot of what I'm referring to:
Try setting the following in your CSS:
select {
outline: 0 !important;
}
However, styling the select element is a notoriously wonky endeavor. Selects are much like file inputs in that browsers do not respect style rules applied to them.
If you'd like a more in-depth look at how these issues can be addressed, I highly recommend you check out this previous post.
I have an issue that terrorizes me in my sleep, unrelentingly . If you have an attainable solution and care to share it, please do; I'd like to have a normal night of sleep again.
On my latest project, there are multiple times when I will need to have 4 or 5 elements floated next to one another. Each element must be sized using percentages (%) but must also have border-right: 1px solid #000.
Once upon a time, I would normally size each element with percentages, then create a child element that would have all of the styling properties that the parent probably should have had, including the border-right. This solution isn't ideal, however, because it involves a lot of unnecessary markup.
A co-worker then directed me to another solution. When an element has a width that is sized using %s, and also needs to have border-right: 1px solid #000, apply margin-right: -1px as an offset. And while it works, it created another issue for me (which is why we're here, together, in union).
When zooming out in any of the major browsers (ctrl mousescroll, ctrl -), the floated elements that have been the focus-of-discussion tend to dance around a bit; the last element toggles between breaking to the next line and then snapping back. Please refer to the image below:
The reason this should be addressed is because the scope of the project has the potential of serving people from many different demographics (especially those who may need to scroll in, or out for that matter, to make the text larger or smaller). A very broad project, indeed.
How can I reach my goal highlighted in the example above?
How can I have 4 or 5 or more (or less) bordered elements floated next to one another, sized proportionally using %s, WITHOUT them breaking form?
You can use the experimental box model CSS3 declaration to have the borders detract from the elements width instead of adding on to it. This should prevent the problem. Quirksmode has a nice write up on it. It is supported by IE8/9 and current versions of webkit, opera and ff.
li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The basic issue here, I think, is that you're 'misusing' the width property - width is supposed to control inner boxes, not the size of outer boxes. That is, your borders are supposed to be added on to your boxes, not included in the calculated width.
The result is that you don't have many choices beyond either:
Using Javascript to do some fancy recalculation,
Seeing if you can trigger quirks mode and use the IE5 box model (NOT a good idea),
Replacing borders several background images in lots of stacked divs (not nice), or,
Floating 20% width containers, then putting width:auto divs (not width:100%) with borders in the parent floats.
I know solution 4 sounds horrible, and means non-semantic markup, but it's a common kludge and one that other developers will probably understand (too) well.
This may sound horrible, but why not use a background image to create the border?
.box_20_percent {
width:20%;
float:left;
padding:0;
background-image:url([one_pixel_colored_image]);
background-repeat:repeat-y;
background-position:right
}
This should leave the "border" out of the resize calculation altogether.
If you declare the border-width and negative margin in ems instead of pixels, there is no wrapping/jumping. I realize this may be cold comfort since it would compromise your design somewhat, but it works!
I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?
Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).
The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?
The "messy photo pile" effect seems to me to break down into three components:
Put a background behind the image for the "polaroid" look (explained in other comments
Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.
Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.
CSS3 it's supported by everyone yet, but you might want to look into border-image.
Put a div around the image and then have 2 styles defined.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.
Below is my recommendation which has a clear and simple CSS which results in a perfect photo stack.
http://dabblet.com/gist/2023431