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) :
(...)
<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>
(...)
---
/* (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/
