Styles for 'after' differ in browsers - html

I'm displaying a star after input box using :after. The styles are being rendered differently by different browsers. How can i make this appear similar in all the browsers. Please see this Fiddle in different browsers where in you can see the difference.

You can set width and height for a:after and give custom style to input (to avoid differences in padding, border, etc)
http://jsfiddle.net/omLc9nfe/7/
.a:after{
content:'*';
display:inline-block;
position:absolute;
top:-8px;
right:-8px;
width:8px;
height:8px;
text-align:center;
}
.a{
position: relative;
display:inline-block;
}
input {
border:1px solid #ccc;
margin:0;
padding:2px;
}
i've checked with safari, firefox and chrome.

Related

Microsoft Edge Browser not showing table borders

Microsoft Edge Browser is not showing table borders for our website.
Our site has been using the same HTML/CSS code for years.
The table borders show up correctly in Internet Explorer, Google Chrome, and Firefox browsers.
Here is a sample of a page that is failing in EDGE.
http://www.nycourts.gov/forms/familycourt/general.shtml
The CSS code we are using is:
table.forms {
border-color:#999999;
border-width:2px;
border-collapse:collapse;
width:100%;
padding:0px;
margin:0px;
}
th.forms {
padding:5px;
border-color:#999999;
border-width:1px;
background-color:#FF9;
}
td.forms {
padding:5px;
border-color:#999999;
border-width:1px;
background-color:#FFC;
}
That's strange and shouldn't happen, but I think I have a solution for you:
Both your table and the cells have CSS rules which contain a border-width and a border-color, but no border-style.
If you add border-style: solid to these rules, the borders will also show in Edge.

Firefox overflow hidden requires float

I tested on Chrome, Opera, even Internet Explorer, my below css works as expected.
.carousel
{
position:relative;
overflow:hidden;
width:100%;
margin-bottom:0px;
}
.carousel-inner
{
font-size:0;
position:absolute;
width:6882px;
}
.carousel-item
{
background-repeat:no-repeat;
background-position:0px 0px;
display:inline-block;
cursor:pointer;
margin:0px 16px;
}
But when I tested on Firefox, .carousel-inner is not hiding overflowing element.
In order to add the same effect, I need to add float:left to .carousel-inner, which renders width:100% to be ignored.
Is there another work around specific to Firefox?
I tried clear:both with no luck.
Here is jsfiddle example
And image (Chrome, IE, Opera) :
Firefox :
Cheers !

Border around Input Number?

I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}​
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE

Why does the after pseudo element move an extra pixel when positioned absolutely in firefox?

http://jsfiddle.net/NgdUR/
im basically using css triangles made with borders to create a custom select box with both up and down arrows.
If you check this on opera, chrome, safari it works just fine, but in firefox there is an extra pixel on the after pseudo element (or one less pixel on the before) anyone know why this occurs?
If i change the pseudo elements to hold a background color they have no alignment issues:
http://jsfiddle.net/NgdUR/1/
any ideas?
Edit: image in firefox,
How i looks in other browsers:
Thanks
/Jai
I added a 1px height and width and changed the border width of each pseudo element to 2px. Does the trick in Firefox, IE9 and Chrome. IE8 and Opera 11+ looks a little chunky.
Updated fiddle
.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before,
.test:after {
content:"";
border:2px solid transparent;
width:1px;
height:1px;
display:block;
position:absolute;
left:11px;
}
.test:before {
border-bottom:3px solid #000;
top:6px;
}
.test:after {
border-top:3px solid #000;
top:14px;
}​
this fixes it for me on FF11:
.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before {
content:"";
border:3px solid transparent;
border-bottom:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:6px;
left:11px;
}
.test:after {
content:"";
border:3px solid transparent;
border-top:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:14px;
left:10px;
}
Well... A few years later and still the same issue: If you tell Firefox (speaking of version 45 at the moment) something with :before or :after and some game with thick border triangles, he still miscalculates the width and height of those elements randomly by up to one pixel. Which gives ugly visual annoyances, especially in the context of flowingly responsive layouts, when arrow heads and tails become separated from their body at half of all instances.
Having to fix those in one of my projects, i stumbled over this article. But it didn't actually help out of the box. Rather gave the idea to try completely other ways.
What reliably helped in my case was:
Set box-sizing of the triangle to border-box
Give the inner content of the triangle (width/height) size 0
Give the outer border-box the exact wanted size of the triangle
Relatively simple, but for Firefox the only way to get him into submission to the rules. Chrome didn't have any problem with any method of sizing. Opera, despite being a clone of Chrome, surprisingly showed the same clownery as Firefox, but also the same Taming.

H3 css issue on IE7

Custom design for <h3> tag... it work nicely on IE8, Firefox and Chrome.
But on IE7, the width (100%) is full which it shouldn't happen. How to fix this?
Also the font size don't appear to be the same as IE8, Firefox and Chrome
h3 {
background-color:white;
display:inline-block;
color:black;
padding-right:10px;
padding-left:5px;
padding-top:6px;
padding-bottom:6px;
margin-bottom:2px;
}
IE7 simply doesn't support display: inline-block on elements that aren't natively inline. You could fix it by setting display: inline and using various positioning things to make it work, or, alternatively, use an IE-specific stylesheet using conditional comments that sets the width manually.
It depends on your layout.
This is what you need:
h3 {
display:inline-block;
*display: inline;
zoom: 1;
background-color:white;
color:black;
padding-right:10px;
padding-left:5px;
padding-top:6px;
padding-bottom:6px;
margin-bottom:2px;
}
*display: inline uses a "safe CSS hack" to target only IE7. zoom: 1 provides hasLayout for IE7 and lower, which is required to make this work.
To fix the font size, specify an explicit font-size. For example font-size: 24px.
IE 7 does not support: inline-block
but you can 'hack' it by adding this to the end
zoom:1;
*display: inline;
hack found at: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/