Site Navigation

$ADD PAGE NAVIGATION$ L1

$ADD PAGE NAVIGATION$ L2

$ADD PAGE NAVIGATION$ L2

$ADD PAGE NAVIGATION$ L2

$ADD PAGE NAVIGATION$ L2

$ADD PAGE NAVIGATION$ L2

Browser Engine Rendering Differences


2/22/2019

Chrome renders <table border="#" style="color:#######"> differently than Firefox, IE, and Edge. In other engine, this will also change the color of the table border with a few quirks. Chrome doesn't change. The two talbes to the right render Identically in Chrome but not in any of the other browsers listed above.

<table border="25" style="width: 100%; background-color: rgb(100,100,150); color: rgb(255,255,65)">
<tr>
<td> STUFF </td>
</tr>
</table>
<table border="25" style="width: 100%; background-color: rgb(100,100,150)">
<tr>
<td style="color: rgb(255,255,65)"> STUFF </td>
</tr>
</table>

2/26/2019 & 4/19/2019

Internet Explorer and Edge cannot render partially transparent <div>s using rgb, they require the full syntax rgba and a fallback rgb, this possibly affects more elements too. The lower <div> on the right has the same inner color as the one above it, just at 50% transparency. Chrome and Firefox handle this just fine but Edge and IE both ignore the 0.5 and treat it as if any number in that position is a zero, making it invisible.

<div style="width:100%;height:90%;background-color:rgb(0,0,0);margin:auto;color:rgb(255,255,255)">

<div style="width:100%;height:90%;background-color:rgb(255,0,150);margin:auto">

<div style="width:100%;height:90%;background-color:rgb(0,0,0);margin:auto;color:rgb(255,255,255)">

<div style="width:100%;height:90%;background-color:rgb(255,0,150,0.5);margin:auto">

<div style="width:100%;height:90%;background-color:rgb(0,0,0);margin:auto;color:rgb(255,255,255)">

<div style="width:100%;height:90%;background-color:rgba(255,0,150,0.5);margin:auto">



Assignment