2 replies [Last post]
amber
amber's picture
Offline
newbie
UK
Last seen: 3 years 38 weeks ago
UK
Timezone: GMT+1
Joined: 2008-05-10
Posts: 8
Points: 0

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"?>

Naj Original Art, Portraits, Paintings, Illustrations & ACEO Art Cards


body {word-wrap: break-word;}
#container {width:expression(document.body.clientWidth < 650 ? "650px" : "100%");
}

Mydepictions
Original Art by Naj

...Established by the Artist in 2006




Portrait Painter, Illustrator and Canal Artist




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.



In addition to portrait art and illustration, Naj also undertakes custom canal art. See Canal Folk
Art
for traditional barge ware (narrowboat art) which can be hand-painted to order.



Miniature art, including Artist Card Editions and Originals (ACEOs), are available at auction from
time to time. Visit Buy Affordable Art at Auction to check for art work for sale on Ebay.

Fine Art Paintings - Portrait Paintings - Canal Folk Art - Commissions


Past fine art commissions can be viewed on the Portrait Gallery & Commissions 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 not exclusive and commissions for art work and portraits working from good quality photographs,
copyright permitting, featuring most subjects will be considered.



Visit the Canal Folk Art page to find out more about Mydepictions 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 Mydepictions barge ware past works and commissions. Canal ware narrowboat art can be
can be hand- painted to order.



With some twenty years experience of producing commissioned artwork and portrait
painting, why not find out more about the artist Naj and her artistic background by visiting
Mydepictions About the Artist Naj page.




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 Mydepictions current ebay auctions for affordable art in pop-up window without leaving
Mydepictions.co.uk!
Visit the Buy Affordable Art at Auction link at the side of the page or click

view mydepictions current Ebay art auctions
here.

My Depictions Artist Blog

Visit My Depictions blog.
My Depictions 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.

↑ Top

 On the Move

Gypsy Wagon Ink and Watercolour Painting.

Dog Pastel Portrait by Naj

Dog Portrait Painting of a Lurcher.

ACEO Cat Art Card Pastel Painting by Naj

Miniature ACEO Cat Portrait.

Brief Summary of this Artist website...

Portrait Gallery & Commissions Past art works. Commission a portrait painting from photo. About the Artist Naj Artistic background & interests. Canal Folk Art Barge ware past works & commissions. Buy Affordable Art (Pop-Up/New window) Mydepictions Ebay Art Auctions when available. Art Listings

Mydepictions Ebay art listings gallery. Selection of small format artworks sold on ebay. Larger
format reproduction paintings may be commissioned.
Mydepictions Links
Naj's web presence including links to contact Naj, feedback, auctions & online art sales.
Web Design Links
Links to free resources for hand building and managing your own
website.
Artist Links
Links to great artist and crafters sites.
Art & Craft SitesLinks to art and craft interest sites.


Site Updated: April 2008.
Website design by Naj. Copyright (c) 2006-2008. All rights reserved. Valid XHTML 1.0 and CSS 2.1
This site has been awarded the Coxsoft Art Silver Surfer Friendly Award.

Any help much appreciated!

DanA
DanA's picture
Offline
Elder
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

For IE 7

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
amber's picture
Offline
newbie
UK
Last seen: 3 years 38 weeks ago
UK
Timezone: GMT+1
Joined: 2008-05-10
Posts: 8
Points: 0

Thanks so much! All appears

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