Question about images in opera/mozilla 1

[phrozt]

I'm trying to get images to line up decent by each other, and they look just fine in IE, but opera/mozilla put a lot of space between them which screws up the whole rest of the page.

http://www.rabbitstop.com/indexcss.htm

 

[gohankid77]

I'm using IE too and it looks fine. I think your problem may be the fact that you have <div>s placed right after your image. I believe this would add an extra line after the image.

"Ships that pass in the night and speak each other in passing;
Only a signal shown and a distant voice in the darkness;
So on the ocean of life we pass and speak one another,
Only a look and a voice; then darkness again and a silence."
- Henry Wadsworth Longfellow

 

[Vragabond]

Hi, me again. Your problem is associated with the whitespace which is usually an IE problem, this time however it seem to have transcended into other browsers. If you are putting up inline elements (which <a> and <img> are) the whitespace that is part of your code identation may or may not be correctly interpreted on the webpage. In your case, Mozilla and Opera fail. Therefore remove the identation in that menu and put all the <a> tags in a long continous line:

<div id="menubar"><a href="/Merchant2/merchant.mvc"><img src="[URL unfurl="true"]http://www.rabbitstop.com/Merchant2/graphics/shoppingnavaqua.gif"[/URL] alt="Shopping" width="100" height="30"><div>Clicking on the Shopping Button will take you into that part of our site. Once there you can view our rabbit products, add them to your cart and make your purchase. It is just that easy!</div></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=Food" acceskey="f"><img src="[URL unfurl="true"]http://www.rabbitstop.com/Merchant2/graphics/foodtreatsnavblue.gif"[/URL] alt="Food &amp; Treats" width="82" height="30"><div>Clicking the Food &amp; Treats Button will take you to that category of our site.  We carry a wide variety of the best rabbit foods available for your rabbit.</div></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=2Habitats" accesskey="h"><img src="[URL unfurl="true"]http://www.rabbitstop.com/Merchant2/graphics/homescarriersblue.gif"[/URL] alt="Homes and Carriers" width="82" height="30" ><div>The Rabbit Homes &amp; Carriers Button will escort you to a list of some of the finest Rabbit Homes, Carriers, and Playpens your rabbit friend could imagine.</div></a>...

I know, it looks ugly, but is effective. Incidentally, your overflow: scroll; property in your body tag messes up the whole page for me in Mozilla and Opera. Since overflow is defaulted to scroll or auto in all the browsers you should remove that property.

 

[ChrisHunt]

I suspect that the real problem is the <div>s embedded in your line:

<div id="menubar"><a href="/Merchant2/merchant.mvc"><img src="[URL unfurl="true"]http://www.rabbitstop.com/Merchant2/graphics/shoppingnavaqua.gif"[/URL] alt="Shopping" width="100" height="30">[b]<div>[/b]Clicking on the Shopping Button will take you into that part of our site. Once there you can view our rabbit products, add them to your cart and make your purchase. It is just that easy![b]</div>[/b]</a>...

Try changing these to <span>s (you'll need to change your CSS file too) to see if it helps.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk