www.webdeveloper.com
Results 1 to 4 of 4

Thread: Why are my images overflowing other elements?

  1. #1
    Join Date
    Mar 2010
    Posts
    701

    Why are my images overflowing other elements?

    http://linksku.com
    On the left sidebar, you'll notice that the image overlaps the blue border. I tried adding position:relative and display:block to everything, but it didn't work.

    Here's the code for that area.
    HTML Code:
          <li class="block"> 
           <div class="popular-post-widget"> 
            <div class="title">Popular Posts</div> 
            
                <ul class="popular"> 
                                <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4373"> 
                    
                    Fireplaces, Fireplaces with a water jacket, Boi                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by simonroyal2 in others" class="fadeThis" href="http://linksku.com/09/personal-loans-2"> 
                                    <span class="thumb"> 
                    <img src="http://linksku.com/wp-content/uploads/wp-post-thumbnail/images.jpg" alt="Personal Loans" /> 
                    </span> 
                    
                    Personal Loans                
                    <span class="gdsr"><span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4554"> 
                    
                    Bad Credit Loans- Quick Loans                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4560"> 
                    
                    Short term loans no credit check                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4565"> 
                    
                    Short term loans no credit check                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4556"> 
                    
                    Personal Loans                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4557"> 
                    
                    Study Abroad                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4555"> 
                    
                    Payday loans                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 60px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4369"> 
                    
                    Intro Web Dizajn Studio                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 42px;"></span></span>                </a></li> 
                                  <li> 
                    <a title="Posted by Anonymous in links" class="fadeThis" href="http://linksku.com/?p=4387"> 
                    
                    Forex Managed Accounts | Forex Managed Funds                
                    <span style="display:block; text-align:left; padding: 0; margin: 0; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png); height: 12px; width: 60px;"><span style="display:block; background: url(http://linksku.com/wp-content/plugins/gd-star-rating/stars/oxygen/stars12.png) bottom left; padding: 0; margin: 0; height: 12px; width: 42px;"></span></span>                </a></li> 
                              </ul> 
            </div> 
           </li>

  2. #2
    Join Date
    Sep 2010
    Location
    Melbourne, Australia - on loan from London, UK
    Posts
    56
    In your html, see the lines:

    Code:
    <span class="thumb">
    <img src="./LinksKu Share links online_files/images.jpg" alt="Personal Loans"></span>
    Just add a div wrapper like this and it should be ok...

    Code:
    <div><span class="thumb">
    <img src="./LinksKu Share links online_files/images.jpg" alt="Personal Loans"></span>
    </div>

  3. #3
    Join Date
    Sep 2010
    Posts
    43
    Quote Originally Posted by pauledee View Post
    In your html, see the lines:

    Code:
    <span class="thumb">
    <img src="./LinksKu Share links online_files/images.jpg" alt="Personal Loans"></span>
    Just add a div wrapper like this and it should be ok...

    Code:
    <div><span class="thumb">
    <img src="./LinksKu Share links online_files/images.jpg" alt="Personal Loans"></span>
    </div>
    Being that the span tags are within anchor tags, the divs would cause the page to not validate.

    If you were to add this to #sidebar .block ul.popular li (style.php:306):

    Code:
    float:left;
    width:100%;
    would probably do the trick. This would however cause the list item height to not be consistant. For consistency, your only option would be to reduce the size of the images.

    Hope this helps

  4. #4
    Join Date
    Mar 2010
    Posts
    701
    Thanks!!!

    This worked perfectly!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles