Welcome to Dream.In.Code
Getting Help is Easy!

Join 86,257 Programmers. There are 2,043 online right now! Ask your question and get quick answers from Dream.In.Code experts. Join the #1 programming help community on the internet! Registration is fast and FREE... Join Now!

Chat LIVE With a Expert
Powered by LivePerson.com

Register to Make This Box Go Away!

Where is my scrollbar?

 
Reply to this topicStart new topic

Where is my scrollbar?

jibber4568
post 28 Apr, 2008 - 01:49 PM
Post #1


New D.I.C Head

*
Joined: 11 Feb, 2008
Posts: 31



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.php

HTML

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">&nbsp;
       </div>
        <div id="bordermiddle">&nbsp;
        
            <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">&nbsp;
        </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
User is offlineProfile CardPM
Go to the top of the page
+Quote Post


girasquid
post 28 Apr, 2008 - 02:29 PM
Post #2


Barbarbar

Group Icon
Joined: 3 Oct, 2006
Posts: 953

I'm pretty sure it has to do with the fact that you are using position:absolute. By using absolute positioning, you break documents out of the normal 'flow' - which is why your scrollbar isn't getting created.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

jibber4568
post 28 Apr, 2008 - 03:26 PM
Post #3


New D.I.C Head

*
Joined: 11 Feb, 2008
Posts: 31

QUOTE(girasquid @ 28 Apr, 2008 - 02:29 PM) *

I'm pretty sure it has to do with the fact that you are using position:absolute. By using absolute positioning, you break documents out of the normal 'flow' - which is why your scrollbar isn't getting created.



Great!!! Thanks alot for that. Any idea why my sites all screwed up in explorer. Not talking about the javascript errors, more the layout, especially the bottom border
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 5/16/08 09:44AM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month