Search code examples
internet-explorerfirefoxrendering

Inconsistent rendering in Explorer and Firefox

The following code renders differently in Firefox and Internet Explorer. Is there any good reasons for it?

The attempt here is to have some equally sized coloured boxes with styled links inside them. Presently the text links are working as they should with Firefox, but Explorer decides that they should be outside the textbox. The reason for the surrounding box is that they alter colour on hover, making the hyperlinks more visible.

Thank you for comments. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style>
.menu {
    width:100%;
    height:100%;
    margin-top:20pt
    }
.menubuttons {
    left:0%;
    height:100%;
    padding-top:20%;
    display:inline;
    position:static;
    top:20pt;
    width:100%;
    margin:0 0 0 20pt;
    }
#menubutton {
    border-radius:16px;
    background:lightblue;
    color: #000066;
    position:relative;
    height:15%;
    display:inline;
    width:60pt;
    padding:10pt 5pt 10pt 5pt;
    margin:3pt 0 3pt 3pt;
    }
#menubutton p {
    margin:0;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display:inline;
    position:static;
    }
</style>
</head>
<body>
<div class="menu">
  <div class="menubuttons">
    <a id="menubutton" href=""><p>Link one</p></a>
    <a id="menubutton" href=""><p>Link two</p></a>
    <a id="menubutton" href=""><p>Link three</p></a>
    <a id="menubutton" href=""><p>Link four</p></a>
    <a id="menubutton" href=""><p>Link five</p></a>
  </div>
</div>
</body></html>
Solution

  • I try to test your code with the IE 11, Firefox, and Google Chrome browsers.

    I noticed that transform: translate property in #menubutton p class causing this issue.

    If you comment on it then you can see the text properly.

    Modified code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style>
.menu {
    width:100%;
    height:100%;
    margin-top:20pt
    }
.menubuttons {
    left:0%;
    height:100%;
    padding-top:20%;
    display:inline;
    position:static;
    top:20pt;
    width:100%;
    margin:0 0 0 20pt;
    }
#menubutton {
    border-radius:16px;
    background:lightblue;
    color: #000066;
    position:relative;
    height:15%;
    display:inline;
    width:60pt;
    padding:10pt 5pt 10pt 5pt;
    margin:3pt 0 3pt 3pt;
    }
#menubutton p {
    margin:0;
    top:50%;
    left:50%;
    /*-ms-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
    display:inline;
    position:static;
    }
</style>
</head>
<body>
<div class="menu">
  <div class="menubuttons">
    <a id="menubutton" href=""><p>Link one</p></a>
    <a id="menubutton" href=""><p>Link two</p></a>
    <a id="menubutton" href=""><p>Link three</p></a>
    <a id="menubutton" href=""><p>Link four</p></a>
    <a id="menubutton" href=""><p>Link five</p></a>
  </div>
</div>
</body></html>

    Output in IE 11 browser:

    enter image description here