Mon, 2007-09-03 11:40
Hi,
Trying to float and border a few images using css. some images are floated right, and some left, amongst some paragraphs.
the code im using is basically this -
HTML -
(or "picleft")
CSS-
.picright {
float:right;
border:0.3em #3F341D solid;
margin:1em 0em 1em 2em;
clear:left;
}
.picleft {
float:left;
border:0.3em #3F341D solid;
margin:1em 2em 1em 2.3em;
clear:right;
}
The issue that I am having is there is a gap between the bottom of the image and the border.
I have searched for a solution with no progress.
My website can be viewed here - http://www.batemansbayosteopathy.com.au/staff.php
to see the issue in question.
How do I get rid of the space at the bottom of the images?
Thanks,
Lee
Mon, 2007-09-03 13:13
#1
vandozza wrote:
vandozza wrote:
HTML -
(or "picleft")
First, instead of that, why not just do
Is there really a need for that extra div?
That should take care of the issue.
The reason it is happening is because <img> is an inline element and therefore it makes room for descenders. In other words it is vertical-align: baseline. So, you could also fix your issue (although less desirable) by placing this in your CSS:
img {vertical-align:bottom;}
or this:
img {display:block;}
Mon, 2007-09-03 14:31
#2
Thanks Triumph That
Thanks Triumph
That completely solved the issue, I actually didn't realise that I could place the class="x" within the image tag.
I have been having difficulty with this for 2 days, and its such a simple fix!
Thanks again!
Mon, 2007-09-03 14:38
#3
Glad to help. A good
Glad to help. :thumbsup:
A good rule of thumb when using CSS is "entities should not be multiplied beyond necessity".
In mathematics you should always simplify your fractions and in web design you should always simplify your markup and layout. Rid your pages of unnecessary DIVs and make use of semantic tags where possible.