I created a CSS class that displays text blocks with rounded corners via strategically placed images above and below it. It’s fine-tuned to display perfectly in Firefox and IE 6, but IE 7 throws images about 50 pixels to the left of the text block.
Any sage advice
Thanks
<!--Solution Update-->
For those who might be interested, I figured a way around this. It appears that while FF and IE6 have no problem with it, IE7 will not render positioning CSS styles when it’s enclosed in the <img> tag.< xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
The best way (I could find) around it is to instead create a class in your style sheet and surround your <img> tag with a div that calls the class.
Example:
IE7 UNFRIENDLY:
<img style=”margin:30px 0 -5px 30px;” src="my_image.gif" width="450" height="75" alt="Image: my_image" />
IE7 FRIENDLY:
CSS:
.top {
margin:30px 0 -5px 30px;
}
(X)HTML:
<div class=”top”><img src="my_image.gif" width="450" height="75" alt="Image: my_image" /></div>
Internet Explorer Development7
|