a br {display: none;}

which does the work.

Thanks for your help.

The result of the forum search topic all discuss about images of static areas of the pages like Menu etc. my requirement was on the dynamic content, where the pics are different for each post. The current code I've in place addresses the need of each post. All I've to do is to give links to 2 images. It gets it working and I just need to get that rollover image not change its position.

But if there is something specific in those discussions that I need to pay attention to, let me know.

Thanks for pointing it out.

Notice the "
" tag in between the "<img>" ...

should read:

Notice the "< br />" (with no space) tag in between the "<img>" ...

Your markup shows this:

<a>
<br />
<img width="333" height="500" src="http://farm4.static.flickr.com/3203/5754190922_c286d36764.jpg" class="nohover" />
<br />
<img width="333" height="500" src="http://farm6.static.flickr.com/5186/5754190102_871717fb24.jpg" class="hover" />
<br />
</a>

Notice the "
" tag in between the "<img>" tags and at the end of the second "img" tag. If you are adding them, that's your problem. If you are using the visual editor, then wp is adding them and you'll need to take them out yourself. To do this, click on the HTML tab (next to Visual) find and remove the "br" tags from your markup. Save.

If they're still being added by the software, a dirty workaround would be adding this to your CSS:

a br {display: none;}

See if that works.

I have a photo blog hosted by wordpress. my requirement was to show an image on mouse over event (rollover...whatever that is called). After some searching, found that blogs hosted by wordpress aren't allowed to use javascript, so with the help of some folks managed to get a small set of CSS code working to get the image rollover.

Code added to the template:

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

Code for each post which needs an image displayed when mouse-rollover-event happens:

< a href="link.html">
<img alt="image" src="images/image.png" class="nohover" />
<img alt="imagehover" src="images/image.png" class="hover" />
</a>

On blogger platform this works perfect. Here is an example page showing it working.

On a wordpress platform it works, but the resulting mouse over image changes its position. An example of that is here.

Any ideas on how to go about fixing this? I'm new to CSS, but will take any help I can get on this.

Thanks,
-Sudhi.