PDA

View Full Version : Image slicing problem in IE - Safari and F/F display fine...



emu_robot
Jan 14th, 2009, 08:02 PM
Hi lovely people...

I've got a prob with the way this page

http://www.gilljonesphotography.co.uk/people.html is being displayed in IE. There's a small strip of white that shouldn't be there underneath the main content and the 'footer' div. Can I get rid of it, or should I place the flash content in an AP DIV over the top of one entire pic for the ret of the page?

Here's my code


<!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>Gill Jones - People</title>
<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}

#header {
width: 1024px;
background: #ffffff;
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */

}

#container {
width: 1003px;
background: #ffffff;
border: 0px solid #000000;
}

#menu {
width: 214px;
background: #ffffff;
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
float: left;
margin: 0
}

#flashcontent {
width: 704px;
height: 483px;
float: left;
margin: 0
}
/* end hide */

#side {
width: 66px;
background: #ffffff;
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
float: right;
margin: 0
}

#footer {
width: 1024px;
background: #ffffff;
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}

body {
height: 10%;
margin: 0;
padding: 0;
background-color: #f3dbdb;
color:#ffffff;
font-family:sans-serif;
font-size:20;
width: 1024px;
background: #f3dbdb;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}

a {
color:#cccccc;
}
.style2 {color: #8d74ab}
</style>
</head>
<body>
<div id="header"><img src="header.jpg" width="1025" height="169" alt="header"/></div>
<div id="container"><div id="menu"><img src="menu.jpg" width="223" height="484" border="0" usemap="#Map" alt="Menu" />
<map name="Map" id="Map"><area shape="rect" coords="60,3,222,39" href="home.html" target="_parent" alt="Home" />
<area shape="rect" coords="60,40,220,74" href="people.html" target="_parent" alt="People" />
<area shape="rect" coords="60,75,221,123" href="inspiration.html" target="_parent" alt="Inspiration" />
<area shape="rect" coords="60,123,220,164" href="contact.html" target="_parent" alt="Contact" />
</map></div>
<div id="flashcontent"><span class="style2">SimpleViewer requires JavaScript and the Flash Player.</span> <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#f3dbdb");

// SIMPLEVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/simpleviewer/options.html

//fo.addVariable("xmlDataPath", "gallery.xml");
//fo.addVariable("firstImageIndex", "5");
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
fo.addVariable("preloaderColor", "0x8d74ab");

fo.write("flashcontent");
</script>
<div id="side"><img src="side.jpg" width="87" height="484" alt="side" /></div>
<div id="footer"><img src="footer.jpg" width="1025" height="117" alt="footer" /></div>
</div>
</body>
</html>

Thanks,

Em x

Excavator
Jan 14th, 2009, 09:07 PM
Hello emu_robot,
I'm not sure I understand why your <div id="side"><img src="side.jpg" width="87" height="484" alt="side" /></div> is a 87x483px image that could really be an 87x1px image that's just repeated.
Unless your going to change these images and put some gradient in or something later, there's no reason this couldn't be done without images at all.