URL: http://www.nhk.or.jp/sp/
Browser / Version: Firefox 39.0
Operating System: Android
Problem type: Layout is messed up
Steps to Reproduce
- Navigate to: http://www.nhk.or.jp/sp/
Expected Behavior:
Receive a nice layout for the mobile site.
Actual Behavior:
The site is using old deprecated CSS. There was a will to make it compatible across browsers.
It would benefit to switch a more modern syntax of flexbox.
You could use http://hallvord.com/temp/moz/cssfixme.php
Some examples:
Before:
div.sec_head_wrap {
display: -webkit-box;
display: -moz-box;
display: box;
box-align:stretch;
-webkit-box-align:stretch;
-moz-box-align:stretch;
margin:0 0 15px 0;
}
div#content h2 {
color: #ffffff;
font-weight: bold;
background:#00a0f2;
font-size:19px;
position:relative;
margin:0 0 0 0;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
padding: 13px 6px;
line-height:30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
min-height:56px;
}
After:
div.sec_head_wrap{
display: -webkit-box;
display: -moz-box;
display: box;
box-align: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
margin: 0 0 15px 0;
display: flex;
align-items: stretch;
}
div#content h2{
color: #ffffff;
font-weight: bold;
background: #00a0f2;
font-size: 19px;
position: relative;
margin: 0 0 0 0;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
padding: 13px 6px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 56px;
flex: 1 auto;
}
country: jp
URL: http://www.nhk.or.jp/sp/
Browser / Version: Firefox 39.0
Operating System: Android
Problem type: Layout is messed up
Steps to Reproduce
Expected Behavior:
Receive a nice layout for the mobile site.
Actual Behavior:
The site is using old deprecated CSS. There was a will to make it compatible across browsers.
It would benefit to switch a more modern syntax of flexbox.
You could use http://hallvord.com/temp/moz/cssfixme.php
Some examples:
Before:
After:
country: jp