Hi List, I need to create custom borders around a photo whose bordered width can be 150 or 300px. I am trying to do this so as to make it easy for a CMS programmer to use my code, so that all he has to do is say
div class="photo150" or div class="photo300" and everything else is done by elements inside the div and by my defined styles. After much trial and error I created a layout that works on IE6/Mozilla and Safari. You can see it here - HTML: http://lnataraj.tripod.com/xhtml_css/photo_w_border_var_width2.html CSS: http://lnataraj.tripod.com/xhtml_css/style.css ...... sorry about the tripod ads - it's free web hosting ;) my code is inside div id="container" My problem is, when I stack them vertically, every other photo (2nd, 4th, etc) has incorrect bottom border only on Mozilla. It's fine on IE and Opera. This is entirely baffling to me. Let me explain the layout a little - for the sides I have 4 100% wide nested divs with tiled background images for the straight parts of the edges. The inner most of these divs contains the photo, which has a 7px margin on all sides. The top rounded corners are absolutely positioned 12 by 15 images with inner transparency to let the photo show through, creating the round effect. The bottom rounded corners are similar, but absolutely positioned in a 100% wide 15 high div that is relatively positioned with -15px top margin. I noticed that for other image sizes this does not happen. Could it be some rounding error? Also, if I set any height on div.image there is no problem, but this is not known since the height depends on the actual width of the image after it is scaled to 150 or 300 - does that make senses? Any help would be appreciated. Thanks! Lakshmi. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
