I'm having an strange issue with some css and IE9.
I'm not sure but I can bet you is the first time you see it.
All the three images are in a div with a class.
This is the CSS for the class:
.imagen_pro{
border: 1px solid #CCC;
width: 180px; height:160px;
text-align:center;
background-color:#FFFFFF;
}
.imagen_pro img{
max-width: 160px;
max-height: 160px;
}
This is happening is some cases, i mean, not in every IE9 this is happening.
I don't know what's going on. If someone could help me i'd really appreciate it.
Thanks.
Hi all and thanks for answering. I've found what was going on. it happens that each one of this image are inside of an anchor tag and with that css the img was overflowing the so i had to apply some css to the and make the div container a little taller. thank you anyway
I'm betting that the pics are improperly positioned/sized. They're bigger than the max-size of you element (max-height: 160px;).
Use firebug, select the pics and fiddle with their height and position.
Also I see an error in you code. You have both :
width: 180px;
and
max-width: 160px;
These are contradictory statements.
I'm not able to reproduce your issue in my version of IE9. However, I would be willing to bet that the issue is that your images are popping out of the top or bottom of their container and are being drawn over the border.
Try adding overflow:hidden to the .imagen_pro class.
OR
If that doesn't work, either expand the height of the .imagen_pro to be, say 162px.
OR
Change the max-height on the images to be 1 or 2 pixels smaller. For example:
.imagen_pro img{
max-width: 160px;
max-height: 158px;
}
Related
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
Page:
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr
Same page but linking to the anchor
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites
My left and right sides move up.
So i'm using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.
This left and right side arer within a container that is overflow:hidden;
This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.
what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.
thanks for the help in advance
#topcontent {
position:relative; /* required for ie or 4000px padding/margin visible */
background-color: #231f20;
border-left: 1px solid #231f20;
border-right: 1px solid #231f20;
overflow:hidden;
}
#topcontent .left {
position:relative;
width:703px;
margin-bottom:-4000px;
padding-bottom:4000px;
background:#FFF;
}
#topcontent .right {
width: 245px;
float: right;
margin-bottom:-4000px;
padding-bottom:4000px;
}
Ugh, well I don't exactly have an answer for you - I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular "bug":
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
I honestly don't know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.
Best of luck, and I hope that link helps a bit - they have some workarounds
Fastest solution is to give padding-bottom to the overflow:hidden element. In your case it will be
#topcontent { /* Any element with overflow: hidden property */
padding-bottom: 18px; /* Value in px that will work for you */
}