CodeIgniter Forums
Problem using CSS tables and CI - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Problem using CSS tables and CI (/showthread.php?tid=47964)

Problem using CSS tables and CI - El Forum - 12-29-2011

[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">
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
&lt;title&gt;Portal&lt;/title&gt;

&lt;link href="css/mystyles.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;

<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>
&lt;/body&gt;
&lt;/html&gt;

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

Problem using CSS tables and CI - El Forum - 01-25-2012

[eluser]jjDeveloper[/eluser]
You will have to load the URL helper in your controller but this should work.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt; 
&lt;title&gt;Portal&lt;/title&gt;

&lt;link href="&lt;?=base_url() . "css/mystyles.css"; ?&gt; " rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt; 
&lt;body&gt; 

<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>
&lt;/body&gt; 
&lt;/html&gt; 


Problem using CSS tables and CI - El Forum - 01-25-2012

[eluser]troy_mccormick[/eluser]
Also, FYI: You have id="cell" multiple times. Each id on a page should be unique...you should probably be using classes for those...

Problem using CSS tables and CI - El Forum - 01-25-2012

[eluser]Aken[/eluser]
jjDeveloper, you keep giving people bad or wrong advice. This person solved their problem and you're still offering suggestions. Some of your solutions even have nothing to do with the problems a user is having. Spreading bad code habits is far from beneficial - please consider your responses before contributing to threads.

Problem using CSS tables and CI - El Forum - 01-25-2012

[eluser]InsiteFX[/eluser]
If you are going to use the url_helper you should autoload it
not put it in the controller this way it is site wide!

Also you do not need to use the base_url in the html for all your links
This is all you need to add!
Code:
&lt;head&gt;
    &lt;base href="&lt;?php echo base_url();?&gt;" /&gt;
&lt;/head&gt;