Hi
If the site is viewed in FireFox or the latest version of IE then all is well.
The problem I been made aware of is when the site is viewed in older browsers like IE 5. I have ben informed that IE 5 has problems with Floats.
Basically what happens is the main content area - the right content encounters a display error - whereby the flash movie on the right aligns to the bottom and expands the content area height for that containing block.
The CSS used is as follows:
===========================
body {
background-image : url("images/bk-title.jpg");
background-repeat : repeat;
background-color : #000099;
font-family : "Lucida Grande", Verdana, Lucinda, Arial, Helvetcia, sans-serif;
font-size : 8pt;
color : #000000;
margin-top : 50px;
margin-left : 100px;
}
a:link {
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #ffffff;
text-decoration : none;
}
a:hover {
color : #ffffff;
text-decoration : underline;
}
a:active {
color : #ffffff;
text-decoration : underline;
}
div {
width : 720px;
background-color : #ffffff;
padding : 6px;
}
div#logo {
height : 60px;
}
div#logo img {
float : left;
}
div#navlinks {
background-color : #009900;
height : 15px;
}
div#navlinks a {
padding-left : 10px;
padding-right : 10px;
}
div#content {
height : 350px;
}
div#webcontent {
height : 380px;
}
p#leftflash {
width : 390px;
float : left;
padding-top : 10px;
}
p#leftflash a {
color : #009900;
text-decoration : underline;
}
p#rightflash {
width : 330px;
float : right;
padding-top : 10px;
}
p#leftcontent {
width : 360px;
float : left;
}
img#grad1 {
margin-left : 220px;
}
img#grad2 {
margin-left : 110px;
}
img#grad3 {
margin-left : 60px;
}
img#poster {
margin-left : 80px;
}
img#phone {
margin-left : 30px;
}
img#computer {
margin-left : 30px;
}
img#review {
margin-left : 100px;
margin-top : 30px;
}
p#rightcontent {
width : 360px;
float : right;
}
p#rightcontent a {
color : #009900;
text-decoration : underline;
}
p#rightcontent a:hover {
background-color : #ffff00;
color : #000000;
}
form#formcontent {
width : 360px;
float : right;
}
strong {
color : #009900;
font-size : 10pt;
}
strong#heading {
color : #009900;
font-size : 16pt;
font-family : "Lucida Grande", "comic sans ms", Verdana, Lucinda, Arial, Helvetcia, sans-serif;
text-align : center;
}
strong#heading2 {
color : #009900;
width : 360px;
text-align : center;
font-size : 16pt;
font-family : "Lucida Grande", "comic sans ms", Verdana, Lucinda, Arial, Helvetcia, sans-serif;
}
strong#note {
color : #009900;
font-size : 8px;
}
div#copyright {
height : 15px;
background : #009900;
color : #ffffff;
text-align : center;
}
HTML for that page is:
======================
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Garry Butcher's Home Page | gazbutcher.co.uk | 1970's Retro Edition</title>
<meta name="description" content="gazbutcher.co.uk is a kind of online CV for Garry Butcher, a late twenty-something Computer Science graduate living in United Kingdom, somewhere in middle earth" />
<meta name="keywords" content="gazbutcher, garry butcher, gary butcher, computer science, web design, garry, gaz, gazbutcher.co.uk, CV, online CV, Computer Science, web, development" />
<link rel="stylesheet" href="gaz_style.css" type="text/css" />
<script language="javascript" type="text/javascript" src="preloads.
js"></script>
</head>
<body onload="preLoad_Images();">
<div id="logo"><img src="images/gazbutcher-logo.jpg" alt="gazbutcher website logo" /></div>
<div id="navlinks">
<a href="index.html" target="_self">[ Welcome Page ]</a>
<a href="qual.html" target="_self">[ Qualifications ]</a>
<a href="tech.html" target="_self">[ Technical Skills ]</a>
<a href="weblinks.html" target="_self">[ Web Links ]</a>
<a href="otherinfo.html" target="_self">[ Additional Info. ]</a>
<a href="contact.html" target="_self">[ Contact Form ]</a>
</div>
<div id="content">
<p id="leftflash">
Garry Butcher was born in the late 1970's. Having had a keen interest in computing since his mother and
father bought him his first Computer, a Toshiba MSX 64K for Christmas, he started thinking about how he might pursue a career in the Computer games industry. However, after completing
his GCSE's and talking to the School careers adviser he decided to undertake studies in business and finance at a
local College.<br /><br />
Having topped the class in all the computer study aspects of the course, it was suggested by his computer
lecturer that he should perhaps pursue studies that best matched his ability and interests. On realising
his interest in computing could become a career he went on to complete a National Diploma in <a href="javascript
:newWindow()">Computer Studies</a>
followed by decision to study a degree in Computer Science at a local University. Since then he hasn't looked back or stopped speaking in a third person.
<br /><br />You can find out more about Garry using links above<br /><br />
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.gazbutcher.co.uk/gaz_style.css"><img border="0" width="88" height="31" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> Last updated 19/05/2005
<br /><br />
<a href="http://www.feedvalidator.org/check.cgi?url=http://www.gazbutcher.co.uk/gazfeed.xml"><img src="images/valid-rss.gif" border="0" alt="[Valid RSS]" width="88" height="31" /></a>
<a href="gazfeed.xml"><img src="images/rssbut.gif" border="0" alt="RSS feed link" /></a>
</p>
<p id="rightflash">
<object type="application/x-shockwave-flash" data="acts.swf" width="280" height="220">
<param name="movie" value="acts.swf" />
<img src="noflash.gif" width="200" height="100" alt="" />
</object>
</p>
</div>
<div id="copyright">Site version 6.0 © 2005 by GB ¦¦ Active ingredients <a href="http://validator.w3.org/check/referer" target="_blank">XHTML 1.0</a> and CSS</div>
</body>
</html>
Gaz
CSS Float error
