Hello, I'm currently working on a tricky website layout. http://helpnote.net/static/hoet-hoet
The tricky part is that the bottom of the logo (transparent png) has to take the color of the background (color changing). It works good in Chrome and Safari but not in Firefox and IE... Do you have any idea about a better manner to get this working in FF and IE (and still in Chrome and Safari of course) ? Hereunder the HTML and CSS (+comments) : http://helpnote.net/static/hoet-hoet/index.php (...) <body> <div id="topblock"></div> <div id="bottomblock"></div> <div id="logocontainer"> <div id="leftlogo"></div> <div id="logo"><img src="graphics/Hoet-Hoet-logo.png" width="38" height="49" alt="Hoet&Hoet"></div> <div id="rightlogo"></div> <div class="clear"></div> </div> </body> (...) --- http://helpnote.net/static/hoet-hoet/style.css /* (CSS RESET SKIPPED) */ html, body { height: 100%; } body { background-image: url(graphics/bg.gif); } #topblock { height: 50%; } #bottomblock { position: relative; top: 24px; height: 50%; background-color: #FFF; overflow: hidden; } #logocontainer { position: absolute; top: 50%; left: 0px; width: 100%; overflow: visible; } #leftlogo { position: relative; float: left; width: 70px; height: 25px; background-color: #FFF; } #logo { position: relative; float: left; top: -25px; } #rightlogo { position: relative; float: left; width: 100%; /* I think it's not the best way to stretch this div to take the entire width still available.. Any idea ? */ height: 25px; top: -52px; /* Why 52px is working good in Chrome and Safari ? Logic says me 49px (24px+25px) (??) */ left: 108px; /* #leftlogo width : 70px + #logo width : 38px */ background-color: #FFF; overflow: hidden; /* works good in Chrome and Safari but not in FF and IE */ --- Thanks in advance, -- Donald FRUY ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
