PDA

View Full Version : how to avoid extra space between two images in a div


indianleo
01-30-2010, 03:29 PM
how to avoid extra space between two images in a div

<div>
<img src="img1.jpg" alt="" border="0" />
<img src="img2.jpg" alt="" border="0" />
</div>

I am getting extra space between these two images in all browser

indianleo
01-30-2010, 04:52 PM
Hello Friends how to build a accordian menu with ease effect and the bg of hiiden content should be transparent like 40% opacity

tux
01-30-2010, 04:58 PM
Try this....

<div>
<img src="img1.jpg" alt="" border="0" /><img src="img2.jpg" alt="" border="0" />
</div>

gentleone
01-30-2010, 05:08 PM
It has also to do with the default margin on the img tag. So make a CSS rule in your stylesheet like this:
img {border:0;margin:0}

I use always at the beginning of my stylesheet a reset CSS (from CSS guru Erik Meyer) to zero out all the default styling. You save with this already alot of hassle with figuring out little issues like this.


/* BEGIN RESET CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi g,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,s mall,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,u l,fieldset,form,label,legend,table,caption,tbody,t foot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left
}

table {
border-collapse: collapse;
border-spacing: 0
}

ol,ul {
list-style: none
}

q:before,q:after,blockquote:before,blockquote:afte r {
content: ""
}
/* END RESET CSS */

tux
01-30-2010, 05:19 PM
Thats a great tip Gentleone, I'd not heard of that before. I'll be using that in future.

Cheers.

indianleo
01-30-2010, 05:28 PM
<div>
<img src="img1.jpg" alt="" border="0" /><img src="img2.jpg" alt="" border="0" />
</div>

I tried this but it is still not working

gentleone
01-30-2010, 07:28 PM
Thats a great tip Gentleone, I'd not heard of that before. I'll be using that in future.

Cheers.

Your welcome, tux! :)

I saw that Eric Meyer has made an update of his reset CSS. Check his page:
http://meyerweb.com/eric/tools/css/reset/index.html

domedia
01-30-2010, 08:07 PM
<div>
<img src="img1.jpg" alt="" border="0" /><img src="img2.jpg" alt="" border="0" />
</div>

I tried this but it is still not working
It's because you're not following the advice that was given above 8)

tux
01-30-2010, 08:15 PM
<div>
<img src="img1.jpg" alt="" border="0" /><img src="img2.jpg" alt="" border="0" />
</div>

I tried this but it is still not working

Strange as I tested it in all my browsers and it worked.

You should take Gentleones advice and add his CSS rule. That should then sort it.