I have 'inherited' a website and I am among other things to maintain it. However, recently I noticed that while the site behaves reasonably in most of the major browsers (FF; IE 7,8,9; Chrome), in Opera it is rendered completely wrong.
After some investigation, I found the issue is that <table>s in Opera are not shown, in particular, their computed style contains this: display: none;. This struck me as odd, as I have explicitly included in the style for this element display: table; which is also the default, and in the stylesheets linked, I can't see anywhere display: none; that could cause the table to not be displayed.
All other mentioned browsers had display: table; in the computed style for the <table> elements, even without it being explicit in the stylesheet.
An example of this is provided below. Tested under Ubuntu 11.10 and 12.04 64 bit. It has been confirmed that under Windows the effect is the same (FF, Chrome and IE show tables; Opera doesn't).
Tested with and without an HTTP server (http://localhost/test1.html and file:///var/www/test1.html) and there is no difference in either browsers.
I am in little doubt that the problem is on my side, but I'm out of ideas and any help would be appreciated. Apologies if this is a trivial question or a misunderstanding of HTML or CSS on my side (or the original developer), I am mostly a PHP programmer.
The shortest possible example of the behavior I experienced is this:
test1.html
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="menuItem">
<table class="menuItem"><tr bgcolor="black"><td>ASD</td></tr>
</table>
</div>
</body>
</html>
test.css
.menuItem {
content:"";
border: 2px green;
width: inherit;
height: 50px;
background-color: green;
}
table.menuItem {
content:"";
margin-left: auto;
margin-right: auto;
vertical-align: middle;
height: 50px;
text-align: center;
display: table;
}
I've tried it myself and if you remove the content: "" from both style declarations, everything works.