...

View Full Version : Column Expanding when image clicked.



dprichard
11-26-2008, 01: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)

Excavator
11-26-2008, 01: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.

dprichard
11-26-2008, 03: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

:S

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

a#namha{outline:none;}

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

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

abduraooft
11-26-2008, 01: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

dprichard
11-26-2008, 02: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum