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.
Related
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.
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;
}
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
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.
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.