On opera browser, I get an issue about a table that I would like to center and in which the text should be aligned on left.
I have the CSS:
div.center table{
text-align: left;
margin: 0 auto;
}
td.code_box{
font-family: monospace;
background-color: #333333;
border: 1px ridge;
height: 50px;
color: #CCCCCC;
padding: 5px;
}
and the HTML code snippet:
<div class="center">
<table><tr><td class="code_box">
<font color="#ffff00"># Inputs</font><br>
NET <font color="#c00000">"l"</font> LOC = <font color="#c00000">"T9"</font> ;<br>
NET <font color="#c00000">"b"</font> LOC = <font color="#c00000">"T10"</font> ;<br>
NET <font color="#c00000">"h"</font> LOC = <font color="#c00000">"V9"</font> ;<br>
NET <font color="#c00000">"rst"</font> LOC = <font color="#c00000">"M8"</font> ;<br>
<br>
<font color="#ffff00"># Outputs</font><br>
NET <font color="#c00000">"s0"</font> LOC = <font color="#c00000">"U16"</font> ;<br>
NET <font color="#c00000">"s1"</font> LOC = <font color="#c00000">"V16"</font> ;<br>
NET <font color="#c00000">"s2"</font> LOC = <font color="#c00000">"U15"</font> ;<br>
</td>
</tr>
</table>
</div>
Unfortunately, this doesn't work on Opera browser, the table is aligned on the left and is not centered. What might be wrong?
Update 1
I have the following text file:
# Inputs
NET "l" LOC = "T9" ;
NET "b" LOC = "T10" ;
NET "h" LOC = "V9" ;
NET "rst" LOC = "M8" ;
# Outputs
NET "s0" LOC = "U16" ;
NET "s1" LOC = "V16" ;
NET "s2" LOC = "U15" ;
I want to convert this small text file into HTML code. For this, I use under vim the command ":TOhtml" which generates this code snippet:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>~/robot.ucf.html</title>
<meta name="Generator" content="Vim/7.3">
<meta name="plugin-version" content="vim7.3_v6">
<meta name="syntax" content="conf">
<meta name="settings" content="no_pre">
</head>
<body bgcolor="#ffffff" text="#000000">
<font face="monospace">
<font color="#0000c0"># Inputs</font><br>
NET <font color="#c00000">"l"</font> LOC = <font color="#c00000">"T9"</font> ;<br>
NET <font color="#c00000">"b"</font> LOC = <font color="#c00000">"T10"</font> ;<br>
NET <font color="#c00000">"h"</font> LOC = <font color="#c00000">"V9"</font> ;<br>
NET <font color="#c00000">"rst"</font> LOC = <font color="#c00000">"M8"</font> ;<br>
<br>
<font color="#0000c0"># Outputs</font><br>
NET <font color="#c00000">"s0"</font> LOC = <font color="#c00000">"U16"</font> ;<br>
NET <font color="#c00000">"s1"</font> LOC = <font color="#c00000">"V16"</font> ;<br>
NET <font color="#c00000">"s2"</font> LOC = <font color="#c00000">"U15"</font> ;<br>
</font>
</body>
</html>
Now I would like to take only the HTML text content content above and insert it into a table, i.e this part:
<font color="#0000c0"># Inputs</font><br>
NET <font color="#c00000">"l"</font> LOC = <font color="#c00000">"T9"</font> ;<br>
NET <font color="#c00000">"b"</font> LOC = <font color="#c00000">"T10"</font> ;<br>
NET <font color="#c00000">"h"</font> LOC = <font color="#c00000">"V9"</font> ;<br>
NET <font color="#c00000">"rst"</font> LOC = <font color="#c00000">"M8"</font> ;<br>
<br>
<font color="#0000c0"># Outputs</font><br>
NET <font color="#c00000">"s0"</font> LOC = <font color="#c00000">"U16"</font> ;<br>
NET <font color="#c00000">"s1"</font> LOC = <font color="#c00000">"V16"</font> ;<br>
NET <font color="#c00000">"s2"</font> LOC = <font color="#c00000">"U15"</font> ;<br>
</font>
by doing:
<div class="center">
<table><tr><td class="code_box">
...
</td>
</tr>
</table>
</div>
I have tried by adding text-align: left; to code_box CSS:
td.code_box{
font-family: monospace;
text-align: left;
background-color: #333333;
border: 1px ridge;
height: 50px;
color: #CCCCCC;
padding: 5px;
}
but this doesn't seem to work.
Is there a better solution to center this table (with a div parent ?) and in the same time, left align the content of <td class="code_box">.
Update 2
You can see my issue on this page.
As you can notice, the code box has text-aligned on left but the div is not centered horizontally.
I have used this CSS rule for the div:
div.center-left table{ text-align: left; margin: 0 auto; }
and set for HTML:
<div class="center-left">
<table><tr><td class="code_box">
<font color="#ffff00"># Inputs</font><br>
NET <font color="#c00000">"l"</font> LOC = <font color="#c00000">"T9"</font> ;<br>
NET <font color="#c00000">"b"</font> LOC = <font color="#c00000">"T10"</font> ;<br>
NET <font color="#c00000">"h"</font> LOC = <font color="#c00000">"V9"</font> ;<br>
NET <font color="#c00000">"rst"</font> LOC = <font color="#c00000">"M8"</font> ;<br>
<br>
<font color="#ffff00"># Outputs</font><br>
NET <font color="#c00000">"s0"</font> LOC = <font color="#c00000">"U16"</font> ;<br>
NET <font color="#c00000">"s1"</font> LOC = <font color="#c00000">"V16"</font> ;<br>
NET <font color="#c00000">"s2"</font> LOC = <font color="#c00000">"U15"</font> ;<br>
</td>
</tr>
</table>
</div>
Now, I realise this issue also appears on Firefox, not only on Opera. How can I solve this problem?