Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image overflowing container aty bottom of page

    Hi,

    For some reason the image at the bottom of this page (http://www.new.paintdiscounts.com.au/blitz.html) is flowing over the container.

    The only solution I have been able to find is to put overflow:scroll in the div.content section of my stylesheet. However, this leaves ugly scroll bars on the x and y axis inside the container... Any ideas?

    The HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name='Description' content='Maroubra NSW. Trained paint specialists. Free Computer colour matching. Servicing Retail, Trade and DIY.'/>
    <meta name='Keywords' content='paint, maroubra, accessories, brushes, discounts, rollers, ladders, stripper, paintbrushes, discount, waterproofing, sprayguns, exterior, sealer, undercoat, peeling, flaking, bubbles, varnish, lacquer, floor, clear, decking, estapol, weathershield, solaguard, dropsheets, canvas, sikkens, cabots, oldfields, extension, poles, tinting, interior, robertson, acrylmeric, permaplastik, selleys, roof paint, roof paint sydney, peelaway, zinsser, blitz, 123, peelstop, bin, coverstain, bullseye'/>
    <meta name='author' content='Russell Kempe'/>
    <title>Amazing Paints</title>
    </head>
    <link rel="stylesheet" type="text/css" href="wss2.css" />
    <body>
    <div id="header"><img src="http://www.paintdiscounts.com.au/new/amazbanner.jpg" alt="Amazing Paints banner" /></div>
    <div class="content">
    <ul id="nav">
    <li><a href="http://www.paintdiscounts.com.au/index.html">Home</a></li>
    <li><a href="http://www.paintdiscounts.com.au/brands.html">Brands</a></li>
    <li><a href="http://www.paintdiscounts.com.au/stores.html">Stores</a></li>
    <li><a href="http://www.paintdiscounts.com.au/specials.html">Specials</a></li>
    <li><a href="http://www.paintdiscounts.com.au/blitz.html">Blitz</a></li>
    <li><a href="http://www.new.paintdiscounts.com.au/contact.html">Contact</a></li>
    </ul><br />
    <h1>Blitz</h1>
    <p class="alignleft">Blitz produces a range of specialty prep coats for a wide variety of difficult surfaces such as previous gloss enamels, previous stains/varnishes, pvc, aluminium, tiles and most other substrates.<br /></p>
    <img src="http://www.paintdiscounts.com.au/images/maxi.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    <p class="alignleft">A multi purpose oil based primer/sealer/undercoat that can be used on hard plaster, wallboard, fibreglass, new wood, masonite and many other surfaces.<br /><br />
    Glossy surfaces can be primed with minimal preparation apart from cleaning and light sanding.<br /><br />
    Superior adhesion to gloss enamel, ceramic tile, glass and laminate.<br /><br />
    Maxiseal also seals water marks, graffiti, smoke stains, nicotine, tannin and many other stains.<br /><br />
    Can be recoated in 60 minutes with either acrylic or enamel topcoats.</p>
    <img src="http://www.paintdiscounts.com.au/images/total.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    <p class="alignleft" style="border-top: 2px dotted black; ">A multi purpose water based primer/sealer/undercoat that can be used on wallboard, new wood, masonite, mdf, masonry, cement, brick and most other substrates.<br /><br />
    Glossy surfaces can be primed with minimal surface preparation apart from cleaning, e.g. old gloss enamel paint, ceramic tile, galvanised iron, laminate etc...<br /><br />
    Common household stains such as hand marks, graffiti and smoke stains can be sealed to prevent bleed into the finish coat.<br /><br />
    Can be recoated in 2 hours with either acrylic or enamel topcoats.</p>
    <img src="http://www.paintdiscounts.com.au/images/quick.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    <p class="alignleft" style="border-top: 2px dotted black">A multi purpose methylated spirits based primer/sealer/undercoat that can be used on old gloss enamel, varnishes, plaster, wallboard, aluminium, mdf and raw timber.<br /><br />
    Blocks most kinds of stains; water marks, smoke stains, crayon, lipstick, kitchen grime, tannin stains and prevents bleed through into the finish coat.<br /><br />
    Can be recoated in 30 minutes with either acrylic or enamel topcoats.</p>
    <img src="http://www.paintdiscounts.com.au/images/clear.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    <p class="alignleft" style="border-top: 2px dotted black; ">A multi purpose water based product that can be used as a clear gloss finish coat or as a sealer/binder.<br /><br />
    Provides a durable gloss finish coat that is suitable for both interior and exterior surfaces and has high water and weather resistance.<br /><br />
    When thinned down with water, can be used as a highly effective surface binder on difficult surfaces such as crumbly masonry or weak and powdery surfaces.<br /><br />
    Can be recoated in two hours with either acrylic or enamel topcoats.</p>
    <img src="http://www.paintdiscounts.com.au/images/opti.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    <p class="alignleft" style="border-top: 2px dotted black; ">A water based anti-mould finish designed specifically for wet areas such as bathrooms, kitchens and laundries to provide a moisture and mould resistant finish.<br /><br />
    High adhesion to most architectural surfaces without the need of an undercoat.</p>
    </div>
    </body>
    </html>
    The CSS:


    Code:
    html {
    overflow-y:scroll;
    }
    body {
    background-color:#D0D0D0;
    }
    h1 {
    text-decoration:underline;
    }
    h2 {
    text-align:center;
    }
    p {
    text-align:center;
    padding: 0px 3px 0px;
    font-weight:bold;
    }
    #header {
    width:750px;
    margin:0px auto;
    }
    div.content {
    background-color:#E0E0E0;
    margin:0px auto;
    width:746px;
    border:2px solid black;
    text-align:center;
    }
    #nav li.last{
    border-right:none;
    }
    ul#nav {
    width:750px;
    margin:0px 0px 0px -40px;
    }
    #nav li
    {
    display:inline;
    float:left;
    list-style-type:none;
    margin-top:0px;
    border-bottom:2px solid black;
    border-right:2px solid black;
    }
    #nav a:link
    {
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#B0B0B0;
    width:118.7px;
    text-align:center;
    padding:2px;
    text-decoration:none;
    text-transform:uppercase;
    }
    #nav a:hover,a:active
    {
    background-color:#E0E0E0;
    }
    #nav a:visited
    {
    background-color:#E0E0E0;
    }
    table {
    width:250px;
    margin:0px auto;
    }
    .textfloat {
    float:left;
    width:175px;
    }
    .textfloat2 {
    float:right;
    width:175px;
    }
    img.floatLeft { 
    float:left; 
    margin:3px; 
    }
    p.alignleft {
    text-align:left;
    }
    Last edited by cheesesailor; 08-27-2012 at 10:38 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,315
    Thanks
    23
    Thanked 612 Times in 611 Posts
    I used FF v14 and IE v8 and do not see your problem. Everything looks good.

    This for your information:
    With your DOCTYPE the img tag should be self closed and not need an end tag so
    Code:
    <img src="http://www.paintdiscounts.com.au/images/maxi.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    S/B:
    Code:
    <img src="http://www.paintdiscounts.com.au/images/maxi.jpg" class="floatLeft" alt="Sorry, this image did not display correctly." />
    The scroll bar appears because you need some padding on your right and left side of div content and that's where the overfow should go.
    Code:
    div.content {
    background-color:#E0E0E0;
    margin:0px auto;
    width:746px;
    border:2px solid black;
    text-align:center;
    padding: 0 4px 45px 4px;
    overflow-y: auto;  // only if needed
    }

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I used FF v14 and IE v8 and do not see your problem. Everything looks good.
    This may have been because I added padding to the bottom of the content div, perhaps before your reply. This fixed the problem but I thought was probably not the best way to go about it.

    Quote Originally Posted by sunfighter View Post
    This for your information:
    With your DOCTYPE the img tag should be self closed and not need an end tag so
    Code:
    <img src="http://www.paintdiscounts.com.au/images/maxi.jpg" class="floatLeft" alt="Sorry, this image did not display correctly."></img>
    S/B:
    Code:
    <img src="http://www.paintdiscounts.com.au/images/maxi.jpg" class="floatLeft" alt="Sorry, this image did not display correctly." />
    I did this because I thought the W3c validator was picking this up as an error, but after self closing each image and revalidating, this wasn't the case.

    Quote Originally Posted by sunfighter View Post
    The scroll bar appears because you need some padding on your right and left side of div content and that's where the overfow should go.
    Code:
    div.content {
    background-color:#E0E0E0;
    margin:0px auto;
    width:746px;
    border:2px solid black;
    text-align:center;
    padding: 0 4px 45px 4px;
    overflow-y: auto;  // only if needed
    }
    Thank you.

    However, this solution makes my container wider than my header as you can see in the attachment.

    I was able to fix it by changing overflow: to hidden.
    Attached Thumbnails Attached Thumbnails Image overflowing container aty bottom of page-scrn.jpg  

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,315
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Glad you solved it.


  •  

    Posting Permissions

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