S
sevans_smd
I also posted this question over on Stack Overflow
(http://stackoverflow.com/questions/...8-standards-mode-results-in-broken-blank-page), but I'll add it here.
Essentially it appears that when I try to set the font-size CSS attribute on
a single element it causes IE8 to render a completely blank page when it's in
IE8 Standards mode. Below is the HTML and CSS used. As you'll note in the
Stack Overflow question, IE's also duplicating a CSS selector which may or
may not be a related issue.
Page Title
[ Log On
]
APP TITLE
/Images/info.png
Offered by: Company
Name
Version: 0.0.0.0
[*]
/Images/Module1.png
Module
[/list]
Welcome to
Application
New Features
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi egestas condimentum laoreet. Curabitur urna elit,
sagittis vel condimentum sit amet, ullamcorper suscipit diam. Suspendisse non
ligula metus, nec ultricies libero. Vestibulum molestie ornare urna, eu
posuere ipsum lacinia nec. Nulla facilisi. Curabitur elit ligula, laoreet nec
vehicula at, ornare sed metus. Suspendisse gravida mattis vulputate. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Integer rutrum erat sed lacus eleifend et dapibus nisi mollis.
Nulla elementum lacus quis mauris pulvinar in accumsan odio malesuada.
Aliquam ultrices, mauris sit amet pharetra euismod, nisi nunc rhoncus est, eu
commodo nunc sem vitae risus. Ut egestas ligula eu elit blandit consequat.
Donec nunc justo, congue non mollis at, porta non massa.
Pellentesque consequat fermentum sapien
at dictum. In pretium varius tellus, vitae blandit sapien cursus quis.
Suspendisse potenti. Sed sollicitudin tempus elit et sodales. Vestibulum
fringilla tempus elit, vitae convallis massa laoreet vel. Nulla facilisi.
Duis dolor leo, lacinia ut ultrices eu, mollis in purus. Donec sagittis, est
id tincidunt pulvinar, magna metus pellentesque nunc, eget tincidunt metus
tellus sollicitudin tortor. Donec quis convallis nibh. In luctus, ipsum non
sodales ornare, mi lectus molestie orci, id dignissim tellus augue at
neque.
Phasellus ut molestie leo. Donec egestas
odio ut felis lacinia ut interdum diam interdum. Fusce at posuere tortor.
Vestibulum cursus elit quis purus porta vitae adipiscing nulla laoreet. Nam
pretium orci a sem volutpat nec rhoncus magna viverra. Aenean non orci
sapien. Nunc hendrerit sollicitudin lorem viverra porta. Pellentesque ac
porttitor elit. Mauris risus sem, dapibus eu convallis vel, posuere in nibh.
Phasellus sit amet tortor neque, aliquam volutpat massa. Sed quam libero,
porttitor a lacinia in, pellentesque in libero. Suspendisse adipiscing
laoreet lacus, eget fringilla felis tristique id. Maecenas lacinia, ante a
vulputate gravida, felis libero hendrerit dolor, non tristique ante massa
vitae leo. Aenean laoreet porta urna ullamcorper facilisis.
Nam a ligula a quam interdum ultricies.
Suspendisse tempor pellentesque augue at sollicitudin. Sed vulputate, erat
mollis fringilla rhoncus, nulla quam ullamcorper lacus, vel molestie metus
ipsum quis eros. Fusce eget turpis tortor, viverra volutpat leo. Vestibulum
in augue in augue fringilla volutpat sed eu purus. Ut varius lacus eget orci
consequat eget tincidunt mi placerat. Donec suscipit suscipit enim, eget
iaculis diam pellentesque in. Cras ac ante et lorem porttitor consectetur.
Maecenas semper posuere magna. Aliquam erat volutpat. Sed at ante feugiat
lectus hendrerit semper et ut elit. Aenean scelerisque fermentum justo, at
blandit risus interdum eget. Donec a nulla pellentesque erat volutpat
gravida. Nunc mattis est ac dolor dapibus viverra. Nulla facilisi.
Donec diam neque, lobortis quis aliquam
nec, fermentum ac quam. Cras porta nisi sed massa pellentesque vitae luctus
erat porttitor. Sed porta elit ac ligula semper eget volutpat purus
adipiscing. Mauris aliquet convallis consectetur. Aliquam vel neque sit amet
odio dapibus feugiat. Morbi vehicula porttitor cursus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut
augue at tellus iaculis fringilla ut at enim. Ut sed lorem nunc. Aliquam ac
accumsan eros. Fusce faucibus, lacus in convallis commodo, turpis nisi
gravida ligula, sit amet semper odio ante sit amet lorem. Integer mollis,
nibh vel malesuada imperdiet, purus justo ullamcorper ipsum, sed volutpat
velit dui eget felis. Quisque sapien ante, dapibus quis malesuada ultrices,
tincidunt id nibh.
CSS:
a, abbr, acronym, address, applet, b, big, caption, center, cite, code, dd,
dfn, div, dl, dt, em, fieldset, font, form, html, i, iframe, img, kbd, label,
legend, li, object, pre, s, samp, small, span, strike, strong, sub, sup,
tbody, td, tfoot, th, thead, tr, tt, u, var {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
}
blockquote, q {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
quotes: none
}
body {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
line-height: 1
width: 100%
background: #efebde
min-width: 600px
}
del {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
text-decoration: line-through
}
h1 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 2em
margin: .8em 0 .2em 0
padding: 0
}
h2 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.8em
margin: .8em 0 .2em 0
padding: 0
}
h3 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.6em
margin: .8em 0 .2em 0
padding: 0
}
h4 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.4em
}
h5 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.2em
}
h6 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1em
}
ins {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
text-decoration: none
}
ol, ul {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
list-style: none
}
p {
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
margin: .4em 0 .8em 0
padding: 0
}
table {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
border-collapse: collapse
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after { content: none }
:focus { outline: 0 }
..bold { font-weight: bold }
..systemFont { font-family: Arial }
..labelled { font-style: italic }
..groovedBorder {
border-color: #adaa9c
border-style: groove
border-width: medium
}
#header, #footer {
clear: both
float: left
width: 100%
}
#header p, #header h1, #header h2 {
padding: .4em 15px 0 15px
margin: 0
}
#header ul {
clear: left
float: left
width: 100%
list-style: none
margin: 10px 0 0 0
padding: 0
}
#header ul li {
display: inline
list-style: none
margin: 0
padding: 0
}
#header ul li a {
background: #eeeeee
display: block
float: left
left: 15px
line-height: 1.3em
margin: 0 0 0 1px
padding: 3px 10px
position: relative
text-align: center
text-decoration: none
}
#header ul li a span { display: block }
#header ul li a:hover { background: #336699 }
#header ul li a.active, #header ul li a.active:hover {
background: black
font-weight: bold
}
#header #logindisplay {
float: right
padding-top: .5em
padding-bottom: .5em
padding-right: 1em
padding-left: 1em
}
#title h1 {
font-family: Arial
font-style: italic
font-size: 175%
text-align: center
margin-top: 1%
}
..col1 {
font-family: Arial
border-color: #adaa9c
border-style: groove
border-width: medium
min-height: 350px
float: left
overflow: hidden
position: relative
padding-top: 0
padding-bottom: 1em
padding-left: 0
padding-right: 0
}
..col1 div.logo { text-align: center }
..col3 {
font-family: Arial
border-color: #adaa9c
border-style: groove
border-width: medium
float: left
overflow: hidden
position: relative
}
#layoutdims {
clear: both
background: #eeeeee
margin: 0
padding: 6px 15px !important
text-align: right
}
#company {
padding-left: 10px
padding-top: 10px
margin: 0
}
#company span {
display: block
padding-left: 1em
}
#version {
padding-right: 1em
padding-top: 1em
text-align: center
}
#menu li {
padding: 6px
border-color: #adaa9c
border-style: groove
border-width: medium
min-width: 108px
}
#menu li a.ciApp {
text-decoration: none
font-size: 112.5%
font-weight: bold
font-family: Arial
color: black
}
#menu li a.ciApp span { vertical-align: top }
..welcomemessage { font-size: 60.95% }
..newFeatures {
overflow-y: scroll
max-height: 300px
}
#newsfeed div .newsLabel {
color: red
font-size: 60.95%
font-style: italic
}
/**************************************************************************************
This statement appears twice in Developer Tools. Disabling one disables
both. Disabling it also causes the page to render. Turning it on and the
page disappears again. If I change the font-size to an even 61%, the page
renders just fine.
**************************************************************************************/
#newsfeed div .newFeatures {
margin-left: 1em
margin-right: 1em
font-size: 60.95%
}
/**************************************************************************************
**************************************************************************************/
..colmask {
clear: both
float: left
position: relative
overflow: hidden
width: 100%
}
..colright, .colmid, .colleft {
float: left
position: relative
width: 100%
}
..col2 {
float: left
overflow: hidden
position: relative
padding-top: 0
padding-bottom: 1em
padding-left: 0
padding-right: 0
}
..threecol .colmid { right: 33% }
..threecol .colleft { right: 34% }
..threecol .col1 {
width: 33%
left: 100%
}
..threecol .col2 {
width: 32%
left: 34%
}
..threecol .col3 {
width: 32%
left: 68.5%
}
(http://stackoverflow.com/questions/...8-standards-mode-results-in-broken-blank-page), but I'll add it here.
Essentially it appears that when I try to set the font-size CSS attribute on
a single element it causes IE8 to render a completely blank page when it's in
IE8 Standards mode. Below is the HTML and CSS used. As you'll note in the
Stack Overflow question, IE's also duplicating a CSS selector which may or
may not be a related issue.
Page Title
[ Log On
]
APP TITLE
/Images/info.png
Offered by: Company
Name
Version: 0.0.0.0
[*]
/Images/Module1.png
Module
[/list]
Welcome to
Application
New Features
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi egestas condimentum laoreet. Curabitur urna elit,
sagittis vel condimentum sit amet, ullamcorper suscipit diam. Suspendisse non
ligula metus, nec ultricies libero. Vestibulum molestie ornare urna, eu
posuere ipsum lacinia nec. Nulla facilisi. Curabitur elit ligula, laoreet nec
vehicula at, ornare sed metus. Suspendisse gravida mattis vulputate. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Integer rutrum erat sed lacus eleifend et dapibus nisi mollis.
Nulla elementum lacus quis mauris pulvinar in accumsan odio malesuada.
Aliquam ultrices, mauris sit amet pharetra euismod, nisi nunc rhoncus est, eu
commodo nunc sem vitae risus. Ut egestas ligula eu elit blandit consequat.
Donec nunc justo, congue non mollis at, porta non massa.
Pellentesque consequat fermentum sapien
at dictum. In pretium varius tellus, vitae blandit sapien cursus quis.
Suspendisse potenti. Sed sollicitudin tempus elit et sodales. Vestibulum
fringilla tempus elit, vitae convallis massa laoreet vel. Nulla facilisi.
Duis dolor leo, lacinia ut ultrices eu, mollis in purus. Donec sagittis, est
id tincidunt pulvinar, magna metus pellentesque nunc, eget tincidunt metus
tellus sollicitudin tortor. Donec quis convallis nibh. In luctus, ipsum non
sodales ornare, mi lectus molestie orci, id dignissim tellus augue at
neque.
Phasellus ut molestie leo. Donec egestas
odio ut felis lacinia ut interdum diam interdum. Fusce at posuere tortor.
Vestibulum cursus elit quis purus porta vitae adipiscing nulla laoreet. Nam
pretium orci a sem volutpat nec rhoncus magna viverra. Aenean non orci
sapien. Nunc hendrerit sollicitudin lorem viverra porta. Pellentesque ac
porttitor elit. Mauris risus sem, dapibus eu convallis vel, posuere in nibh.
Phasellus sit amet tortor neque, aliquam volutpat massa. Sed quam libero,
porttitor a lacinia in, pellentesque in libero. Suspendisse adipiscing
laoreet lacus, eget fringilla felis tristique id. Maecenas lacinia, ante a
vulputate gravida, felis libero hendrerit dolor, non tristique ante massa
vitae leo. Aenean laoreet porta urna ullamcorper facilisis.
Nam a ligula a quam interdum ultricies.
Suspendisse tempor pellentesque augue at sollicitudin. Sed vulputate, erat
mollis fringilla rhoncus, nulla quam ullamcorper lacus, vel molestie metus
ipsum quis eros. Fusce eget turpis tortor, viverra volutpat leo. Vestibulum
in augue in augue fringilla volutpat sed eu purus. Ut varius lacus eget orci
consequat eget tincidunt mi placerat. Donec suscipit suscipit enim, eget
iaculis diam pellentesque in. Cras ac ante et lorem porttitor consectetur.
Maecenas semper posuere magna. Aliquam erat volutpat. Sed at ante feugiat
lectus hendrerit semper et ut elit. Aenean scelerisque fermentum justo, at
blandit risus interdum eget. Donec a nulla pellentesque erat volutpat
gravida. Nunc mattis est ac dolor dapibus viverra. Nulla facilisi.
Donec diam neque, lobortis quis aliquam
nec, fermentum ac quam. Cras porta nisi sed massa pellentesque vitae luctus
erat porttitor. Sed porta elit ac ligula semper eget volutpat purus
adipiscing. Mauris aliquet convallis consectetur. Aliquam vel neque sit amet
odio dapibus feugiat. Morbi vehicula porttitor cursus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut
augue at tellus iaculis fringilla ut at enim. Ut sed lorem nunc. Aliquam ac
accumsan eros. Fusce faucibus, lacus in convallis commodo, turpis nisi
gravida ligula, sit amet semper odio ante sit amet lorem. Integer mollis,
nibh vel malesuada imperdiet, purus justo ullamcorper ipsum, sed volutpat
velit dui eget felis. Quisque sapien ante, dapibus quis malesuada ultrices,
tincidunt id nibh.
CSS:
a, abbr, acronym, address, applet, b, big, caption, center, cite, code, dd,
dfn, div, dl, dt, em, fieldset, font, form, html, i, iframe, img, kbd, label,
legend, li, object, pre, s, samp, small, span, strike, strong, sub, sup,
tbody, td, tfoot, th, thead, tr, tt, u, var {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
}
blockquote, q {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
quotes: none
}
body {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
line-height: 1
width: 100%
background: #efebde
min-width: 600px
}
del {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
text-decoration: line-through
}
h1 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 2em
margin: .8em 0 .2em 0
padding: 0
}
h2 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.8em
margin: .8em 0 .2em 0
padding: 0
}
h3 {
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.6em
margin: .8em 0 .2em 0
padding: 0
}
h4 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.4em
}
h5 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1.2em
}
h6 {
margin: 0
padding: 0
border: 0
outline: 0
vertical-align: baseline
background: transparent
font-size: 1em
}
ins {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
text-decoration: none
}
ol, ul {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
list-style: none
}
p {
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
margin: .4em 0 .8em 0
padding: 0
}
table {
margin: 0
padding: 0
border: 0
outline: 0
font-size: 100%
vertical-align: baseline
background: transparent
border-collapse: collapse
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after { content: none }
:focus { outline: 0 }
..bold { font-weight: bold }
..systemFont { font-family: Arial }
..labelled { font-style: italic }
..groovedBorder {
border-color: #adaa9c
border-style: groove
border-width: medium
}
#header, #footer {
clear: both
float: left
width: 100%
}
#header p, #header h1, #header h2 {
padding: .4em 15px 0 15px
margin: 0
}
#header ul {
clear: left
float: left
width: 100%
list-style: none
margin: 10px 0 0 0
padding: 0
}
#header ul li {
display: inline
list-style: none
margin: 0
padding: 0
}
#header ul li a {
background: #eeeeee
display: block
float: left
left: 15px
line-height: 1.3em
margin: 0 0 0 1px
padding: 3px 10px
position: relative
text-align: center
text-decoration: none
}
#header ul li a span { display: block }
#header ul li a:hover { background: #336699 }
#header ul li a.active, #header ul li a.active:hover {
background: black
font-weight: bold
}
#header #logindisplay {
float: right
padding-top: .5em
padding-bottom: .5em
padding-right: 1em
padding-left: 1em
}
#title h1 {
font-family: Arial
font-style: italic
font-size: 175%
text-align: center
margin-top: 1%
}
..col1 {
font-family: Arial
border-color: #adaa9c
border-style: groove
border-width: medium
min-height: 350px
float: left
overflow: hidden
position: relative
padding-top: 0
padding-bottom: 1em
padding-left: 0
padding-right: 0
}
..col1 div.logo { text-align: center }
..col3 {
font-family: Arial
border-color: #adaa9c
border-style: groove
border-width: medium
float: left
overflow: hidden
position: relative
}
#layoutdims {
clear: both
background: #eeeeee
margin: 0
padding: 6px 15px !important
text-align: right
}
#company {
padding-left: 10px
padding-top: 10px
margin: 0
}
#company span {
display: block
padding-left: 1em
}
#version {
padding-right: 1em
padding-top: 1em
text-align: center
}
#menu li {
padding: 6px
border-color: #adaa9c
border-style: groove
border-width: medium
min-width: 108px
}
#menu li a.ciApp {
text-decoration: none
font-size: 112.5%
font-weight: bold
font-family: Arial
color: black
}
#menu li a.ciApp span { vertical-align: top }
..welcomemessage { font-size: 60.95% }
..newFeatures {
overflow-y: scroll
max-height: 300px
}
#newsfeed div .newsLabel {
color: red
font-size: 60.95%
font-style: italic
}
/**************************************************************************************
This statement appears twice in Developer Tools. Disabling one disables
both. Disabling it also causes the page to render. Turning it on and the
page disappears again. If I change the font-size to an even 61%, the page
renders just fine.
**************************************************************************************/
#newsfeed div .newFeatures {
margin-left: 1em
margin-right: 1em
font-size: 60.95%
}
/**************************************************************************************
**************************************************************************************/
..colmask {
clear: both
float: left
position: relative
overflow: hidden
width: 100%
}
..colright, .colmid, .colleft {
float: left
position: relative
width: 100%
}
..col2 {
float: left
overflow: hidden
position: relative
padding-top: 0
padding-bottom: 1em
padding-left: 0
padding-right: 0
}
..threecol .colmid { right: 33% }
..threecol .colleft { right: 34% }
..threecol .col1 {
width: 33%
left: 100%
}
..threecol .col2 {
width: 32%
left: 34%
}
..threecol .col3 {
width: 32%
left: 68.5%
}