Border around Input Number? - html

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

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.

Styles for 'after' differ in browsers

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.

CSS circles look oval on ios

I created a few circles using CSS that I use as text inputs on my HTML index page.
Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
I have tried using meta flags and webkit properties but no go.
Any hints?
input[type=text5]{
position: absolute;
left: 270px;
top: 340px;
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
margin:0 auto;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-family:Verdana;
font-size:16px;
font-weight:bold;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Large Font:
Small Font
well guys, I figured out after playing a bit with CSS properties. For some reason iOS was adding padding to the text. Interesting that none of the desktop browsers added padding. In any case adding: padding: 0px; solved it.
One More Way...
If you apply CSS3 Property box-sizing:border-box; on element being oval in iOS, the problem will be solved.

ie-8 getting black outlines on images

i am developing a site and getting black outline in ie8
its looking great in all other major browser but not in ie-8
please help me this is my live link
http://www.cadellfoods.com.au/food-service-products.html
(the section in circular shape)
please help me
the code for all images is as following
#Section1
{
background:transparent url('Images/Chilled.png') no-repeat;
background-repeat:no-repeat;
border:none; outline:none; outline:0;
border-width: 0;
}
Seems OK in IE 8 too here. maybe you have issues in IE 8 on windows XP
as a good practice, you should not start your ID's or classes with capital letters.
Might not be it, but I have noticed IE puts borders on linked images. You need to undo those defaults.
#Section1 a:link img {
border:none;
}
Don't forget the :hover and :visited pseudos.
Just in case try these too
#Section1 img {
border:none;
}
#Section1 a:link {
border:none;
}

Why does my table border show up in Firefox and Chrome but not Internet Explorer?

I have some basic CSS on a table and I cannot get a border to display in IE6, IE7, or IE8. The border shows up in Chrome and Firefox. Here's the CSS:
#infoTable { width:500px;
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
border-width:thin !important;
border-style:solid !important; }
#infoTable td { max-width:150px;
padding-left:5px;
padding-right:5px;
font-size: 10px;
padding-bottom:15px;
border-collapse:collapse;
border-width:thin !important;
border-style:solid !important; }
In my multiple attempts to get this to work, I added the !important tags to try to get it to work. Any help is appreciated.
Thanks,
Eric R.
use of border-color property
Provide a border-color as well.
Edit:
Though, to be honest, I placed a table with the same styles as you provided in a plain HTML file, and a faint gray border showed up just fine in IE7.