Welcome to WebmasterWorld Guest from 54.221.119.45

Forum Moderators: not2easy

Message Too Old, No Replies

Opera CSS background strangeness

     

rsart

2:31 am on Oct 8, 2002 (gmt 0)

10+ Year Member



Evening folks - this one has got me confused.

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.

tedster

5:23 am on Oct 8, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, I don't really follow everything you said, but I'm wondering if you need a background-color:transparent somewhere to get the cross-browser display to work out correctly.

moonbiter

5:38 am on Oct 8, 2002 (gmt 0)

10+ Year Member



<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.

SuzyUK

10:20 am on Oct 8, 2002 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



rsart...opera does take a dislike to background images in some cases usually pseudo elements though

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

rsart

8:24 pm on Oct 8, 2002 (gmt 0)

10+ Year Member



SuzyUK - thanks, thats cracked it, and it still works in all browsers. For some reason the Operan site will not centre itself like the IE and Netscape ones do, but I'm sure I'll crack it yet.

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 :)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month