Eric
Reputation: 251
IE rendering HTML differently than Firefox, Chrome, and iOS
I have been developing a new skin for mediawiki that follows the CSS and layout of the Brigham Young University webpage https://www.byu.edu
After working on it for a month, making many small changes, it was ready to show people. My coworker tried to view the page on Internet Explorer and immediately all of the horizontal lists that were auto populated in the page became vertical lists.
The site is at https://caedm.et.byu.edu/wiki
Here is the code for the skin, Since I was using the code provided from the university, I imagine that it has to be one of my changes that has caused the problem.
The site appears to function and render properly when browsed from an iPad, from and android cell phone, from Firefox (both in linux and windows) and from Chromium, but it fails stupendously in IE9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" class="no-js">
<head profile="http://gmpg.org/xfn/11">
<title><?php $this->html('title'); ?> – <?php echo($wgSitename); ?></title>
<meta property="og:title" value="<?php $this->html('title'); ?>">
<meta property="og:site_name" content="<?php echo($wgSitename); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="<?php echo($description); ?>"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<?php if ($this->data['content_actions']['edit']) { ?>
<link rel="alternate" type="application/x-wiki" title="Edit" href="<?php echo($this->data['content_actions']['edit']['href']); ?>" />
<?php } ?>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="<?php $this->text('scriptpath'); ?>/opensearch_desc.php" title="<?php echo($wgSitename); ?>" />
<link rel="copyright" href="<?php $this->text('scriptpath'); ?>/index.php/Copyright_Notice" />
<link rel="alternate" type="application/atom+xml" title="<?php echo($wgSitename); ?> Atom feed" href="<?php $this->text('scriptpath'); ?>/index.php?title=Special:RecentChanges&feed=atom" />
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/slider.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/calendar.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/news.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/socialmedia.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="byuskin/template/js/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/wiki/skins/byuskin/template/js/libs/modernizr-2.0-basic.min.js"></script>
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/style.css" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/shared.css" media="screen" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/commonPrint.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<?php print Skin::makeGlobalVariablesScript( $this->data ); ?>
<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"><!-- wikibits js --></script>
</head>
<body class="single single-post">
<header id="main-header">
<div id="header-top" class="wrapper">
<div id="logo">
<a href="http://www.byu.edu/" class="byu"><img src="/wiki/skins/byuskin/template/img/byu-logo.png" alt="BYU Logo" usemap="#byulogo" /></a>
<map name="byulogo">
<area shape="rect" href="http://www.byu.edu" coords="0,1,63,16" />
<area shape="rect" href="http://beta.et.byu.net" coords="70,0,363,16" />
</map>
</div>
<a href="http://ssldev.et.byu.edu/wiki/index.php5" id="site-name">CAEDM</a>
<div id="search-container">
<? if ( !isset( $_COOKIE['CMSUsername']) || $_COOKIE['CMSUsername']=="" || $_COOKIE['CMSPassword']=="" || !isset( $_COOKIE['CMSPassword'] )) {?>
<a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogin&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology" class="button">CAEDM Login</a>
<? } else { ?>
<a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogout&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology" class="button"> Logout </a>
<script>
var IDLE_TIMEOUT = 60*60*4; //seconds->4 hours
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
alert("Time expired!");
document.location.href = "https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogout&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology";
}
}
</script>
<? } ?>
<!-- ENTER YOUR SEARCH URL under action -->
<form action="<?php $this->text('searchaction') ?>" id="searchform">
<input type="text" name="search" id="search" placeholder="Search CAEDM Help Pages" <?php if( isset( $this->data['search'] ) ) { ?>
value="<?php $this->text('search') ?>"
<?php } ?> />
<input type="image" src="/wiki/skins/byuskin/template/img/search-button.png" alt="Search" id="search-button" value="<?php $this->msg('searchbutton') ?>"/>
</form>
</div>
<nav id="secondary-nav" class="no-js">
<ul>
<li class="nochild"><a href="https://my.byu.edu">MyBYU</a></li>
<li class="nochild"><a href="https://learningsuite.byu.edu">Learning Suite</a></li>
<li class="nochild"><a href="http://ssldev.et.byu.edu/wiki/index.php5?title=Contact_Us">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
<nav id="primary-nav" class="no-js">
<ul>
<li><a href="">Accounts</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Accounts'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Accounts Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=An_Introduction_to_CAEDM_Video"><img src="/wiki/images/thumb/f/fd/CAEDM_Intro.png/320px-CAEDM_Intro.png" width="320" height="228"></a>
<p>CAEDM may be new to you, but there are many ways that you can learn how to maximize your experience with CAEDM.</p>
</div>
</div>
</li>
<li><a href="">Remote Computing</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Remote Computing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%;margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Remote Computing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Using_Your_Computer_with_CAEDM_Video"><img src="/wiki/images/thumb/8/82/CAEDM_wYours.png/320px-CAEDM_wYours.png" width="320" height="228"></a>
<p>CAEDM offers a wide variety of resources that can all be used no matter where you happen to be. From home, work, and even from your phone, your CAEDM needs can be fulfilled.</p>
</div>
</div>
</li>
<li> <a href="">Files</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Files'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Files Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Installing_the_CAEDM_Printer_Video"><img src="/wiki/images/Accessing_files.png" width="320" height="228"></a>
<p>CAEDM provides file access anywhere on campus, and from home.</p>
</div>
</div>
</li>
<li> <a href="">Printing</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Printing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Printing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Installing_the_CAEDM_Printer_Video"><img src="/wiki/images/c/c2/Printer_menu.jpg"></a>
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> <a href="">Labs and Software</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Labs'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Labs Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Using_a_CAEDM_Computer_Video"><img src="/wiki/images/b/b6/Lab_and_software_menu.jpg"></a>
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> <a href="">Groups</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Groups'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Groups Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=CAEDM_Groups_Video"><img src="/wiki/images/thumb/4/43/Groups.png/320px-Groups.png" height="228" width="320"></a>
<p>CAEDM provides many group collaboration resources.</p>
</div>
</div>
</li>
I only included the beginning, as I don't want people to have to debug anything, but is there a common problem with how IE interprets unordered lists, that wouldn't be detected in any other browser?
What are the ways to fix this problem?
Update: section from CSS:
I think that this is the most helpful part, but there could be other things that need to be put in:
ul, ol { margin-left: 1.5em; display: inline;}
ol { list-style-type:decimal; margin-left:2em;}
ol ol { list-style-type: lower-alpha }
ol ol ol { list-style-type: lower-roman }
ol ol ol ol { list-style-type: decimal }
ol ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol ol { list-style-type: lower-roman }
ul { list-style-type: none; margin-left:2em;}
ul ul { list-style-type: none }
ul ul ul { list-style-type: none }
ul ul ul ul { list-style-type: none }
ul ul ul ul ul { list-style-type: none }
ul ul ul ul ul ul { list-style-type: none }
ul ul { margin-top:.25em; margin-bottom:.25em;}
nav ul, nav ul ul { list-style:none}
nav ul, nav li { margin:0;}
dt { font-weight: bold }
dd { padding: 0 0 .75em 1em }
Upvotes: 0
Views: 769
Answers (2)
Eric
Reputation: 251
In the end, The answer was a combination of everything that all of you have said. adding display: inline was important, but it caused a lot of problems for other things in other browsers. So I Am going to accept Gothematic's answer as the correct one, because in the end I will have to use it heavily to fix the rendering in IE, but also a lot of thanks to Space Beers for the Inline block.
Upvotes: 0
Stinodotbe
Reputation: 402
You can define another css file with fixes. Include next code in your head-tags:
<!--[if lt IE 9]>
<link href=".." />
<![endif]-->
<!--[if lte IE 8]>
<link href=".." />
<![endif]-->
<!--[if lte IE 7]>
<link href=".." />
<![endif]-->
<!--[if lte IE 6]>
<link href=".." />
<![endif]-->
Where lt = lower than and lte = lower than or equal to. However this doesn't work for IE10 anymore. There you can use next code in your css:
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
Upvotes: 2
Related Questions
- CSS different output in mozilla firefox and internet explorer
- Different output for IE and the rest
- Simple html page renders differently in Firefox and IE. How to fix it?
- HTML/CSS Renders Differently in IE
- Elements rendering differently in Chrome/Firefox and Internet Explorer
- CSS Internet Explorer Browser Differences
- CSS rendered differently in different browsers
- .php vs .html . Why is IE rendering them differently?
- why does my CSS + HTML web pages display differently in IE & FireFox?
- HTML page is appearing different in Mozilla Firefox and Internet Explorer