[eluser]Unknown[/eluser]
I am playing around with the CSS
display:table;
display:table-row;
etc..
property to see how CSS tables are vs html tables.
I can use these successfully with CI and view them in firefox, and Opera but not IE 9.
BUT here's the funny thing:
When I
don't use CI, the table is displayed propery through internet explorer meaning, I'll use a text editor to code everything and BAM! CSS tables.
When I use CI, they do not. I've even put the CSS code in my view as an internal style sheet. The other CSS properties come through such as the background colour and font colour and what not but not CSS tables.
display:table
display:table-row
and any display property for CSS tables don't come through.
The cells just end up one on top of the other.
Task_view.php code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Portal</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="row">
<div id="cell">task id</div>
<div id="cell">task</div>
<div id="cell">for</div>
<div id="cell">start date</div>
<div id="cell">due date</div>
<div id="cell">status</div>
<div id="cell">request from</div>
<div id="cell">completed on</div>
</div>
</div>
</div>
</body>
</html>
In my "mystyles.css" file the code is:
Code:
body
{
background-color:#C5B470;
}
#wrapper
{
margin-left:auto;
margin-right:auto;
width:800px;
}
#container
{
display:table;
}
#row
{
display:table-row;
}
#cell
{
display:table-cell;
text-align:left;
width:100px;
color:#F00;
}
h1, h2
{
font-family:Verdana, Geneva, sans-serif;
color:#834C24;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#menu
{
height:50px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#menu ul
{
list-style-type:none;
list-style-position:outside;
padding: 0px;
margin: 0px;
}
#menu li
{
display:block;
float:left;
padding:0px;
margin:0px;
border:5px;
}
#menu a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFF;
background-color:#003366;
text-align:center;
padding:7px 10px;
text-decoration:none;
}
#menu a:hover,a:active
{
background-color:#BA6222;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#2C0E03;
}
Could someone please try the code out with CI and IE and then try it without CI.
It's driving me batty!
Thanks