Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old September 14th, 2006, 05:37 PM
Registered User
 
Join Date: Sep 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Background Image problem in DIV tag.

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


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



            </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.
  #2 (permalink)  
Old September 14th, 2006, 05:48 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #3 (permalink)  
Old September 14th, 2006, 06:09 PM
Registered User
 
Join Date: Sep 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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



  #4 (permalink)  
Old September 14th, 2006, 06:09 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #5 (permalink)  
Old September 14th, 2006, 06:18 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #6 (permalink)  
Old September 15th, 2006, 02:04 AM
Registered User
 
Join Date: Sep 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

  #7 (permalink)  
Old September 15th, 2006, 03:02 AM
Registered User
 
Join Date: Sep 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.



Similar Threads
Thread Thread Starter Forum Replies Last Post
Content page DIV tag problem msbsam ASP.NET 2.0 Professional 0 September 19th, 2008 12:12 AM
IE6 image background problem nasirmunir CSS Cascading Style Sheets 3 September 2nd, 2008 03:50 AM
background image width through CSS problem inOpera iamrakesh22 CSS Cascading Style Sheets 0 May 31st, 2007 06:09 AM
problem with swapping image into a div wilfordbrimley Javascript How-To 1 April 8th, 2006 04:52 PM
background image for <div> anshul CSS Cascading Style Sheets 4 May 16th, 2005 11:00 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.