Problem rendering XHTML/CSS rounded corners -- solved  
Author Message
SacWeb





PostPosted: Internet Explorer Web Development, Problem rendering XHTML/CSS rounded corners -- solved Top

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 Development4