mirror/86box.github.io
1
0
Fork 0
mirror of https://github.com/86Box/86box.github.io.git synced 2026-02-22 01:25:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improvements to IE6 CSS

Browse Source
This commit is contained in:
RichardG867
2021-12-04 10:50:10 -03:00
parent 892ed82c9d
commit f477d5d4e2
4 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/footer.html
View File

@@ -1,4 +1,4 @@
<footer> <footer>
<div id="footer">86Box is maintained by <a href="https://github.com/OBattler">OBattler</a> and <a href="https://github.com/orgs/86Box/people">the 86Box developers</a>. Website developed by <a href="https://github.com/foxlet">Foxlet</a><span id="reduced"> with retro-reduced version by <a href="https://github.com/richardg867">richardg867</a></span>.</div> 86Box is maintained by <a href="https://github.com/OBattler">OBattler</a> and <a href="https://github.com/orgs/86Box/people">the 86Box developers</a>. Website developed by <a href="https://github.com/foxlet">Foxlet</a><span id="reduced"> with retro-reduced version by <a href="https://github.com/richardg867">richardg867</a></span>.
</footer> </footer>
</body></html> </body></html>

15
assets/css/style-reduced.css
View File

@@ -24,10 +24,17 @@ a.navlink {
font-size: 15pt; font-size: 15pt;
margin: 6pt; margin: 6pt;
} }
header, nav { /* N/A on IE6 */ nav { /* requires JS on IE6 */
padding-bottom: 20pt; display: table-cell;
height: 70px;
vertical-align: middle;
} }
div#footer { main { /* requires JS on IE6 */
display: block;
padding: 5pt 0pt;
}
footer { /* requires JS on IE6 */
display: block;
background-color: #2b496f; background-color: #2b496f;
text-align: center; text-align: center;
color: #8c9dbb; color: #8c9dbb;
@@ -68,7 +75,7 @@ div#socialnew {
img.heading, img.image { img.heading, img.image {
text-align: center; text-align: center;
max-width: 100%; /* N/A on IE6 */ max-width: 100%; /* N/A on IE6 */
width: expression((getNaturalWidth(this) >= (document.body.clientWidth - 16)) ? "100%" : "auto"); width: expression((getNaturalWidth(this) >= (document.body.clientWidth - 16)) ? "100%" : "auto"); /* requires JS */
display: block; display: block;
margin-top: 10pt; margin-top: 10pt;
margin-bottom: 5pt; margin-bottom: 5pt;

BIN
assets/images/blank.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 B

29
assets/js/style-reduced.js
View File

@@ -1,9 +1,12 @@
var imgCache = {}; /* Helper script for the retro-reduced stylesheet. */
/* Get an image's real width. Used by the auto-sizing CSS expression. */
var imgCache = {};
function getNaturalWidth(img) { function getNaturalWidth(img) {
if (img.naturalWidth) { if (img.naturalWidth) {
return img.naturalWidth; return img.naturalWidth;
} else { } else {
/* Cache images through src to avoid memory waste. */
var img2 = imgCache[img.src]; var img2 = imgCache[img.src];
if (!img2) { if (!img2) {
img2 = new Image(); img2 = new Image();
@@ -13,3 +16,27 @@ function getNaturalWidth(img) {
return img2.width; return img2.width;
} }
} }
/* Allow HTML5 elements to be styled. */
document.createElement('nav');
document.createElement('main');
document.createElement('footer');
window.onload = function() {
/* Make the logo transparent on IE6. Doing this on more
images interferes with the auto-sizing CSS expression. */
if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent)) {
for (var i = 0; i < Math.min(2, document.images.length); i++) {
var img = document.images[i];
img.style.paddingRight = 0; /* padding counts as space for AlphaImageLoader so swap it for margin */
var oldsrc = img.src;
var oldw = img.clientWidth;
var oldh = img.clientHeight;
img.src = '/assets/images/blank.gif';
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldsrc + "', sizingMethod='scale')";
img.style.width = oldw + 'px';
img.style.height = oldh + 'px';
img.style.marginRight = '20pt';
}
}
};