View Full Version : Column Expanding when image clicked.

11-26-2008, 02:06 AM
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 (http://www.pmcs-icap.com/home.php)

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 (http://www.pmcs-icap.com/pmcs-icap-purchase-forms.php)

11-26-2008, 02:39 AM
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:

#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.

11-26-2008, 04:02 AM
hmmm, I noticed if I removed the overflow: auto on the outer container bodycontainer it stops happening, but then my background image stops repeating


11-26-2008, 08:27 AM
Here is a simple fix


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

11-26-2008, 02:06 PM
Awesome, that worked perfectly. So what was causing it? I am not familiar with Outline.

11-26-2008, 02:23 PM
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

11-26-2008, 03:23 PM
Man, if everyone in ever forum was as helpful as you. I sincerely appreciate you taking the time to help and explain the issue.