Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #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.
Reply With Quote
  #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
Reply With Quote
  #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



Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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

Reply With Quote
  #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.

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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



All times are GMT -4. The time now is 06:51 AM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.