Hello to all, Let me share with you a problem I have with a list of (logo+title+lead in+link to the complete article) on my homepage.
Problem: That's an internet explorer only problem (ie. it displays fine on safari, konqueror, firefox and opera). When I load the page http://www.ilga-europe.org the first time on IE 6, it displays fine (the list is the "Latest news" in the middle column). The second time I display the page (eg. If I clic on the top left corner logo to reload the page -simply refreshing the page doesn't seem to be trig the problem-), some of the logos in the list jumps to the right and cover the lead in, like if they forgot the negative left-margin. To see the effect, you might or might not have to display the homepage several time. Also it *seems* that the images have an influence, as some logos seems to jump and some don't (not that convinced myself, I haven't been able to find a pattern). The xhtml: xhtml 1.1 strict valid. The round shape on the image is a mask (image with a transparent round in the middle and opaque for the rest). <div class="homepage"> ... <div class="left_column'> ... <div class="content-view-line"> <div class="logo" style='background-image:url("the_image_I_want.jpg");'> <a href="link/to/the/article"> <img class="mask" src="/design/ilgaeurope/images/blank.gif" alt="" /> </a> <!-- The real logo is the background image of the div "logo", the mask class sets the mask image (a transparent shape) and the blank image is just a placeholder. --> </div> <div class="second_column"><div class="date">12/10/2005</div> <h2><a href="link/to/the/article">Title</a></h2> <div class="attribute-long"> Lead in to the article <div class="readmore"><a href="link/to/the/article" title="read the complete article">read more<span class="orange">...</span></a></div> </div> </div> </div> </div> </div> The css: I know that the css doesn't validate and before you beat me, let me tell you that the main reason for that is to handle the png transparency. .logo{float: left;margin:10px 0 10px 10px;} .logo {background:50% 50% no-repeat;} .left_column .content-view-line .logo {width:84px;height:79px;} .left_column .content-view-line .second_column {margin-left:20px;} html>body .left_column .content-view-line .logo {float:left;margin-left:-40px;} /* for everyone but ie */ .homepage .logo {margin:0;position:relative;left:0px;top:0;padding:0} .homepage .logo a {display:inline;margin:0;padding:0;} .mask {background: url('../images/mask.png') no-repeat 50% 50%;width:84px;height:79px;margin:0;padd ing:0;} * html .mask { background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/design/ilgaeurope/images/mask.png', sizingMethod='crop'); } * html .homepage .logo {margin-left:-43px;} /* for ie */ I use a png for the mask to have a smooth edge on the round border. The * html .mask filter:progid is to allow ie to render it properly. This jumping behavior is new to me, I've tried the tricks I know to fix ie bugs (eg: put a position:relative;height:1%...) without any success. I've spent quite a few time on this problem, but now I'm stuck, and I'm clueless. Have you experienced such behavior ? Could you suggest me tests or simplification to help me to understand what is the problem ? Any help more that welcome ! Xavier ______________________________________________________________________ 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/
