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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Column Expanding when image clicked.

    I have a site that I am having a really weird CSS issue with. At least I think it is a CSS issue. There is a large image on this page with NAHMA in the bottom right hand column. In firefox, when I click on the image the column jumps way down the page and opens up a scroll bar. I can't figure out for the life of me what is causing it.

    Problem Page

    Thank you so much to anyone who can help me with this. I have been pulling my hair out for like 2 hours trying to figure it out.

    Oh, by the way, this other page on the site is the only one on the site where it is not happening.

    Page where it is not happening

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello dprichard,
    I'm not sure what's happening but when I goto the page that's not doing it and use FireFox web developer to remove some content from your markup...as soon as the content is above the NAHMA image it does it again.


    Pretty sure this makes it stop:
    Code:
    #bodyright {
    	width: 341px;
    	height: auto;
    margin: 0 0 0 545px;
    	/**float: right;**/
    	padding-left: 25px;
    	padding-top: 15px;
    }
    But I'm still not seeing why it's doing it in the first place.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts
    hmmm, I noticed if I removed the overflow: auto on the outer container bodycontainer it stops happening, but then my background image stops repeating

    :S

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here is a simple fix
    Code:
    a#namha{outline:none;}
    Code:
    <a  id="namha" href="http://www.nahma.org/" target="_blank" title="National Affordable Housing Management Association" ><img border="0" src="images/coq.jpg" alt="COQ"/></a>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Awesome, that worked perfectly. So what was causing it? I am not familiar with Outline.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    When the focus is on the link, the browser automatically puts an outline around the link area as an aid to accessibility. Your right column may have the exact width which is equal to the sum of the width of that image and the inner paddings. So, when we click on that link, the width of the outline(I think, it's around 1px ) is also getting added to the effective width of the content. As a result, it's pushed down.

    btw, you may avoid the issue by a minor change in entire design. ie, to make a 2-column layout, there is no need to apply floats and widths to both columns. Instead, just apply a float and width to either of one(it's easy to apply for the smaller one) and then apply an adequate margin for the other one.

    Check http://bonrouge.com/2c-hf-fluid.php
    Last edited by abduraooft; 11-26-2008 at 01:26 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    dprichard (11-26-2008)

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Man, if everyone in ever forum was as helpful as you. I sincerely appreciate you taking the time to help and explain the issue.


  •  

    Posting Permissions

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