SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV background image problem !

    Hi all,

    I would really appreciate somebodies help.

    Im trying to created some nested DIV tags that have a backgroung image repeating along the Y axis.

    It all works fine in Firefox and Opera but IE6 makes the images appear as if they have been move downwards slightly outside the DIV tags.

    Heres the link to my test page:
    http://agderposten.mindup.no/test/newlayout_test.html

    CSS file:
    http://agderposten.mindup.no/test/layout.css


    Code:
    Heres my HTML code:
    -------------------------------
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    
    <title>AgderPosten</title>
    
    <style type="text/css">
        @import "all.css"; /* just some basic formatting, no layout stuff */
    </style>
    
    <!-- CSS styles to define layout -->
    
    <link href="layout.css" rel="stylesheet" type="text/css" ></link>
    <link href="styles.css" rel="stylesheet" type="text/css" ></link>
    <link href="complex_vnav.css" rel="stylesheet" type="text/css" ></link>
    
    </head>
    
    <body>
    
    <div id="frame">
    <!-- Content Header goes here -->
        <div id="contentheader">
        
            <img alt=""  src="images/morotilmobil.jpg" width="513" height="30"></img>    
            
        </div>
            
        
    <!-- Left Column goes here -->
        
        <div id="contentleft">
        
            <img alt=""  src="images/ringetoner.jpg" width="250" height="20"></img>
                <!-- Left Menu goes here -->
                <div class="vnav">
                
                    <ul>
                        <li><a href="#">REALTONES</a></li>
                        <li><a href="#">SOUND A LIKES</a></li>
                        <li><a href="#">POLYPHONIC</a></li>
                    </ul>
                    
                </div>
                
                <div id="boxframe">
                
                <div id="boxheader"><img alt=""  src="images/top_10_norge.jpg" width="250" height="20"></img></div>
                
                <div id="box">
                
                <!-- Top 10 Norge DataGrid -->
                
                </div>
                
                <div id="footer"><img alt=""  src="images/content_footer.jpg" width="250" height="10"></img></div>
                
                </div>
                
        </div>
        
    <!-- Middle Column goes here -->
    
        <div id="contentcenter">
    
            <img alt=""  src="images/bilder.jpg" width="250" height="20"></img>
                <!-- Middle Menu goes here -->
                <div class="vnav2">
                
                    <ul>
                        <li><a href="#">VIDEO <span class="kommersnart">- KOMMER SNART </span></a></li>
                        <li><a href="#">BILDER <span class="kommersnart">- KOMMER SNART</span></a></li>
                        <li><a href="#">ANIMASJONER <span class="kommersnart">- KOMMER SNART</span></a></li>
                    </ul>
                    
                </div>
                
                <div id="boxframe">
                
                <div id="boxheader"><img alt=""  src="images/uk_top_10.jpg" width="250" height="20"></img></div>
                
                <div id="box">
                
                <!-- Top 10 UK DataGrid -->
                
                </div>
                
                <div id="footer"><img alt=""  src="images/content_footer.jpg" width="250" height="10"></img></div>
                
                </div>
                
    
        </div>
        
    <!-- Right Column goes here -->
    
        <div id="contentright">
        
            <img alt=""  src="images/spill.jpg" width="250" height="20">
                <!-- Right Menu goes here -->
                <div class="vnav3">
                
                    <ul>
                        <li><a href="#">NYHETER <span class="kommersnart">- KOMMER SNART</span></a></li>
                        <li><a href="#">CLASSICS <span class="kommersnart">- KOMMER SNART</span> </a></li>
                        <li><a href="#">VIS ALT <span class="kommersnart">- KOMMER SNART</span></a></li>
                    </ul>
                    
                </div>
                
                
                <div id="boxframe" >
                
                <div id="boxheader"><img alt=""  src="images/login.jpg" width="250" height="20"></img></div>
                
                <div id="box2" >
                <!-- Login Control -->
                
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td width="10">&nbsp;</td>
                            <td width="140" class="loginboxtable">Mobilenummer:</td>
                            <td width="100"><input name="textfield" type="text" class="loginboxinputbox" ></input></td>
                          </tr>
                          <tr>
                                <td width="10">&nbsp;</td>
                            <td width="140" class="loginboxtable">Passord:</td>
                            <td width="100"><input name="textfield2" type="text" class="loginboxinputbox" ></input></td>
                          </tr>
                        <tr>
                                <td colspan="3">
                                <div align="center">
                                    <img alt=""  src="images/registrer.gif" width="70" height="20"></img>
                                    <img alt=""  src="images/logginn.gif" width="70" height="20"></img>
                                </div>
                            </td>
                        </tr>
                      </table>
                    
                
                </div>
                
                <div id="footer"  ><img alt=""  src="images/content_footer.jpg" width="250" height="10"></img></div>
                
                </div>
                
                
                
                <div id="boxframe">
                
                <div id="boxheader"><img alt=""  src="images/search.jpg" width="250" height="20"></img></div>
                
                <div id="box2">
                
                <!-- Search Control -->
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td width="10">&nbsp;</td>
                        <td width="35" class="loginboxtable">S&oslash;k:</td>
                        <td width="145"><input name="textfield22" type="text" class="searchinputbox" ></input></td>
                        <td width="5">&nbsp;</td>
                        <td width="50"><img alt=""  src="images/search.gif" width="50" height="20"></img></td>
                      </tr>
                </table>
                
                </div>
                
                <div id="footer"><img alt=""  src="images/content_footer.jpg" width="250" height="10"></img></div>
                
                </div>
                
                
                
                <div id="boxframe">
                
                <div id="boxheader"><img alt=""  src="images/category.jpg" width="250" height="20"></img></div>
                
                <div id="box2">
                
                <!-- Category Control -->
                
                </div>
                
                <div id="footer"><img alt=""  src="images/content_footer.jpg" width="250" height="10"></img></div>
                
                </div>
    
        </div>
        
        <br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    
    </div>
    
    </body>
    </html>
    
    --------------------------------------------
    
    Here is my CSS code:
    -------------------------------------------
    
    /* CSS Document */
    
        
        body {
            text-align:center;
            background-color:#FFFFFF
            }
            
        
        #container {
            align:center;
            width:750px;
            margin-right:auto;
            margin-left:auto;
            margin-top:10px;
            padding:0px;
            text-align:left;
            }
            
            
        #leftside {
            width:500px;
            padding:0px;
            float:left;
            background:#fff;
            
            }
            
        #mainContent {
            padding:0px;
            background:#fff;
        
        }
    
        #mainContentLeft {
            width:250px;
            padding:0px;
            background:#fff;
            float:left;
            }
            
        #top10Norge {
            padding:0px;
            background:#fff;
            padding-bottom:10px;
            height:auto
            }
            
        #top10NorgeContent {
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
    
            }
            
        #nyheter {
            padding:0px;
            background:#fff;
            padding-bottom:10px;
            height:auto
            }
            
        #nyheterContent {
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
    
            }
            
        #mainContentRight {
            width:250px;
            padding:0px;
            float:left;
            }
            
        #top10Uk {
            padding:0px;
            padding-bottom:10px;
            height:auto
            }
            
        #top10UkContent {
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            
            }
            
        #popPoly {
            padding:0px;
            padding-bottom:10px;
            height:auto
            }
            
        #popPolyContent {
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            
    
            }
            
        #mainContentFooter1 {
            width:500px;
            padding:0px;
            }
            
        #mainContentFooter2 {
            width:500px;
            padding:0px;
            }
        
        #rightside {
            width:250px;
            padding:0px;
            background:#fff;
            float:left;
            }
        
        
        #contentheader {
            background:#fff;
            padding-bottom:20px
            }
            
        #ringtoneMenu {
            width:250px;
            padding:0px;
            background:#fff;
            float:left;
            }
            
        #pictureMenu {
            width:250px;
            padding:0px;
            background:#fff;
            float:left;
            }
        
        #gamesMenu {
            width:250px;
            padding:0px;
            background:#fff;
            float:left;
            }
            
        #sitemap {
            width:250px;
            padding:0px;
            background:#fff;
            padding-bottom:10px
            }
            
        #sitemapTable {
            width:250px;
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            height:20px
            }
            
        #login {
            width:250px;
            padding:0px;
            background:#fff;
            padding-bottom:10px
            }
            
        #loginTable {
            width:250px;
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            height:auto
            }
            
        #search {
            width:250px;
            padding:0px;
            background:#fff;
            padding-bottom:10px
            }
            
        #searchTable {
            width:250px;
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            height:auto
            }
            
        #category {
            width:250px;
            padding:0px;
            background:#fff;
            padding-bottom:10px
            }
    
        #categoryTable {
            width:250px;
            background-repeat:repeat-y;
            background-image:url(images/content_back_white2.gif);
            height:20px
            }
            
        
            
            
        p,h1,pre {
            margin:0px 10px 10px 10px;
            }
            
    
    -------------------------------------------------

    I hope someone can help me as i can not figure this out at all.

    Thank you in advance.

    Jonathan.

  2. #2
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried to specify
    background-position: top left
    ?
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the reply,

    Yeah i tried that, it didnt work.

    Im still baffled??

    Any other ideas anyone.

    JC


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •