Background Image problem in DIV tag.

cumminsj · September 14th, 2006, 05:37 PM

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

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>

<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">

    <div id="contentheader">

        <img alt="" src="images/morotilmobil.jpg" width="513" height="30"></img>

    </div>

    <div id="contentleft">

        <img alt="" src="images/ringetoner.jpg" width="250" height="20"></img>

            <div class="vnav">

                [list]
                    <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">

            </div>

            <div id="footer"><img alt="" src="images/content_footer.jpg" width="250" height="10"></img></div>

            </div>

    </div>

    <div id="contentcenter">

        <img alt="" src="images/bilder.jpg" width="250" height="20"></img>

            <div class="vnav2">

                [list]
                    <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">

            </div>

            <div id="footer"><img alt="" src="images/content_footer.jpg" width="250" height="10"></img></div>

            </div>

    </div>

    <div id="contentright">

        <img alt="" src="images/spill.jpg" width="250" height="20">

            <div class="vnav3">

                [list]
                    <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" >

                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td width="10"> </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"> </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">

            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="10"> </td>
                    <td width="35" class="loginboxtable">Søk:</td>
                    <td width="145"><input name="textfield22" type="text" class="searchinputbox" ></input></td>
                    <td width="5"> </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">

            </div>

            <div id="footer"><img alt="" src="images/content_footer.jpg" width="250" height="10"></img></div>

            </div>

    </div>

    <br clear="all" />

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

meow · September 14th, 2006, 05:48 PM

Hi! :)

Could you please post the URL to a sample page instead? It's a little hard to visualize the effect you are after without the actual image(s). Besides, more people will be try to help if they don't have to go through copying and pasting your code.

<ADDED>
Darn - you already did all that. It's me who is a sloppy reader. Please excuse me.

--
http://yupapa.com

cumminsj · September 14th, 2006, 06:09 PM

Hi i added some links to give a visual of this problem.

The image is a 1px high image that repeats along the y axis.

I added some content between these DIV tags just so they expand.
You can see in IE6 that there is white space above and below the repeated image. Also in the first content box the background does not appear at all.

In Opera and Firefox the background image lines up fine but again the backgroung image is missing from the first content box.

Any ideas??

Thanks

Jonathan

meow · September 14th, 2006, 06:09 PM

OK, I really tried to be quick to make up for my rudeness...

It's the same problem as used to cause gaps with images in tables.
http://www.htmlhelp.com/faq/html/ima...#image-nospace
The solution offered there works. A somewhat more handy and neat solution is to make the affected images 'display: block' and the unwanted space is gone.

--
http://yupapa.com

meow · September 14th, 2006, 06:18 PM

In case I wasn't clear - the problem isn't the background image but the inline images and the whitespace in the code.

--
http://yupapa.com

cumminsj · September 15th, 2006, 02:04 AM

Hi meow,

Thanks for your replies.

I set:

img {display:block}

That certainly fixed the bug in IE6 and it still works in Opera but now something very strange has happend in Firefox.

Can you take a look:

http://agderposten.mindup.no/test/newlayout_test.html

Thanks

cumminsj · September 15th, 2006, 03:02 AM

Thanks meow.

I now understand your advice properly and have figured out a solution.!

If i created a DIV tag surrounding the header images of my content boxes and set display:block.
the problem went away!

Thank you so much.