"Forum Layout" with divs not tables

HTML & CSS
1

I’ve been playing around with various combinations of floats and display: blocks to try and get this to work. What I’m trying to do is within the pm_thread div have a series of divs, in each one of them divs will be two columns, the left hand one will be the poster details and the right hand one will be the message. Can someone please point me in the right direction?

EDIT: I can’t stop it from sitting ontop of the footer

The unusual order of some of the divs is to try and keep the main content near the top of the markup (trying to keep users using screen readers in mind)

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head><body><pre><pre class="xdebug-var-dump" dir="ltr"><small>int</small> <font color="#4e9a06">1</font>
</pre></pre>


    <title>Universal Empires</title>
    <link rel="stylesheet" href="Universal%20Empires_files/default.css">
    <script type="text/javascript" src="Universal%20Empires_files/tinymce.js"></script>
    <script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script>
    <script type="text/javascript" src="Universal%20Empires_files/custom.js"></script>
    
    



<div id="content">

    <div id="header">
        <div id="status_bar">
        </div>    
        <br>
        <a href="http://localhost/universal_empires/index">Home</a>
        <a href="http://localhost/universal_empires/game">Game</a>
        <a href="http://localhost/universal_empires/forum">Forum</a>
        <a href="http://localhost/universal_empires/blog">Blog</a>
        <a href="http://localhost/universal_empires/wiki">Wiki</a>
                    <a href="http://localhost/universal_empires/bugs">Bugs</a>
            <a href="http://localhost/universal_empires/support">Support</a>
            <a href="http://localhost/universal_empires/Chat">Chat</a>
            <a href="http://localhost/universal_empires/admin">Admin</a>
            <a href="http://localhost/universal_empires/login/logout">Logout</a>    
        SpacePhoenix    </div>
    <div id="page_contnet">
    <div id="crumb_trail">

    </div>    
                <div id="nav_tabs">
</div>


<h1>Test Message 1</h1>

<p>Started By: SpacePhoenix On 2014-06-25 20:40:52</p>


<div id="pm_thread">

    
    <div class="pm_post">
        <div class="pm_poster">
            <p>SpacePhoenix</p><p>2014-06-25 20:40:52</p>        </div>
        <div class="pm_post_message">
            <p>This is just a test! That's all it is!</p>        </div>
    </div>
    
        
    <div class="pm_post">
        <div class="pm_poster">
            <p>Toaster</p><p>2014-06-25 20:41:56</p>        </div>
        <div class="pm_post_message">
            <p>First Reply!</p>        </div>
    </div>
    
        
    <div class="pm_post">
        <div class="pm_poster">
            <p>SpacePhoenix</p><p>2014-06-26 07:20:16</p>        </div>
        <div class="pm_post_message">
            <p>Second Reply!</p>        </div>
    </div>
    
        
    <div class="pm_post">
        <div class="pm_poster">
            <p>SpacePhoenix</p><p>2014-06-26 07:26:43</p>        </div>
        <div class="pm_post_message">
            <p>Third Reply!</p>        </div>
    </div>
    
        
    <div class="pm_post">
        <div class="pm_poster">
            <p>Toaster</p><p>2014-06-26 07:27:12</p>        </div>
        <div class="pm_post_message">
            <p>Fourth Reply!</p>        </div>
    </div>
    
    </div></div>
<div id="footer">
    <p>(C) SpacePhoenix Industries 2014</p>
    <p>Powered By SpaceCoreCCMS v0.01</p>
    
</div>
</div><!-- end content div -->
<div id="sidebar">
    <div id="site_logo">
        <a href="http://localhost/universal_empires" class="image" title="Goto the Home Page">
            <img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85">
        </a>
        <p>Universal Empires</p>
    </div>
    <div id="round_info">
            
        <div id="sys_time">
            <p>
                February 05, 2015<br>09:21:29 UTC            </p>
        </div>
        <div id="round_name">
            <p>
                <b>Has To Start Somewhere!</b>Day 1
            </p>
        </div>
    </div>
    <div id="navigation">
    
        <ul id="nav">
            <li><a href="http://localhost/">Home</a></li>
            <li><a href="#">The Menu</a></li>

        </ul>


    </div>                            
</div> <!-- end sidebar div -->        

</body></html>

body {
    background-color: #111111;
    color: #eeeeee;
    font: 14px 'trebuchet ms', arial, sans-serif;
    padding: top: 5px; left: 5px;
}

a:link, a:visited, a:active {
    color:#CCCCCC;
    text-decoration:none;
}




#sidebar {
    float: left;
    height: 100%;
    text-align: center;
    width: 180px;
    position: absolute;
    left: 0px;
    top: 0px;
}

#content {
    /*background: #fff;*/
    padding: 0px;
    

    position: absolute;
    left: 190px;
    top: 0px;


}

/** Structure */
#header {
    padding: 20px;
    background: #12407f;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 4px solid #436fac;
}



#footer {
    background: #12407f;
    color: #fff;
    padding: 20px;
    border-top: 4px solid #436fac;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
}

/* Links */
#header a {
    color: #fff;
    background: #436fac;
    padding: 4px 15px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#header a:hover {
    background: #4d8add
}

/** Forms */
form {
    font: 100% verdana,arial,sans-serif;
}

form label { 
    display: block;
    float: left; 
    width: 150px; 
    padding: 0; 
    margin: 9px 0 0;
    text-align: right; 
}

form input, form select {
    width: auto;
    margin: 5px 0 0 10px;
    border: 1px solid gray;
    padding: 4px;
}

form input[type=submit]:hover {
    cursor: pointer;
    background: silver;
}


form br {clear: left;}

#navigation {
    display: block;
    list-style: none;
}

textarea:focus, input:focus {
    background-color: #ffffc0;
}

#alert_status {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: 10px;
}

#ticker {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: 10px;
}


#round_info {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: -10px;
}

h1 {
    background: #12407f;
}

#nav {
    margin-top: -10px;    
    padding: 0;
    background: #12407f;
    border-bottom: 2px solid #436fac; border-right: 12px solid #436fac; border-left: 12px solid #436fac;
    list-style-type: none;
    display: block;
    

    /*float: left; /* Contain floated list items */
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}


    
#menu li {
  margin: 0;
  padding: 0;
  float: left; /* This corrects the */
  width: 100%; /* IE whitespace bug */
}
#menu a {    
  display: block;  /* to increase clickable area as a's 
      default to inline */
  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;

  border-bottom: 1px solid #FFF;
}
#menu #menu_con a {
  border: none;
}
#nav a:hover {  
  background: #436fac;
  display: block;
}

#nav a:active {  
  background: #13518f;
  display: block;
}

.none_found {
    border: none;
    width: 100%;
    background-color: #000000;
    font-weight: bolder;
    text-align: center;
    font-style: italic;
    background-color: #5f5f5f;
}

table {
    width: 100%;
}



/* Navigation Tabs */

#nav_tabs {
  float: left;
  display: block;
  width: 100%;
  border-bottom: #12407f solid 1px;
  margin-bottom: 2em;
  list-style: none;
}

#nav_tabs ul {
  margin: 0;
  padding: 2em 0 0 0;
  list-style: none;
}

#nav_tabs li {
  float: left;
}

#nav_tabs a {
    color: #fff;
    background: #436fac;
    padding: 4px 15px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}



#site_logo {
    
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    text-align: center;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-style: italic;

    color: white;

}

/* System Messages */
#sys_messages {
    float: left;
    width: 100%;
    /*margin-top: 100px;*/
    /*padding-top: 10px;*/
}

.sysmessage_error {
    text-align: left;
    color: #ff2828;
    padding: 3px 3px 3px 22px;
    background-color: #330000;
    border: 1px solid #CC0000;
    margin-top: 5px;
    /*font-size: 12px;*/
    margin-bottom: 5px;
}

.sysmessage_error b {
    text-align: left;
    color: #ff2828;

    background-color: #330000;
    margin-top: 5px;
    /*font-size: 12px;*/
    margin-bottom: 5px;
}

.sysmessage_notification {
    text-align: left;
    color: #FF7F39;
    padding: 3px 3px 3px 22px;
    background-color: #341302; 
    border: 1px solid #CC6600;
    margin-top: 5px;
/*    font-size: 12px;*/
    margin-bottom: 5px;
}

.sysmessage_notification b {
    text-align: left;
    color: #FF7F39;
    background-color: #341302; 
    margin-top: 5px;
/*    font-size: 12px;*/
    margin-bottom: 5px;
}

.sysmessage_actionsucess {
    text-align: left;
    color: #00da00;
    padding: 3px 3px 3px 22px;
    background-color: #003000;
    border: 1px solid #00da00;
    /*font-size: 12px;    */
    margin-top: 5px;
    margin-bottom: 5px;
}

.sysmessage_actionsucess b {
    text-align: left;
    color: #00da00;
    background-color: #003000;
    /*font-size: 12px;    */
    margin-top: 5px;
    margin-bottom: 5px;
}

.sysmessage_help {
    text-align: left;
    padding: 3px 3px 3px 22px;
    background-color: #000040;
    border: 1px solid #30a7d7;
    /*font color: #000040;*/
    margin-top: 5px;
    margin-bottom: 5px;
    /*font-size: 12px;    */
    color: #30a7d7;
}

.debugger {
    color: yellow;
    border: 1px dashed orange;
    background-color: #341302;
}

th {
    background-color: #12407f;
}

tr:nth-child(even) {
    background: #436fac;
}

tr:nth-child(odd) {
    background: #215d8a;
}

.meter-wrap{
position: relative;
}

.meter-wrap, .meter-value, .meter-text {
width: 155px; height: 30px;
}


.meter-wrap, .meter-value {
/*&nbsp; &nbsp; background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;*/
}
            
.meter-text {
    position: absolute;
    top:0; left:0;

    padding-top: 5px;
                
    color: #fff;
    text-align: center;
    width: 100%;
}

.pm_post {
    background: green;
    display: block;


}

.pm_poster {

    background: purple;
    width: 25%;
    display: block;

    float: right;


}

.pm_post_message {

    float: left;
    width: 75%;
    display: block;

    background: orange;

}

#pm_thread {
    background: blue;
    width: 100%;

}
2

HI,

The first thing you need to do is clear your floats.

e.g.

.pm_post {overflow:hidden}

If you need visible overflow then use the clearfix method instead.

If you could change the order of this:

<div class="pm_poster">
        <p>SpacePhoenix</p>
        <p>2014-06-25 20:40:52</p>
</div>
<div class="pm_post_message">
        <p>This is just a test! That's all it is!</p>
</div>

to this:

<div class="pm_post_message">
        <p>This is just a test! That's all it is!</p>
</div>
<div class="pm_poster">
        <p>SpacePhoenix</p>
        <p>2014-06-25 20:40:52</p>
</div>

Then I would use display:table-cell (ie8+) instead of floats and get an equal column effect into the bargain.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    background-color: #111111;
    color: #eeeeee;
    font: 14px 'trebuchet ms', arial, sans-serif;
 padding: top: 5px;
    left: 5px;
}
a:link, a:visited, a:active {
    color:#CCCCCC;
    text-decoration:none;
}
#sidebar {
    float: left;
    height: 100%;
    text-align: center;
    width: 180px;
    position: absolute;
    left: 0px;
    top: 0px;
}
#content {
    /*background: #fff;*/
    padding: 0px;
    position: absolute;
    left: 190px;
    top: 0px;
}
/** Structure */
#header {
    padding: 20px;
    background: #12407f;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 4px solid #436fac;
}
#footer {
    background: #12407f;
    color: #fff;
    padding: 20px;
    border-top: 4px solid #436fac;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
}
/* Links */
#header a {
    color: #fff;
    background: #436fac;
    padding: 4px 15px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#header a:hover {
    background: #4d8add
}
/** Forms */
form {
    font: 100% verdana, arial, sans-serif;
}
form label {
    display: block;
    float: left;
    width: 150px;
    padding: 0;
    margin: 9px 0 0;
    text-align: right;
}
form input, form select {
    width: auto;
    margin: 5px 0 0 10px;
    border: 1px solid gray;
    padding: 4px;
}
form input[type=submit]:hover {
    cursor: pointer;
    background: silver;
}
form br {
    clear: left;
}
#navigation {
    display: block;
    list-style: none;
}
textarea:focus, input:focus {
    background-color: #ffffc0;
}
#alert_status {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: 10px;
}
#ticker {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: 10px;
}
#round_info {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: -10px;
}
h1 {
    background: #12407f;
}
#nav {
    margin-top: -10px;
    padding: 0;
    background: #12407f;
    border-bottom: 2px solid #436fac;
    border-right: 12px solid #436fac;
    border-left: 12px solid #436fac;
    list-style-type: none;
    display: block;
    /*float: left; /* Contain floated list items */
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}
#menu li {
    margin: 0;
    padding: 0;
    float: left; /* This corrects the */
    width: 100%; /* IE whitespace bug */
}
#menu a {
    display: block;  /* to increase clickable area as a's 
      default to inline */
    color: #FFF;
    text-decoration: none;
    padding: 0 15px;
    line-height: 2.5;
    border-bottom: 1px solid #FFF;
}
#menu #menu_con a {
    border: none;
}
#nav a:hover {
    background: #436fac;
    display: block;
}
#nav a:active {
    background: #13518f;
    display: block;
}
.none_found {
    border: none;
    width: 100%;
    background-color: #000000;
    font-weight: bolder;
    text-align: center;
    font-style: italic;
    background-color: #5f5f5f;
}
table {
    width: 100%;
}
/* Navigation Tabs */

#nav_tabs {
    float: left;
    display: block;
    width: 100%;
    border-bottom: #12407f solid 1px;
    margin-bottom: 2em;
    list-style: none;
}
#nav_tabs ul {
    margin: 0;
    padding: 2em 0 0 0;
    list-style: none;
}
#nav_tabs li {
    float: left;
}
#nav_tabs a {
    color: #fff;
    background: #436fac;
    padding: 4px 15px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#site_logo {
    background: #12407f;
    color: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-style: italic;
    color: white;
}
/* System Messages */
#sys_messages {
    float: left;
    width: 100%;/*margin-top: 100px;*//*padding-top: 10px;*/
}
.sysmessage_error {
    text-align: left;
    color: #ff2828;
    padding: 3px 3px 3px 22px;
    background-color: #330000;
    border: 1px solid #CC0000;
    margin-top: 5px;
    /*font-size: 12px;*/
    margin-bottom: 5px;
}
.sysmessage_error b {
    text-align: left;
    color: #ff2828;
    background-color: #330000;
    margin-top: 5px;
    /*font-size: 12px;*/
    margin-bottom: 5px;
}
.sysmessage_notification {
    text-align: left;
    color: #FF7F39;
    padding: 3px 3px 3px 22px;
    background-color: #341302;
    border: 1px solid #CC6600;
    margin-top: 5px;
    /*    font-size: 12px;*/
    margin-bottom: 5px;
}
.sysmessage_notification b {
    text-align: left;
    color: #FF7F39;
    background-color: #341302;
    margin-top: 5px;
    /*    font-size: 12px;*/
    margin-bottom: 5px;
}
.sysmessage_actionsucess {
    text-align: left;
    color: #00da00;
    padding: 3px 3px 3px 22px;
    background-color: #003000;
    border: 1px solid #00da00;
    /*font-size: 12px;    */
    margin-top: 5px;
    margin-bottom: 5px;
}
.sysmessage_actionsucess b {
    text-align: left;
    color: #00da00;
    background-color: #003000;
    /*font-size: 12px;    */
    margin-top: 5px;
    margin-bottom: 5px;
}
.sysmessage_help {
    text-align: left;
    padding: 3px 3px 3px 22px;
    background-color: #000040;
    border: 1px solid #30a7d7;
    /*font color: #000040;*/
  margin-top: 5px;
    margin-bottom: 5px;
    /*font-size: 12px;    */
    color: #30a7d7;
}
.debugger {
    color: yellow;
    border: 1px dashed orange;
    background-color: #341302;
}
th {
    background-color: #12407f;
}
tr:nth-child(even) {
    background: #436fac;
}
tr:nth-child(odd) {
    background: #215d8a;
}
.meter-wrap {
    position: relative;
}
.meter-wrap, .meter-value, .meter-text {
    width: 155px;
    height: 30px;
}
.meter-wrap, .meter-value {
/*&nbsp; &nbsp; background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;*/
}
.meter-text {
    position: absolute;
    top:0;
    left:0;
    padding-top: 5px;
    color: #fff;
    text-align: center;
    width: 100%;
}
.pm_post {
    background: green;
    display: table;
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    border-bottom:1px solid #000;
}
.pm_poster {
    display:table-cell;
    vertical-align:top;
    background: purple;
    width: 25%;
}
.pm_post_message {
    display:table-cell;
    vertical-align:top;
    width: 75%;
    background: orange;
}
#pm_thread {
    background: blue;
    width: 100%;
}
</style>
</head>
<body>
<pre><pre class="xdebug-var-dump" dir="ltr"><small>int</small> <font color="#4e9a06">1</font>
</pre>
</pre>
<title>Universal Empires</title>
<link rel="stylesheet" href="Universal%20Empires_files/default.css">
<script type="text/javascript" src="Universal%20Empires_files/tinymce.js"></script> 
<script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script> 
<script type="text/javascript" src="Universal%20Empires_files/custom.js"></script>
<div id="content">
        <div id="header">
                <div id="status_bar"> </div>
                <br>
                <a href="http://localhost/universal_empires/index">Home</a> <a href="http://localhost/universal_empires/game">Game</a> <a href="http://localhost/universal_empires/forum">Forum</a> <a href="http://localhost/universal_empires/blog">Blog</a> <a href="http://localhost/universal_empires/wiki">Wiki</a> <a href="http://localhost/universal_empires/bugs">Bugs</a> <a href="http://localhost/universal_empires/support">Support</a> <a href="http://localhost/universal_empires/Chat">Chat</a> <a href="http://localhost/universal_empires/admin">Admin</a> <a href="http://localhost/universal_empires/login/logout">Logout</a> SpacePhoenix </div>
        <div id="page_contnet">
                <div id="crumb_trail"> </div>
                <div id="nav_tabs"> </div>
                <h1>Test Message 1</h1>
                <p>Started By: SpacePhoenix On 2014-06-25 20:40:52</p>
                <div id="pm_thread">
                        <div class="pm_post">
                                <div class="pm_post_message">
                                        <p>This is just a test! That's all it is!</p>
                                </div>
                                <div class="pm_poster">
                                        <p>SpacePhoenix</p>
                                        <p>2014-06-25 20:40:52</p>
                                </div>
                        </div>
                        <div class="pm_post">
                                <div class="pm_post_message">
                                        <p>First Reply!</p>
                                </div>
                                <div class="pm_poster">
                                        <p>Toaster</p>
                                        <p>2014-06-25 20:41:56</p>
                                </div>
                        </div>
                        <div class="pm_post">
                                <div class="pm_post_message">
                                        <p>Second Reply!</p>
                                </div>
                                <div class="pm_poster">
                                        <p>SpacePhoenix</p>
                                        <p>2014-06-26 07:20:16</p>
                                </div>
                        </div>
                        <div class="pm_post">
                                <div class="pm_post_message">
                                        <p>Third Reply!</p>
                                </div>
                                <div class="pm_poster">
                                        <p>SpacePhoenix</p>
                                        <p>2014-06-26 07:26:43</p>
                                </div>
                        </div>
                        <div class="pm_post">
                                <div class="pm_post_message">
                                        <p>Fourth Reply!</p>
                                </div>
                                <div class="pm_poster">
                                        <p>Toaster</p>
                                        <p>2014-06-26 07:27:12</p>
                                </div>
                        </div>
                </div>
        </div>
        <div id="footer">
                <p>(C) SpacePhoenix Industries 2014</p>
                <p>Powered By SpaceCoreCCMS v0.01</p>
        </div>
</div>
<!-- end content div -->
<div id="sidebar">
        <div id="site_logo"> <a href="http://localhost/universal_empires" class="image" title="Goto the Home Page"> <img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85"> </a>
                <p>Universal Empires</p>
        </div>
        <div id="round_info">
                <div id="sys_time">
                        <p> February 05, 2015<br>
                                09:21:29 UTC </p>
                </div>
                <div id="round_name">
                        <p> <b>Has To Start Somewhere!</b>Day 1 </p>
                </div>
        </div>
        <div id="navigation">
                <ul id="nav">
                        <li><a href="http://localhost/">Home</a></li>
                        <li><a href="#">The Menu</a></li>
                </ul>
        </div>
</div>
<!-- end sidebar div -->

</body>
</html>
3

Many thanks Paul! :thumbsup:

For those that find this thread with a similar problem, as suggested by Paul I went for the clearfix method

and went with display:table-cell as I don’t intend on supporting versions of ie older then 8

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.