Breaking Out of the Box

[pdxi]

Notice: This is a discussion thread for comments about the SitePoint article, Breaking Out of the Box.
__________

Wow! I really enjoyed this article. It's laid out so simply, making it easy to understand how a few simple flourishes can make a design really stand out.

Thanks!

[Paul O'B]

Not to detract from the article but just in case anyone is trying the code out and wondering why the code isn't displaying correctly in ie6 and under you need to address the double margin bug on outer floats and use these fixes (see CSS faq on floats for the why and wherefore.).

#content-primary {
 float: right;
 margin: 24px;
 width: 720px;
 display:inline;
}
#content-secondary {
 float: right;
 margin: 24px;
 width: 144px;
 display:inline;
}

The same applies to the full css:

#content-primary {
 float: right;
 margin: 12px 24px 60px 24px;
 width: 528px;
display:inline;
}
#content-secondary {
 float: right;
 margin: 30px 216px 60px 24px;
 width: 144px;
 font-size: 11px;
 color: #300;
display:inline
}

Also note that the footer image technique matching the body image will not work on short pages when the page doesn't actually reach the bottom of the viewport.

These were just minor issues on an otherwise good article that I thought I'd mention before anyone else piped up

[pug2112]

I used the image on the second page to do the faux column technique. Thing is the image was 400px wide.

Would it be better to position the image or mod it to say 200px?

I always like to try out tutorials as its the best way to learn (for me anyway).

So far the book has a thumbs up from me.

Also - some observations and queries:

- Why wasn't '.clear' utilised in a div? Afterall it was in the css.
- I never really understood why 'footer p' padding was: padding: 132px 24px 0 24px; (on page 3). I thought it could have been 132px, 0, 0, 24px. (sorry this is really splitting hairs).
- Its a shame some of the gifs/pngs were not on screen (such as ornament.gif and bg.gif) so I could have saved/resized and included them.
- First time ive seen text-shadow being used.

[armchaircritic]

Originally Posted by Paul O'B

Not to detract from the article but just in case anyone is trying the code out and wondering why the code isn't displaying correctly in ie6 and under you need to address the double margin bug on outer floats and use these fixes (see CSS faq on floats for the why and wherefore.).

#content-primary {
 float: right;
 margin: 24px;
 width: 720px;
 display:inline;
}
#content-secondary {
 float: right;
 margin: 24px;
 width: 144px;
 display:inline;
}

The same applies to the full css:

#content-primary {
 float: right;
 margin: 12px 24px 60px 24px;
 width: 528px;
display:inline;
}
#content-secondary {
 float: right;
 margin: 30px 216px 60px 24px;
 width: 144px;
 font-size: 11px;
 color: #300;
display:inline
}

Also note that the footer image technique matching the body image will not work on short pages when the page doesn't actually reach the bottom of the viewport.

These were just minor issues on an otherwise good article that I thought I'd mention before anyone else piped up

Thanks for the tip, it works great

Andy

[crome]

Thanks Jina,

A working example would round off this excellent tutorial very nicely and make it a very good training excercise.

Thanks Again!

[Bob Carologees]

Jina is my role model w00t

Love you Jina, keep it real baby.

[Paul O'B]

Hi Jina,

Originally Posted by Jina

You can now download the example page. Hope that helps! Thanks again, everyone.

It's a pity that you didn't read or acknowledge my post because the example is still broken in the biggest browser on earth IE6 (and under).

It would have taken a couple of seconds to fix and I have to wonder what testing process you went through with this when ie6 is still the most widely used browser. Did you not test in IE6?

While in general I think the article was pretty good and offers good advice I still think you need to be careful in offering code that doesn't work cross-browser, or at least mention the problems even if you don't want to address them in code.

Sorry if this sounds harsh but its just that I care about my CSS

[Paul O'B]

Originally Posted by Jina

I feel terrible that this has happened, as this is normally something I catch on the front end (and is normally something the SitePoint editors would catch as well).

Don't worry we all make mistakes and I just noticed that my original comments posted here don't show automatically on the article page which is probably why you missed them first time around, so perhaps my words were a little harsh

As I said, apart from that it was a good article

[crome]

Thank you Jina for the download.

I have tried Paul O'B's fix and this has corrected the position of the left column layout. However in IE6 the left hand side of the main picture and the little swirls do not display. The icture doesn't extend outside of the text, it is just cropped. No left border.

Any thoughts?

[Paul O'B]

Hi,

Originally Posted by crome

The icture doesn't extend outside of the text, it is just cropped

Nine times out of ten when you use negative margins in IE6 you will also need to add position:relative or the negative portion gets drawn under the background in error. Therefore add position:relative to the img styles.

There are also "haslayout" issues (see faq) on the h1 and h2 and usually occurs when an elements dimensions are defined by margins alone.

Therefore you need the following fixes to correct all the above.

            /* mac hide \*/
            h1,h2,h3,#content-primary img {position:relative;}
            h1,h2,h3 {height:1%}
            /* end hide */

[MarcusVitruvius]

Done a bit of tinkering around with the code from the article. This works in IE6 and Firefox:

* {
margin: 0;
padding: 0;
}
body {
background: #eee url(bg.gif) 0 100% repeat-x;
font: 12px/18px "Lucida Grande", Verdana, sans-serif;
text-align: center;
color: #333;
}
a:link, a:visited {
color: #633;
}
a:hover {
color: #966;
}
h1 {
margin-bottom: 11px;
margin-left: -108px;
padding: 15px 0 21px 108px;
border-bottom: 1px solid #ccc;
font: normal italic 1.5em/18px Georgia, serif;
color: #633;
}
h2, h3{
font-weight: normal;
font-size: 1em;
line-height: 18px;
}
h2 {
margin-left: -204px;
padding: 10px 0 20px 204px;
background: url(h2_ornament.gif) 3px 0 no-repeat;
font-size: 1.25em;
text-transform: uppercase;
color: #999;
}
h3 {
padding-bottom: 6px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -1px;
color: #633;
}
#wrap {
background: url(wrap.gif) repeat-x;
}
#page {
margin: 0 auto;
width: 960px;
background: #fff url(page.gif) repeat-y;
text-align: left;
}
#header {
height: 192px;
background: #966 url(header.gif) bottom no-repeat;
}
#header p {
float: left;
padding: 60px 24px 24px 126px;
font-size: 1.5em;
line-height: 1em;
color: #fff;
}
#header ul {
padding-top: 62px;
padding-right: 12px;
text-align: right;
list-style: none;
}
#header li {
display: inline;
margin: 0 12px;
}
#header li a {
font-size: 1.25em;
line-height: 1em;
text-decoration: none;
color: #fff;
}
#header li a:hover {
color: #300;
}
#content-primary {
float: right;
margin: 12px 24px 60px 24px;
width: 528px;
display:inline;
}
#content-primary p {
padding-bottom: 18px;
}
#content-primary img {
float: left;
margin: -6px 18px 0 -114px;
padding: 3px;
border: 3px solid #eee;
background: #fff;
}
#content-secondary {
float: right;
display:inline;
margin: 30px 216px 60px 24px;
width: 144px;
font-size: 11px;
color: #300;
}
#content-secondary p {
padding-bottom: 18px;
}
#footer {
clear: right;
height: 192px;
background: #333 url(footer.gif) top no-repeat;
font-size: 10px;
line-height: 1em;
text-shadow: 1px 1px 1px #333;
color: #fff;
}
#footer a:link, #footer a:visited {
color: #c99;
}
#footer p {
padding: 132px 24px 0 24px;
}
.clear {
clear: both;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Example Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrap">

<div id="page">

<div id="header">
<p>Header content</p>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>





<div id="content-primary">
<h1>Welcome to my awesome website.</h1>
<h2>Indeed, this is an awesome website.</h2>
<p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p>
<img src="photo.jpg" alt="" />
<p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p>
<h2>Oooh, more copy&hellip;</h2>
<p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p>
</div>

<div id="content-secondary">
<h3>Important Information</h3>
<p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p>
</div>
<div id="footer">
<p>Photograph by <a href="http://jinabolton.com">Jina Bolton</a>.</p>
</div>

</div>



</div>
</body>
</html>

[Paul O'B]

Hi MarcusVitruvius,

You just needed the changes I offered in posts #3 and post #16 and it will look the same in Firefox and IE.

The code you posted above is still not working in IE because all the images are hidden due to the negative margins as explained in my other post.

This is the working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Example Layout</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: #eee url(bg.gif) 0 100% repeat-x;
                font: 12px/18px "Lucida Grande", Verdana, sans-serif;
                text-align: center;
                color: #333;
            }
            a:link, a:visited {
                color: #633;
            }
            a:hover {
                color: #966;
            }
            h1 {
                margin-bottom: 11px;
                margin-left: -108px;
                padding: 15px 0 21px 108px;
                border-bottom: 1px solid #ccc;
                font: normal italic 1.5em/18px Georgia, serif;
                color: #633;
            }
            h2, h3{
                font-weight: normal;
                font-size: 1em;
                line-height: 18px;
            }
            h2 {
                margin-left: -204px;
                padding: 10px 0 20px 204px;
                background: url(h2_ornament.gif) 3px 0 no-repeat;
                font-size: 1.25em;
                text-transform: uppercase;
                color: #999;
            }
            h3 {
                padding-bottom: 6px;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: -1px;
                color: #633;
            }
            #wrap {
                background: url(wrap.gif) repeat-x;
            }
            #page {
                margin: 0 auto;
                width: 960px;
                background: #fff url(page.gif) repeat-y;
                text-align: left;
            }
            #header {
                height: 192px;
                background: #966 url(header.gif) bottom no-repeat;
            }
            #header p {
                float: left;
                padding: 60px 24px 24px 126px;
                font-size: 1.5em;
                line-height: 1em;
                color: #fff;
            }
            #header ul {
                padding-top: 62px;
                padding-right: 12px;
                text-align: right;
                list-style: none;
            }
            #header li {
                display: inline;
                margin: 0 12px;
            }
            #header li a {
                font-size: 1.25em;
                line-height: 1em;
                text-decoration: none;
                color: #fff;
            }
            #header li a:hover {
                color: #300;
            }
            #content-primary {
                float: right;
                margin: 12px 24px 60px 24px;
                width: 528px;
                display:inline;

            }
            #content-primary p {
                padding-bottom: 18px;
            }
            #content-primary img {
                float: left;
                margin: -6px 18px 0 -114px;
                padding: 3px;
                border: 3px solid #eee;
                background: #fff;
            }
            /* mac hide \*/
            h1,h2,h3,#content-primary img {position:relative;}
            h1,h2,h3 {height:1%}
            /* end hide */
            #content-secondary {
                float: right;
                margin: 30px 216px 60px 24px;
                width: 144px;
                font-size: 11px;
                color: #300;
                display:inline;
            }
            #content-secondary p {
                padding-bottom: 18px;
            }
            #footer {
                clear: right;
                height: 192px;
                background: #333 url(footer.gif) top no-repeat;
                font-size: 10px;
                line-height: 1em;
                text-shadow: 1px 1px 1px #333;
                color: #fff;
            }
            #footer a:link, #footer a:visited {
                color: #c99;
            }        
            #footer p {
                padding: 132px 24px 0 24px;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="page">
                <div id="header">
                    <p>Header content</p>
                    <ul>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
                <div id="content-primary">
                    <h1>Welcome to my awesome website.</h1>
                    <h2>Indeed, this is an awesome website.</h2>
                    <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p>
                    <img src="photo.jpg" alt="" />
                    <p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p>
                    <h2>Oooh, more copy&hellip;</h2>
                    <p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p>
                </div>
                <div id="content-secondary">
                    <h3>Important Information</h3>
                    <p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p>
                </div>
                <div id="footer">
                    <p>Photograph by <a href="http://jinabolton.com">Jina Bolton</a>.</p>
                </div>
            </div>
        </div>
    </body>
</html>

Hope it helps

[Paul O'B]

Ken and Emily - read my posts above which offer simple fixes for the problems mentioned

[Dan Schulz]

That's the universal selector and is used to strip the margins and padding from everything, removing any chance of the browsers using their own default margins and padding on elements (like lists), which in turn turns the control of the styling of these elements over to the Web designer (where it, in this case anyway, belongs).

[Paul O'B]

Martine - Read my posts above which address all these issues

[srizvi1]

Thanks for this tutorial Jina (and thanks for the IE fixes Paul O'B).

I wanted to make a really simple portal site for myself that links to all my sites. So since this site would really be lacking in content, I wanted to kind of make up for it in a bit of a innovative design. The ideas in this tutorial (off-centering headers and images, ornamental background images, and the abstract header/footers) will hopefully do the trick.

My goal is to have a similar 4 pane layout (header, footer, primary, secondary). I want to do just two pages. Page 1 would be the description of the site, and Page 2 would be form-powered contact page (which I hope to design following the other sitepoint tutorial here: http://www.sitepoint.com/article/fancy-form-design-css).

In my planned version though, I'm going to be keeping the off centered images in the content-secondary div because I want the content-primary window to be what changes between page 1 and page 2. Hopefully it won't be too hard to switch this around.

I'm not sure if I like the swirly borders that Gina used for her site though. Any suggestions on other borders that are out there? I'd like to have something like this, but would like to see some more to get some ideas.

[Kathy@rubic]

I think i was a wonderful article.

I had been using Tables in GoLive for about a year to build website. Then I read this article and it haven't built another website with tables!

I have come across a little glitch in one of the sites I am building. I have tried a few things to try to fix this problem, but still nothing! and it is only happening in windows Vista!

So here is my predicament:
- my footer is moving up along the right side on my body text.

<body>
<div id="page">
<div id="header">
  <div id="logo"><img src="img/logo.gif" border="0"></div>
  <div id="header_text">
    <div class="ex_text">Lorem</div> ipsum<br />
    dolor sit amet<br /><br />
    <div class="ex_text">Lorem</div> ipsum<br />
    dolor sit amet<br /><br />
    <div class="ex_text">Lorem</div> ipsum<br />
    <div class="header_style">dolor sit amet</div><br /><br />
    <div class="ex_text">Lorem</div> ipsum<br />
    dolor sit amet<br /><br />
    <div class="ex_text">Lorem</div> ipsum<br />
    dolor sit amet<br /><br />
  </div>
</div>
<div id="nav">
    <div id="nav_left"><img src="img/carrot.gif">&nbsp;&nbsp;Lorem ipsum        
    </div>  
        <div id="nav_right">
        <a href="#">Lorem ipsum </a>  |  
        <a href="#">Lorem ipsum </a>  |  
        <a href="#">Lorem ipsum </a>  |  
        <a href="#">Lorem ipsum </a>
    </div>  
</div>
<div id="conent">
   <div id="left_nav">
   <a href="#"><img src="img/logo.gif" border="0"></a><br><br />
   <a href="#"><img src="img/logo.gif" border="0"></a><br><br />
   </div>
   <div id="body_text">
        <h1>Lorem ipsum dolor sit amet, consectetuer </h1><br />
    <div class="sub_header">. Cras rutrum dui quis orci.</div><br />
    <br />
    Mauris ultricies enim ac felis. Proin aliquet pede ut magna. Nam euismod varius massa. Aliquam malesuada. Cras adipiscing ipsum quis quam. Integer laoreet, lectus a tempor volutpat, wisi libero sollicitudin velit, a vestibulum est lacus id enim.<br />
    <br />
    Nam nisl tortor, consequat non, pellentesque vitae, aliquet sed, nunc. Pellentesque vitae diam et enim aliquet ornare. Praesent venenatis diam eget est. Etiam vel nisl vitae mi pellentesque faucibus.  
<a href="#" class="more">MORE &gt;<br /></a><br />
    <br />
     <h1>Lorem ipsum dolor sit amet, consectetuer </h1><br />
     <div class="sub_header">. Cras rutrum dui quis orci.</div>
         <a href="webpdfs/RetxQPCF.pdf" class="more">MORE &gt;</a>
    </div>
</div>
<div id="footer">Copyright 2007</div>
</div> 
</body>

* {
    margin: 0;
    padding: 0;
}
 
body {
    background: #ffffff;
    font-family: Arial, Helvetica, san-serif;
    font-size: 8pt;
    text-align: center;
}
 
.ex_text {
    color: #e32536;
    display: inline;
}
 
.header_style {
    font-style: italic;
    display: inline;
}
 
h1 {
    font-weight: bold;
    font-size: 9pt;
    display: inline;
}
 
.sub_header {
    font-style: italic;
    font-size: 9pt;
    display: inline;
}
 
a, a:visited, a:link {
    color: #000000;
    text-decoration: none;
}
 
a:hover, a:active {
    color: #e32536;
    text-decoration: none;
}
 
a.more, a.more:visited, a.more:link {
    color: #e32536;
    font-weight: bold;
    text-decoration: none;
}
 
a.more:hover, a.more:active {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}
 
#page {
    background: url(img/bg.jpg) no-repeat;
    margin: 0 auto;
    width: 870px;
    text-align: left;
}
 
#header {
    height: 329px;
}
 
#logo {
    float: left;
    width: 316px;
    padding: 179px 0px 0px 0px;
}
 
#header_text {
    float: left;
    width: 229px;
    font-weight: bold;
    padding: 143px 0px 0px 323px;
}
 
#nav {
    height: 113px;
}
 
#nav_left {
    float: left;
    width: 300px;
    text-align: right;
    font-weight: bold;
    padding: 97px 15px 5px 0px;
    border-right: 1px solid #5f5f5f;
}
 
#nav_right {
    float: left;
    font-weight: bold;
    padding: 97px 0px 5px 15px;
}
 
#content {
    width: 870px;
}
 
#left_nav {
    float: left;
    width: 300px;
    text-align: right;
    padding: 15px 15px 0px 0px;
    border-top: 1px solid #5f5f5f;
}
 
#body_text {
    float: left;
    width: 499px;
    padding: 15px 40px 60px 15px;
    border-left: 1px solid #5f5f5f;
    border-top: 1px solid #5f5f5f;
}
 
#footer {
    font-size: 7pt;
    font-weight: bold;
    clear: left;
    float: right;
    width: 539px;
    padding: 5px 0px 0px 15px;
    border-left: 1px solid #5f5f5f;
    border-top: 1px solid #000000;
    text-align: left;
}
 
.clear {
    clear: both;
}

I know it is probably something super simple that will fix this, but I can't figure it out.

Any help will be great!

[markbrown4]

Hi Kathy@rubic, and welcome to Sitepoint

this probably doesn't belong in this thread but I tested your code and the footer seems fine in IE7 and firefox. Which browser are you having trouble with?

Validate your html to a strict doctype also,

[Paul O'B]

Originally Posted by mark

I tested your code and the footer seems fine in IE7 and firefox.

Yes I tested the code out also and and it all seems ok (although I don't have vista but I'm guessing that it isn't a platform problem but a browser one).

I did notice that you had an ID that was being used though.

<div id="conent">

I assume that was supposed to be content andnot conent but it didn't seem to affect the snippet of code you sent.