homepage Welcome to WebmasterWorld Guest from 54.161.192.130
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Opera CSS background strangeness
rsart

10+ Year Member



 
Msg#: 341 posted 2:31 am on Oct 8, 2002 (gmt 0)

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

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



 
Msg#: 341 posted 5:23 am on Oct 8, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 341 posted 5:38 am on Oct 8, 2002 (gmt 0)

<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

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



 
Msg#: 341 posted 10:20 am on Oct 8, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 341 posted 8:24 pm on Oct 8, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved