CSS Creator IE7 and IE8 issues with liquid faux colum layout

Posted: Sat, 2008-05-10 12:06

Hi,

Really hoping someone can help me figure this out! Although I knew some very basic CSS, I have been mostly learning as I'm going and am self-taught. Because of this, I am maybe having difficulty finding exactly where the problem lies.

I recently began redesigning my website to move it to a tableless liquid faux column design. The design is based around the liquid faux columns tutorial on community-mx. (And, I believe I have followed the guidance for calculating the width of a column in proportion to its container.)

Anyway, the code all validates and the pages appear to look fine in almost every browser - thats appart from IE7 and IE8.

The rendering problems are different for both browsers...

IE7 - I want scaleable JPEG images on some pages in the right-hand column (#rcol). What IE7 does: does not display the images.

IE8 - the images are fine. What IE8 doesThe navigation bar (a UL within #navbar) does not display, and the H2 headers in the centre column (#main1) are severely cropped.

I am posting all the code, as I am not certain where the problem lies. Hope this is okay.There is a working example of the page here http://www.mydepictions.co.uk/test/example.html, although it wont be there indefinitely.

body
{
background:#fffafa;
color:#686868;
font: 80%/180% arial, serif;
padding: 0;
margin: 0;
}

h1,h2,h3,h4,h5 
{
font-family: "Comic sans ms", Times, Serif;
font-weight: normal;
text-align: left;
}

a:link 
{
background: #fffafa;
color: #537583;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted #3d7a7a
}

a:visited 
{
background: #fffafa;
color : #537583;
font-weight : bold;
text-decoration: none; 
border-bottom: 1px dotted #537583
}

a:hover 
{
background: #FFFAFA;
color: #99004D;
font-weight : bold;
text-decoration: none;
border-bottom: 1px dotted #537583
}

p,h1,h2,h3,h4,h5
{margin-top: 0}

p
{text-align: justify}

.center
{text-align:center} 

.left{text-align:left; margin-left: 1%;}

.list a
{display: block; padding: 2% 0% 0% 0%}

.ptop {text-align: right
}

img.scaled {width: 100%;}

span.b{font-weight : bold}

span.s{font-size : 85%}

/*-----------------page Layout---------*/

#container {min-width: 600px}/*pages with ads may be individually set*/

#wrapper1 {background: url(hlbgd.gif) 20% 0}

#wrapper1b {background: url(1bbgd.gif) 20% 0}/*in place of wrapper1 for interior pages*/

#wrapper2 {background: url(rtbg.gif) 82% 0}

#wrapright {float:right; width: 80%}

#navhed {background: transparent; 
color: #fffafa;
width:80%;
float: left;
position: relative;
}

/*-HEADER ----*/

#header
{background: #537583 url(ctop.gif) repeat-x;
color: #F5E6EE;
overflow: hidden; 
position: relative;
padding: 1% 0% 3% 0%;
margin: 0;
}

html>/**/body #header {padding: 0% 0% 5% 0%;}

#header h1

{background: url(splatw.gif) 65% 0% no-repeat;
font-size : 200%;
line-height: 165%;
letter-spacing: 0.12em;
font-weight: normal; 
padding: 1% 1% 4%;
margin: 1% 1% 0% 1%;
white-space: nowrap; 
}

html>/**/body #header h1 {margin: 0.4em 0.4em 0.0em; letter-spacing: 0.05em}

#header strong 

{background: transparent; 
color: #537583;
font: 90% "Comic sans ms", Times, Serif;
font-weight:bold;
letter-spacing: 0.9em
}

html>/**/body #header strong {letter-spacing: 0.4em}

#header p 

{background:transparent;
color: #F5E6EE;
font: 95% "Comic sans ms", Times, Serif;
font-weight: bold;
font-style: italic;
white-space: nowrap;
letter-spacing: 0.08em;
text-align: right; 
margin-right:2%; 
margin-top:-1.5em
}
/*--Left Colum SUMMARY---*/

#summary 
{margin-right: 80%
}

#summary p 
{margin: -2% 3% 0% 2%;
padding: 1.0em 0.0em 0.3em;
font-size: 80%;
font-weight: bold;
text-align: left
}

html>/**/body #summary p {padding:0; margin: 0% 18% 7% 10%}

#summary a
{
display: block;
margin: 2% 1% 0% 0% 
}

html>/**/body #summary a {margin-top: 16%}

html>/**/body #summary a:first-child {margin-top: 15%} 

#summary a:link 

{background: transparent;
color:#537583;
text-decoration: none
}

#summary  a:visited 
{background: transparent;
color:#537583;
text-decoration: none
}

#summary a:hover 
{background: transparent;
color: #99004D;
text-decoration: none
}

#sumhead
{ margin-right: 80%;
background: #537583; 
color: #fffafa;
padding-bottom: 3%;
padding-top: 2%}

#sumhead h3
{ 
font-size : 100%;
font-style: italic;
font-weight: bold;
margin: 0 0.5em 0 1.75em;
}

html>/**/body #summary h3 {margin: 0em 2.35em 0em 0em}

/*---navigation----*/
.nav ul 
{
float:left;
position:relative; 
padding:0; width: 100%;
margin: -3% 1% 0% 0%;
list-style: none;
line-height: 140%;
}

.nav a 

{float:left;
text-decoration:none;
color:#537583;
background:#fffafa url(noise1.gif) repeat-x;
padding:0em 0.5em; 
margin-right: 1%; 
white-space: nowrap;
border:0.1em #F5E6EE outset;
font-size: 85%
}

.nav li 

{display:inline;
}

.nav a:visited 

{background: url(noise1.gif) repeat-x #fff;
color:#537583;
text-decoration:none;
border:0.1em #fffafa outset
}

.nav a:hover 

{background: #fffafa;
color: #99004D;
text-decoration:none;
border:0.1em #E6CFCF inset
}

/*--MAIN center SECTION---*/
#main1 
{
position: relative;
float: left;
width: 80%;
margin: 0;
padding:0
}

#main1 a {background: transparent; color:#537583}

#main1 p 
{
margin: 2% 6% 3% 4%
}

html>/**/body #main1 p {margin: 2% 7% 3% 4%}

#main1 em 
{
font-weight: bold
}

#main1 h2 
{background: transparent;
color: #99004D;
font-size: 140%;
margin: 6% 4% 3% 4% 
}

#main1 h3
{font-size: 120%; font-style: italic; font-weight: bold; margin: 6% 4% 0% 4%}
/*--RIGHT Colum--*/

#rcol 
{background:#537583;
color: #fffafa;
margin-left: 80%;
}
.figure

{float: left;
position: relative;
width: 18%;
padding-top:12%; 
}

html>/**/body .figure {margin-left: -6%; padding: 0% 0% 0% 0%; width: 100%;}

.figure p 

{text-align: right;
margin: 0% 8% 0% 4%; 
font-style: italic;
font-family: "Comic sans ms", Times, Serif;
font-weight: bold;
text-indent: 0;
}


html>/**/body .figure p {margin-right: 3%; padding:12% 0% 56% 0%}

.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}

.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */



/*-FOOTER--*/

#main2 
{
background: #537583; color: #E6CFCF;
padding: 0; width:100%;text-align: center;
}



#main2 p 

{background: #537583;color:#fffafa;
font-size: 80%;
font-weight: bold;
margin: 1% auto 0% auto;
text-align: center;
}

html>/**/body #main2 p {padding: 1% 0% 0% 0%; margin-top: 0%;}

#main2 a
{background: #537583; color: #E6CFCF;
border-bottom: 1px dotted #fffafa;
text-decoration: none; padding: 0em 0.3em}

#main2 a:hover

{background: #537583; color:#99004D}

#main2 ul {list-style: none; padding: 1% 0%; margin:0% auto; }

#main2 li {display: inline; white-space: nowrap}

#main2 a {background:#537583; color:#E6CFCF; font-size: 85%; text-decoration: none}

#main2end
{background: url(foot.gif) repeat-x top; padding-top:10%}

and the HTML for the page:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Naj Original Art, Portraits, Paintings, Illustrations &amp; ACEO Art Cards</title>
<meta http-equiv="PICS-Label" content=
'(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://www.mydepictions.co.uk/" r (SS~~000 1))' />


<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content=
"Naj, art, artist, artwork, painting, portrait, norfolk, portraiture, norfolk portrait artist, pet portrait, animal portrait, animal art, art card, ACEO, ATC, Commission art, Commission portrait, Commission painting" />
<meta name="Description" content=
"Mydepictions original art from internationally selling, UK artist Naj. Commission a portrait, pet portrait, or other artwork. Also buy ACEO art cards." />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="styletest.css" />
<meta http-equiv="content-script-type" content="text/javascript" /><script type="text/javascript" src="pop.js">
</script>
<!--[if IE]>
 <style type="text/css">
  body {word-wrap: break-word;} 
  #container {width:expression(document.body.clientWidth < 650 ? "650px" : "100%");
}

 </style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="wrapper1" class="clearfix">
<div id="wrapper2" class="clearfix">

  

     <div id="header">


          <h1><strong>Mydepictions</strong><br />Original Art by Naj</h1>

           <p>...Established by the Artist in 2006</p>
         
     </div>

<!-- begin centre -->
<div id="wrapright">

    <div id="navhed"><div class="nav"><ul>
             <li><a href="gallery.html">Portrait Gallery/Commissions</a></li>
             <li><a href="about.html">About the Artist Naj</a></li>
             <li><a href="folk.html">Canal Folk Art</a></li>
             <li><a href="links.html#contact">Contact Naj</a></li></ul>
     </div></div>
     



<div id="main1">
    
    <h2>Portrait Painter, Illustrator and Canal Artist</h2>

    <p>
    <span class="b">
    
    Original art by Norfolk based portrait and illustrative artist Naj. Commissions for artwork undertaken including portraits of people, pets, transport, and houses. Commission a pastel     portrait, pencil drawing or
    acrylic painting - variety of media available. Order the fine art painting you want and buy art direct from a UK 
    independent artist, avoiding paying gallery mark-up costs.</span>
    </p>
    <p>
    In addition to portrait art and illustration, Naj also undertakes custom canal art. See <em>Canal Folk
    Art</em> for traditional barge ware (narrowboat art) which can be hand-painted to order.
    </p>
    <p>
    Miniature art, including Artist Card Editions and Originals (ACEOs), are available at auction from
    time to time. Visit <em>Buy Affordable Art at Auction</em> to check for art work for sale on Ebay.
    </p>

    <h2>Fine Art Paintings - Portrait Paintings - Canal Folk Art -  Commissions</h2>

    <p>
    Past fine art commissions can be viewed on the <a href="gallery.html">Portrait Gallery &amp; Commissions</a> page. 
    These show pastel, colour pencil, watercolour and acrylic painting, although graphite pencil and charcoal drawings 
    can also be commissioned. The past art examples include portrait work, a painting of a cottage and a Formula 1 racing     car painting. These
    subjects are <em>not</em> exclusive and commissions for art work and portraits working from good quality photographs,
    copyright permitting, featuring most subjects will be considered.
    </p>
    <p>
    Visit the <a href="folk.html">Canal Folk Art</a> page to find out more about <em>Mydepictions</em> traditional folk art
    painting. See examples of Canal Folk Art by Naj - the traditional British folk art of narrow boats and canals where roses and     castles are a recurrent
    theme. View examples of <em>Mydepictions</em> barge ware past works and  commissions. Canal ware narrowboat art can be
    can be hand- painted to order.
    </p>
    <p>
    With some <em>twenty years experience</em> of producing commissioned artwork and portrait
    painting, why not find out more about the artist Naj and her artistic background by visiting
    <em>Mydepictions</em> <a href="about.html">About the Artist Naj</a> page.
    </p>
    <p>
     
    Small format promotional artwork samples by Naj are for sale at Ebay auction at times, including ACEOs (Artist Card Editions and Originals). You can link to <em>Mydepictions</em> current ebay auctions for affordable art in pop-up window without leaving 
    <em>Mydepictions.co.uk</em>! 
    Visit the <em>Buy Affordable Art at Auction </em> link at the side of the page or click
    <a href="http://search.ebay.co.uk/_W0QQfgtpZ1QQfrppZ25QQsassZmydepictions" target="_blank" onclick="javascript:openNewWindow();return false" rel="nofollow"> 
    view mydepictions current Ebay art auctions</a> here.
    </p><h2>My Depictions Artist Blog</h2><p>Visit <a href="http://mydepictions.blogspot.com" target="_blank" rel="nofollow">My Depictions</a> blog.
<em>My Depictions</em> is Naj's personal blog site (currently hosted with Blogger). It's the place for news about this web site, Naj's recent artwork and art news, plus discussion about web design issues and tutorials.</p><p class="ptop"><a href="#header">&uarr; Top</a></p> 

</div><!-- end main1 -->

<!-- begin right colum -->
<div id="rcol">
<div class="figure">
  <img class="scaled" src="wag.jpg"
    alt="Gypsy Wagon or Caravan Ink and Watercolour Painting by Naj: On the Move" />
  <p>Gypsy Wagon Ink and Watercolour Painting.</p></div>
<div class="figure"><img class="scaled" src="dog.jpg"
    alt="Dog Pastel Portrait by Naj" />
  <p>Dog Portrait Painting of a Lurcher.</p></div>
<div class="figure"><img class="scaled" src="cat.jpg"
    alt="ACEO Cat Art Card Pastel Painting by Naj" />
  <p>Miniature ACEO Cat Portrait.</p></div>
</div>
<!-- end right colum -->

</div><!-- end wrapright -->

<!-- begin left colum -->
<div id="sumhead"><h3>Brief Summary of this Artist website...</h3></div>
<div id="summary">

<p><a href="gallery.html">Portrait Gallery &amp;
Commissions</a>
Past art works. Commission a portrait painting from photo.
<a href="about.html">About the Artist Naj</a>
Artistic background &amp; interests.
<a href="folk.html">Canal Folk Art</a>
Barge ware past works &amp; commissions.
<a href="http://search.ebay.co.uk/_W0QQfgtpZ1QQfrppZ25QQsassZmydepictions" target="_blank" rel="nofollow" onclick="javascript:openNewWindow();return false">
Buy Affordable Art (Pop-Up/New window)</a>
Mydepictions Ebay Art Auctions when available.
<a href="listing.html">Art Listings</a>

Mydepictions Ebay art listings gallery. Selection of small format artworks sold on ebay. Larger
format reproduction paintings may be commissioned.
<a href="links.html">Mydepictions Links</a>
Naj's web presence including links to contact Naj, feedback, auctions &amp; online art sales.
<a href="weblink.html">Web Design Links</a>
Links to free resources for hand building and managing your own
website.
<a href="artlink.html">Artist Links</a>
Links to great artist and crafters sites.
<a href="artcraft.html">Art &amp; Craft Sites</a>Links to art and craft interest sites.</p>
</div>

<!-- end left colum -->

</div><!-- end wrapper2 -->


</div><!-- end wrapper1 -->

<!-- begin footer -->
<div id="main2">
<p>Site Updated: April 2008.<br />
Website design by Naj. Copyright (c) 2006-2008. All rights reserved. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> and <a href="http://jigsaw.w3.org/css-validator/">CSS 2.1</a><br />This site has been awarded the <a href="http://homepages.tesco.net/ian.cox99/silversurfer.htm">Coxsoft Art Silver Surfer Friendly Award</a>.
</p>
</div><!-- end footer -->
<div id="main2end"></div>
</div><!-- end conatiner -->
</body>
</html>

Any help much appreciated!

DanA

Elder

Posts: 1079
Joined: 2004-08-14

For IE 7

Posted: Sat, 2008-05-10 13:38

For IE 7
Add min-height:1%; in #rcol to set hasLayout.
Remove width:18%; from .figure
I wouldn't care if a layout doesn't work for IE 8. It is a fully bugged beta.

amber

newbie

Posts: 4
Joined: 2008-05-10
Location: UK

Thanks so much! All appears

Posted: Sun, 2008-05-11 10:42

Thanks so much! All appears to be fine in IE7 now!

IE7 and IE8 issues with liquid faux colum layout

For IE 7

Thanks so much! All appears

Online users