I can’t get the Better Business Bureau’s image at the bottom of this page to completely show. http://www.utahlibertylaw.com/about-us/ I’ve tried adjusting the height property and played with the padding and margin some but for some reason it isn’t showing.
<div style=“float: right; padding-right: 29px; margin-top: 0px;”><a id=“bbblink” class=“sevtbul” style=“display: block; position: relative; overflow:hidden; width: 80px; height: 160px; margin: 0px; padding: 0px;” title=“Liberty Law Group, PLLC, Attorneys, American Fork, UT” href=“http://www.bbb.org/utah/business-reviews/attorneys/liberty-law-group-pllc-in-american-fork-ut-22310774#bbblogo”><img id=“bbblinkimg” style=“padding: 0px; border: none;” src=“http://seal-utah.bbb.org/logo/sevtbul/liberty-law-group-pllc-22310774.png” alt=“Liberty Law Group, PLLC, Attorneys, American Fork, UT” width=“160” height=“130” /></a>
Above is your code see the bold changes if you make those you will be able to see the whole image.Try and see if that helps.
Yea I tried that and I thought it would be the solution earlier when i was trying to fix it but it’s a no go. The funny thing is that when the page initially loads the image show’s correctly but then quickly gets cut off.
[FONT=Verdana]I’m getting tired, so I might be misreading this, but it looks to me as if your problem lies here:
<a id="bbblink" class="sevtbul" href="http://www.bbb.org/utah/business-reviews/attorneys/liberty-law-group-pllc-in-american-fork-ut-22310774#bbblogo" title="Liberty Law Group, PLLC, Attorneys, American Fork, UT" style="display: block; position: relative; overflow:hidden; width: 80px; height: 160px; margin: 0px; padding: 0px;">
You’ve set the width to just 80px and overflow to hidden.[/FONT]
<div style=“float: right; padding-right: 29px; margin-top: 0px;height: 160px;”> Try putting the bold code in the div.
Well, I believe I’ve tried all those solutions before and I just tried them again, but still the problem won’t go away. It seems like it s simple problem to fix, but I don’t know what the issue is.
The problem is the margin-top is pushing the image below the height of the container. The easy fix (note I didn’t say the right fix) would be to change the height of the a#bbblink.sevtbal, a#bbblink.rbvtbal, a#bbblink.sevtbul, a#bbblink.rbvtbul line from 132 to 148.
A better approach would be to remove the margins from the #right img line and put it on the div which the bbblink link is placed into (though you should place those inline styles into the css file for easier maintenance).
Well, the simple approached failed by changing the height to 148px so maybe I’ll try the better solution now.
I tried both but still a no go.
It works for me if I change the height to 148px (blue), but the alignment is also better if the top margin is removed (red):
a#bbblink.sevtbal, a#bbblink.rbvtbal, a#bbblink.sevtbul, a#bbblink.rbvtbul {
width: 80px;
height: [COLOR="#0000CD"]148px[/COLOR];
}
#right img {
margin: 13px;
border: 2px solid #999;
[COLOR="#FF0000"]margin-top: 18px;[/COLOR]
}
How did it not work? What did you see that didn’t look right?
I did both methods via the inspect elements functionality in Chrome and they worked fine.
OK, I just looked at your page again (sorry should have done so before posting previously…).
The problem now is your BBBIMG class. You don’t need it on the image. Remove it, then remove the margin-top: 3px on the class which will apply the 13px margin to the parent div, and it should all line up.
Just a friendly note - you’ve got a REAL mishmosh of css in there, and a lot you don’t really need. There’s a ton of inline css which should really only be used sparingly, and some styles which are overriding themselves. It might be a good idea to try and go through and simplify some of those styles - the more you use, the harder it is to control…