I have developed a site that i am pretty happy with.
My resolution is 1280x1024 and everything is great.
As expected at 1024x768 not everything will fit on the screen, however the problem is there is no scrollbar at the botton to compensate.
What have i done wrong to cause this.
The other problem i am having is with internet explorer. All looks fine in firefox and safari but ie goes crazy. If someone could point out my problems i would be mighty gratefull.
http://edawson.co.uk/index2.phpHTML
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="stylesheet/design.css" type="text/css">
<script type="text/javascript" src="javascript/effect.js"></script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/src/scriptaculous.js?load=effects,dragdrop"></script>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="Javascript/JScript.js"></script>
</head>
<body>
<div id="wrapper">
<div id="bordertop">
</div>
<div id="bordermiddle">
<div id="header" style=" position: relative; left: 3.5%; bottom: 20px; width: 96.5%; height: 200px;">
</div>
<div id="menu" style="position: relative; left: 3%; bottom: 20px; width: 96.5%">
<a href ="http://www.google.com"><img src="images/images/home_btn.png" border="0" alt="Home"/></a><a href ="java script:artists();"><img src="images/images/artists_btn.png" border="0" alt="Artists" /></a><a href ="index2.php"><img src="images/images/shop_btn.png" border="0" alt="Shop" /></a><a href ="java script:accordion();"><img src="images/images/events_btn.png" border="0" alt="Events" /></a><a href ="/mp3/mp3player.swf" onclick="loadSWF(this.href); return false;"><img src="images/images/listen_btn.png" border="0" alt="Listen" /></a><a href ="http://www.google.com"><img src="images/images/contact_btn.png" border="0" alt="Contact" /></a>
</div>
<div id="content" style="position:relative; left:3%;">
<div class="item" id="WaxhedsCd">
<img style="float: left; padding: 3px 3px 0px 3px;" id="item1" src="images/img.jpg">
<br/>
Ill Padrino Single<br/>
£3.99
</div>
<div class="item" id="KoasteCd" style="position:relative; top:90px; right:209px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/koastecd.jpg">
<br/>
Koaste Single<br/>
£3.99
</div>
<div class="item" id="WaxhedsTee" style="position:relative; right:75px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/waxtee.png">
<br/>
Waxheds Tee<br/>
£8.99
</div>
<div class="item" id="SmashingCap" style="position:relative; top:175px; right:254px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/smashcap.png">
<br/>
Smashing Enterprises Cap<br/>
£6.99
</div>
<div class="item" id="WaxCup" style="position:relative; top:87px; right:522px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/waxcup.png">
<br/>
Waxheds Cup<br/>
£4.99
</div>
<div class="item" id="SmashingPillow" style="position:relative; top:90px; right:1px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/smashpillow.png">
<br/>
Smashing Enterprises Pillow<br/>
£7.99
</div>
<div class="item" id="OlliePCd" style="position:relative; top:180px; right:285px;">
<img style="float: left; padding: 3px 3px 0px 3px;" src="images/olliecd.png">
<br/>
Ollie P Single<br/>
£4.99
</div>
<div class="cart">
<img id="cart_img" style="position:relative; bottom:80px;" src="images/cart.gif" style="float:left"> <label id="titles" style="position:relative; bottom:90px;">Drag your items here...</label>
<div id="split_line" style="position:relative; bottom:95px;"></div>
<div id="items" style="position:relative; bottom:95px; width:215;height:300">
</div>
</div>
</div>
</div>
<div id="borderbottom">
</div>
</div>
</body>
<script>
makeDraggableItems();
</script>
</html>
CSS for site structure
CODE
body
{
margin: 0;
background: #211d1d url(images/bg.jpg) repeat-x 0% 0%;
letter-spacing: 1px;
color: #1c3b5a;
}
#wrapper
{
position: absolute; top: 10px; right: 80px;
width: 1050px;
}
#bordertop
{
height: 52px;
background: url(images/bordertop.gif) no-repeat 0% 0%;
}
#bordermiddle
{
background: url(images/middle2.gif) repeat-y 0% 0%;
}
#borderbottom
{
height: 100px;
background: url(images/borderbottom2.gif) no-repeat 0% 0%;
}
#content
{
font-size:x-large;
color:White;
letter-spacing: 1px;
font: arial;
font-size:medium
}
#header
{
height: 200px;
background: url(images/smashbanner2.png) no-repeat 0% 0%;
z-index:1;
}
#menu
{
height: 81px;
width: 882px;
float: left;
z-index:1;
}
Many thanks
Jibber4568
This post has been edited by jibber4568: 28 Apr, 2008 - 01:50 PM