Forum Moderators: not2easy
I have a page 800 pixels wide with a green background. At the very top I display a brown menu, then on with the rest of the page:
body
{
font-family: "Verdana, Arial, Helvetica, sans-serif";
font-size: 12px;
color: #cccccc;
background: #000000;
float: left;
margin: 0px;
padding: 0px;
text-align: center;
}
#pagewrapper
{
width: 800px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align: left;
background-image: url(../siteimages/back_dk_green.gif);
}
#header
{
height:280 px;
background-image: url(../siteimages/back_lt_green.gif);
text-align: center;
}
ok, header is nested inside the pagewrapper, nested inside the body tag.
I also have this:
#topmenu
{
background-image: url(../siteimages/topmenu.gif);
width: 800px;
height: 20px;
text-align: left;
padding-left: 5px;
voice-family: "\"}\"";
voice-family: inherit;
width: 795px;
}
html>body #topmenu {
width: 795px;
}
Now some HTML
<body>
<div id="pagewrapper" align="center">
<!--#include virtual="/skindom/includefiles/header.shtml" -->
<br clear="all"/>
.
.
.
etc.
The included file:
<div id="header"> <!-- will be called from an include file -->
<p><!--#include file="topmenu.html" --></p>
<p><!--#include file="advert.shtml" --></p>
<img src="/skindom/siteimages/featurebox.gif" />
<img src="/skindom/siteimages/featurebox.gif" />
.
.
.
.
etc.
Again an include for the menu:
<div id="topmenu">
<p class="subsectionheader">subsection
<span class="upperfirstgray">item1 ¦ item3 ¦ item4 ¦ item6 </span></p>
</div>
The CSS for these parts:
.subsectionheader
{
font-size: 14px;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
}
.upperfirstgray
{
text-transform: capitalize;
color: #cccccc;
}
What I should get is a black site, with a 800 pixel wide dark green strip. Inside this I should get a 280 pixel deep header with a light green background. It will display a menu, an advert, then a logo etc.
This all works.
In IE6 and netscape 6 the menu has the brown background, but in Opera all I get is an 800 pixel wide by 2 pixel high horizontal brown line, then my text beneath that.
I've put postion: absolute; in the topmenu definition, but that didn't work. I've moved it ouside the header, that it is loaded then the header, still no joy.
There are other sections of the site where I have used the same idea and it worked:
#sectionheader
{
padding: 0px;
padding-left: 5px;
background-image: url(../siteimages/headingbox.gif);
width: 130px;
height:15px;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
voice-family: "\"}\"";
voice-family: inherit;
width: 125px;
}
html>body #topmenu {
width: 125px;
}
HTML:
<div id="sectionheader">section head</div>
This works perfectly in Opera.
Stuck. Banging head against wall.
<p><div id="topmenu">
<p class="subsectionheader">subsection
<span class="upperfirstgray">item1 ¦ item3 ¦ item4 ¦ item6 </span></p>
</div></p>
This is what you are getting with the html you have written above, after the include is done. This is incorrect HTML, because block elements like divs cannot be contained in p elements.
At first I thought this was the problem, but after fixing it this doesn't seem to be the case.
Weirdly, if I move the topmenu div out of the header div, then it does just fine:
<div id="pagewrapper" align="center">
<div id="topmenu"><p class="subsectionheader">subsection <span class="upperfirstgray">item1 ¦ item3 ¦ item4 ¦ item6 </span></p></div>
<div id="header">
</div>
<p>content</p>
</div>works for me.
Also weirdly, if you have the topmenu div nested in the header and increase the height to 38px, it works in Opera. It's like the browser is dropping 18px somewhere.
I think this is definitely a bug.
anyway, here's amended codes (not much) that should make it work although I've tested using background-color and not your images
CSS amendements:
.subsectionheader
{
font-size: 14px;
color: #ffffff;
background-color: transparent;
font-weight: bold;
text-transform: uppercase;
}
.upperfirstgray
{
text-transform: capitalize;
color: #cccccc;
background-color: transparent;
}
HTML amendment:
<div id="topmenu">
<div class="subsectionheader">subsection
<span class="upperfirstgray">item1 ¦ item3 ¦ item4 ¦ item6 </span>
</div>
</div>
I changed the <p class to <div class and it worked, I also added the transparent to the CSS as mentioned earlier as although it still worked without it, I think you need to do this when using images, anyway I'm in the habit now for (CSS validation), that anytime you specify a colour you should specify a background color too...
I think Opera would've expected the background be attached to the <p> selector...maybe...
Suzy
Moonbiter - ta for the heads up about the <p> and <div> order, I'm sure I've probably done that in a few other places too.
Tedster - I should have had the background colour set to transparent, the validator will no doubt slap me for that :)
