HTML Help

KST122385 · Joined: 18 Nov 2008 Posts: 1

Hello everyone! I am looking for some help. I have created a website for my mother to sell the jewelry she has made. The website is www.stringedbead.com. The site has pages with thumbnail images that when clicked on opens another page (or tab) with the full size image. The images work fine in Firefox and even Safari. The problem is that IE cuts off the bottom of the full size images and the copyright information that should be underneath it. I have played around with the code some but still haven't figured out the problem. My brother and I hashed out the CSS for the website so I'm wondering if it's a problem with the style sheet. Here is the code for one of the pages:

<html>
<head>
<title>Stringed Bead</title>
<link rel="stylesheet" type="text/css" href="sitestyle.css" />
</head>

<body>
<div id="div1">
<div id="divpict">
<center><h1>Amethyst and Peacestone</h1></center>
<center><img src="images/amethystandpeacestone.jpg"></center>
<br /><div id="divfoot">&copy Linda Thompson 2008</div><br />
</div>
</div>
</body>
</html>

Here is the style sheet information as well:

body {
margin-top:0px;
margin-bottom:0px;
font-family:georgia,times new roman;
}
a {
color:#900000;
text-decoration:none;
}
a:visited {
color:#900000;
}

#photo {
border:thin solid #990000;
}
#divpict {
position:relative;
top:200px;
}
#div1 {
position:relative;
top:10px;
margin-left:auto;
margin-right:auto;
width:750px;
height:500px;
background-image:URL('images/banner.jpg');
background-repeat:no-repeat;
}
#divhead {
width:750px;
height:200px;
}
#div2 {
position:relative;
top:200px;
float:left;
width:180px;
padding:10px;
}
#div3 {
position:relative;
top:200px;
float:right;
width:520px;
padding:10px;
text-align:left;
border-left:thin solid #990000;
}
#divfoot {
clear:both;
font-size:10pt;
line-height:200%;
border-top:thin solid #990000;
}

#sectHead {
font-size:14pt;
#color:#990000;
line-height:150%;
border-bottom:3px double #000;
}

JEWELRY {
clear:both;
display:block;
width:500px;
padding:10px;
#border:thin solid #000;
}
THUMB {
float:left;
padding:10px;
}
NAME {
margin-top:10px;
font-size:14pt;
color:#990000;
line-height:150%;
display:block;
}
LENGTH {
display:block;
}
BUYME {
display:block;
}

This issue has been bothering me for quite some time. I will be quite happy to hear any ideas. Thanks!

sticks464 · Joined: 31 Dec 2006 Posts: 1283

To alleviate a lot of problems with backward and forward compatibility there needs to be a doctype and character set declared for each page
Code: Make this the very first line of the html code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The character set meta declaration goes as the first line after the opening <head> tag
Code: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
This tells all browsers what standards to use to display the page content.

Consider using something like Lightbox http://www.huddletogether.com/projects/lightbox2/ to display your large images instead of new pages or tabs.