Please check this fiddle
input {
border: 1px solid blue;
padding: 4px;
border-radius: 5px;
background: transparent;
}
It looks good in any browsers other than IE 11.
If you test it in IE11 you'll see that the border is broken (white pixels) at the beginning (top and bottom) just after rounded corners, like this:
What do I miss in my style declaration?
I am able to replicate this issue in IE 11 inside virtual box. It works correctly in Edge.
This is the only solution I could find to fix this issue:
Go to device manager and disable the default Virtual box display adaptor.
Related
Im having some issues with how the content on a website im designing is appearing.
The content was originally designed and working normally in chrome but when I open the site in firefox or chrome on android i get the following issue.
Screenshot in Chrome
Screenshot in Firefox
The site is being rendered exactly the same through the inputs have a black background and the main div appears to have a shadow over it.
If anyone has had a similar issue that they have been able to solve Id greatly appreciate it.
Looks like Firefox adds automatically a red border for :required fields.
If you want to override this behavior you can do:
input:required {
box-shadow: inherit;
}
I ended up doing
input:required {
box-shadow: inherit;
}
input:focus {
box-shadow: 0px 0px 2px 2px #7AA6ff;
}
to have a normalized behavior cross-browser.
The question is: is this a new Chrome bug or is something about my css causing the problem. I have created a jsfiddle at http://jsfiddle.net/tomba/ayoeebbs/1/ which reproduces the issue rather than include all the drop-down's css here.
The drop down menu worked fine on all current versions of IE, Firefox, Safari and Chrome until recently. Starting with either Chrome 42 or 43 this drop down is broken. When you hover over the anchor div the drop down shows but as soon as you move into it it vanishes - meaning no items can be selected. I have narrowed it to the border-radius line in this css:
#drop-menu:hover {
background: #888;
border-top: 1px solid #666;
border-right: 1px solid #666;
border-left: 1px solid #666;
border-radius: 5px; /* remove this and Chrome is happy again */
}
If the border-radius:5px; is commented out all is good again. This seems very strange and is pretty new in that I haven't changed my code in months. I have seen a few somewhat related questions but none (I've seen) that find the problem to be something so innocuous seeming.
It is not a big deal to me to remove the border-radius though I'd prefer to keep it but obviously won't for now at least as it completely breaks navigation. Mostly I want to know if I'm causing the problem somehow and only Chrome is "doing the right thing."
I need to use CSS triangle to create and arrow. This is the one Im working on: http://jsfiddle.net/7vRca/
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.
Any idea why this is happening and how can I make it look smooth as in chrome?
I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...
.arrow-outer {
border: 2em solid transparent;
border-right: 0;
border-top-color: #3bb0d7;
height: 0;
width: 0;
}
Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).
It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.
Setting 'inset' for the transparent borders helped for me. I found this trick here: http://css-tricks.com/snippets/css/css-triangle/#comment-103785
Try add this into css:
-moz-transform: scale(.9999);
Try using RGB instead of transparent,
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid rgba(255,255,255,0);
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
as we did here: Weird dark border :after css arrow in Firefox
EDIT: by the way, it worsk in both ways in my Firefox (one with the gray line, the others without, but never the effect you described...)
I'm writing some html to be shown in the screen and sent by e-mail too (I'm making it with tables). I want to sepair the sections. I've tried putting some hr tags and it's seen properly in the navigators (Internet Explorer 9 and Firefox 10) and in the email managers (Outlook 2010, Hotmail and GMail). Well, if I print it (in the navigators) I don't see the hr tags. I have the same problem with a label whose background color is seen in the navigators and email managers but when the document is printed is not seen. (The css file is the same for showing in screen and for printing).
Thanks for your answers.
You can make an <hr> that's printable without changing browser settings like this:
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
caveat: I only tested in chrome.
The background not printing is a preference setting in your browser. It's off by default to save ink. But if the hr (or any construct) is white and is showing on the coloured background on your screen, you might want to switch this setting on.
Make printable without changing browser settings:
hr {
border-top: solid 1px #000 !important;
}
caveat: Tested in Chrome, Firefox, Microsoft Edge.
I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.
We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons.
However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.
I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.
What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.
Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:
.mybutton {
border: outset #EFEFEF 1px;
}