IE6 vs everything else - how to overlay menu on background img?
Posted: Tue May 23, 2006 1:46 pm
First I have to say that I've been emailing friends for days saying how I've finally found the tool for small business / brochure / family websites (and possibly far beyond!). CMSMS really rocks.
My problem is lack of CSS skills, methinks. By sticking fairly closely to the supplied templates/scripts I built all but the front page of a client's site very quickly. But the front page was very specific and its taken some time.
The site is http://www.torreyhillsdentist.com and if you open it in IE6 Win and Firefox (or Safari) you'll see the problem in IE but not Firefox. (For reference, the original dreamweaver site I inherited is at old.torreyhillsdentist.com, which used javascript rollovers which looked nice but are a maintenance nightmare and fail SEO guidelines).
As you can see in Firefox, my goal is to place a vertical menu over an image on the front page which ties into the logo. After trying fruitlessly to leave the common logo and have an image below it tile perfectly, I switched to one large image and used it as the logo. I.e.:
div#header h1 a {
background: url(uploads/images/img00ph.jpg) no-repeat 0 12px;
height: 512px;
I soon found that I could tweak the
div#header {
height: 120px;...
to put the menu over the top of the image and I was off and running. For convenience, I overlayed a table and everything was running fine in both Firefox and Safari (couldn't get to the WinXP machine to test IE, though in hindsight I should have tried harder!).
On IE6, no matter what I try, I can't get any text to overlay the background image - unless its actually within the tags.
I'm hoping this is something really obvious and dumb. Any help much appreciated! Including a whole new approach if need be... thanks in advance.
(Final thought, is it ok to 'overlay' stylesheets? E.g. I left the 'layout' stylesheet pretty standard and created a 'layout frontpage' where I ommitted all but the attributes I was changing such as the background 'logo' image. I vaguely recall that more recent settings override older ones, but I mention this just in case).
cheers, michael
My problem is lack of CSS skills, methinks. By sticking fairly closely to the supplied templates/scripts I built all but the front page of a client's site very quickly. But the front page was very specific and its taken some time.
The site is http://www.torreyhillsdentist.com and if you open it in IE6 Win and Firefox (or Safari) you'll see the problem in IE but not Firefox. (For reference, the original dreamweaver site I inherited is at old.torreyhillsdentist.com, which used javascript rollovers which looked nice but are a maintenance nightmare and fail SEO guidelines).
As you can see in Firefox, my goal is to place a vertical menu over an image on the front page which ties into the logo. After trying fruitlessly to leave the common logo and have an image below it tile perfectly, I switched to one large image and used it as the logo. I.e.:
div#header h1 a {
background: url(uploads/images/img00ph.jpg) no-repeat 0 12px;
height: 512px;
I soon found that I could tweak the
div#header {
height: 120px;...
to put the menu over the top of the image and I was off and running. For convenience, I overlayed a table and everything was running fine in both Firefox and Safari (couldn't get to the WinXP machine to test IE, though in hindsight I should have tried harder!).
On IE6, no matter what I try, I can't get any text to overlay the background image - unless its actually within the tags.
I'm hoping this is something really obvious and dumb. Any help much appreciated! Including a whole new approach if need be... thanks in advance.
(Final thought, is it ok to 'overlay' stylesheets? E.g. I left the 'layout' stylesheet pretty standard and created a 'layout frontpage' where I ommitted all but the attributes I was changing such as the background 'logo' image. I vaguely recall that more recent settings override older ones, but I mention this just in case).
cheers, michael
