Cannot display image with background-image: url;

Bob8

05-17-2012, 03:18 PM

Hi all,

Below is my code which I am having 2 problems with, hope you can help me out.

1. Strange, but if I put the #tral tag begin the .section, the <div id="tral"> doesn't seem to work, if I switch him in order with the footer for example, then the footer doesn't work.
2. Suppose if I switch him with the footer, then I see the image, but it is a transparant image. I tried to get the opacity to 1.0 but it doesn't seem to work out...

Thank you!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: Arial;
font-size: 11px;
}
hr {
background-color: #004569;
height: 3px;
border:none;
margin: 0px;
}
#nav {
width: 100%;
height: 68px;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #e3e3e3; }
#nav ul {
list-style: none;
width: 940px;
margin: 0 auto;
padding: 0; }
#nav li {
float: left;
width: 210px; }
#nav li a {
display: block;
text-align: center;
padding: 28px 0px;
text-decoration: none;
font-weight: none;
color: #424242;
height: 12px;
border-right: 1px solid #e3e3e3; }
#nav li:first-child a {
border-left: 1px solid #e3e3e3; }
#nav li a:hover {
color: #009894;
background-color: #fff; }
#nav ti {
float: left;
width: 100px;
background-image:url('logocenter.png');
background-repeat:no-repeat;
background-position:center; }
#nav ti a {
display: block;
text-align: center;
padding: 28px 0px;
text-decoration: none;
font-weight: none;
color: #424242;
height: 12px;
border-right: 1px solid #e3e3e3; }
#nav ti:first-child a {
border-left: 1px solid #e3e3e3; }
#nav ti a:hover {
color: #009894;
background-color: #fff;
background-image:url('logocenter_c.png');
background-repeat:no-repeat;
background-position:center; }
#content {
width: 940px;
margin-left:auto;
margin-right:auto;
}
#content logo{
width: 940px;
height: 110px;
float: left;
background-color: #FFF;
background-image:url('logo.png');
background-repeat:no-repeat;
background-position:left center;
}
#content header{
width: 940px;
height: 323px;
float: left;
background-color: #FFF;
background-image:url('header.jpg');
background-repeat:no-repeat;
background-position:left center;
margin-bottom: 13px;
}
#content box{
width: 920px;
height: 550px;
padding: 10px;
float: left;
background-color: #FFF;
background-image:url('bg.png');
}
hr.seperator_up {
width: 100%;
background-color: #bababa;
height: 1px;
border:none;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
}
hr.seperator_down {
width: 100%;
background-color: #fdfdfd;
height: 1px;
border:none;
margin: 0;
margin-left: auto;
margin-right: auto;
}
@font-face {
font-family: Abel;
src: url('Abel-Regular.ttf');
}
p.custom_title_abel {
font-family: Abel;
font-size: 25px;
margin-left: 60px;
}
p.box_text {
font-family: Arial;
font-size: 12px;
margin-left: 60px;
margin-right: 60px;
}
.buttonarrow a{
display: block;
width: 23px;
height: 23px;
background: url('buttonarrow.png') no-repeat;
background-position: 0px -23px;
margin-left: 840px;
}
.buttonarrow a:hover {
background-position: 0px 0px;
}
#content box concepts {
width: 895px;
height: 300px;
padding: 10px;
margin-top: 20px;
float: left;
background-color: #FFFFFF;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
border:2px dashed #bababa;
}
#grid {
margin-left: -15px;
}
.col {
width: 33.3%;
float: left;
text-align: center;
}
.section {
margin-left: 15px;
height: 100px;
background: green;
}
#tral{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-image: url('box_1.png');
width: 750px;
height: 133px;
float: left;
background-color: transparent;
background-repeat: no-repeat;
background-position: top;

}
#footer {
width: 100%;
height: 225px;
float: left;
background-color: #f2f2f2;
margin-top: 13px;
border-top: 1px solid #e3e3e3;
}
</style>
</head>

<body>
<hr>
<div id="nav">
<ul>
<li><a href="#">Begin</a></li>
<li><a href="#">Hello</a></li>
<ti><a href="#"></a></ti>
<li><a href="#">Reference</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<logo>
</logo>
<header>
</header>
<box>
<hr class="seperator_up"><hr class="seperator_down">
<p class="custom_title_abel">Hello</p>
<p class="box_text">Testing text</p>
<span class="buttonarrow"><a href="#"></a></span>
<concepts>
<div id="grid">
<div class="col">
<div class="section">
<div id="tral">
</div>
</div>
</div>
<div class="col">
<div class="section">
Content.
</div>
</div>
<div class="col">
<div class="section">
Content.
</div>
</div>
</div>
</concepts>
</box>
</div>
<div id="footer">
</div>
</body>
</html>

VIPStephan

05-17-2012, 04:08 PM

Bob8

05-17-2012, 04:14 PM

Are you confusing HTML with XML? Because in HTML there are predefined elements, you can’t create your own as in XML. And in HTML (even in XHTML) there are no elements called <logo>, <box>, <concepts>. And the <header> element was just introduced in HTML version 5 which you don’t seem to be using, though, seeing that you don’t use <section> and <footer> when you could (if you were writing HTML 5, not 4).

I am not really sure :). Are you suggesting that I should use <div id="logo"> etc instead of <logo>? I guess I mixed em up?
(excuse me, recently just started css-ing)

You think that could solve the problem?

VIPStephan

05-17-2012, 04:33 PM

Bob8

05-17-2012, 04:41 PM

Bob8

05-18-2012, 10:09 AM

Yes, you should use divisions with IDs or classes. It could very well be that the invalid elements cause the browser to ignore everything within them, too. Valid HTML (http://validator.w3.org/) is always making things easier – as well as valid CSS (http://jigsaw.w3.org/css-validator/). Also, make sure that the file path is correct. It must always be relative to the stylesheet. In your case the stylesheet is in the HTML file so the CSS is looking for it in the same directory where the HTML file resides.

And did you post your entire HTML code here? Because if you did then you are missing the obligatory first line, the doctype declaration. I’d recommend the following one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
And then remove the following from your HTML element:
<html xmlns="http://www.w3.org/1999/xhtml">
By the way: Here is a list of all valid HTML elements (http://htmldog.com/reference/htmltags/).

I am actually still having the same problem, the div id="tral" doesn't seem to get displayed...
In the CSS part, if i switch it in order with "footer" the footer seems not to get displayed, but the tral does.. (however, transparant, it shouldn't be transparant..)

Grmbl

This is my code now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: Arial;
font-size: 11px;
}
hr {
background-color: #004569;
height: 3px;
border:none;
margin: 0px;
}
#nav {
width: 100%;
height: 68px;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #e3e3e3; }
#nav ul {
list-style: none;
width: 940px;
margin: 0 auto;
padding: 0; }
#nav li {
float: left;
width: 210px; }
#nav li a {
display: block;
text-align: center;
padding: 28px 0px;
text-decoration: none;
color: #424242;
height: 12px;
border-right: 1px solid #e3e3e3; }
#nav li:first-child a {
border-left: 1px solid #e3e3e3; }
#nav li a:hover {
color: #009894;
background-color: #fff; }
#nav li.middlemenu {
float: left;
width: 100px;
background-image:url('logocenter.png');
background-repeat:no-repeat;
background-position:center; }
#nav li.middlemenu a {
display: block;
text-align: center;
padding: 28px 0px;
text-decoration: none;
color: #424242;
height: 12px;
border-right: 1px solid #e3e3e3; }
#nav li.middlemenu:first-child a {
border-left: 1px solid #e3e3e3; }
#nav li.middlemenu a:hover {
color: #009894;
background-color: #fff;
background-image:url('logocenter_c.png');
background-repeat:no-repeat;
background-position:center; }
#content {
width: 940px;
margin-left:auto;
margin-right:auto;
}
#logo{
width: 940px;
height: 110px;
float: left;
background-color: #FFF;
background-image:url('logo.png');
background-repeat:no-repeat;
background-position:left center;
}
#header{
width: 940px;
height: 323px;
float: left;
background-color: #FFF;
background-image:url('header.jpg');
background-repeat:no-repeat;
background-position:left center;
margin-bottom: 13px;
}
#box{
width: 920px;
height: 550px;
padding: 10px;
float: left;
background-color: #FFF;
background-image:url('bg.png');
}
hr.seperator_up {
width: 100%;
background-color: #bababa;
height: 1px;
border:none;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
}
hr.seperator_down {
width: 100%;
background-color: #fdfdfd;
height: 1px;
border:none;
margin: 0;
margin-left: auto;
margin-right: auto;
}
@font-face {
font-family: Abel;
src: url('Abel-Regular.ttf');
}
p.custom_title_abel {
font-family: Abel;
font-size: 25px;
margin-left: 60px;
}
p.box_text {
font-family: Arial;
font-size: 12px;
margin-left: 60px;
margin-right: 60px;
}
.buttonarrow a{
display: block;
width: 23px;
height: 23px;
background: url('buttonarrow.png') no-repeat;
background-position: 0px -23px;
margin-left: 840px;
}
.buttonarrow a:hover {
background-position: 0px 0px;
}
#concepts {
width: 895px;
height: 300px;
padding: 10px;
margin-top: 20px;
float: left;
background-color: #FFFFFF;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
border:2px dashed #bababa;
}
#grid {
margin-left: -15px;
}
.col {
width: 33.3%;
float: left;
text-align: center;
}
.section {
margin-left: 15px;
height: 100px;
background: green;
}
#tral{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-image: url('box_1.png');
width: 750px;
height: 133px;
float: left;
background-color: transparent;
background-repeat: no-repeat;
background-position: top;
}
#footer {
width: 100%;
height: 225px;
float: left;
background-color: #f2f2f2;
margin-top: 13px;
border-top: 1px solid #e3e3e3;
}
</style>
</head>

<body>
<hr />
<div id="nav">
<ul>
<li><a href="#">BEGIN</a></li>
<li><a href="#">WAT</a></li>
<li class="middlemenu"><a href="#"></a></li>
<li><a href="#">REFER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="content">
<div id="logo">
</div>
<div id="header">
</div>
<div id="box">
<hr class="seperator_up" /><hr class="seperator_down" />
<p class="custom_title_abel">Wat kunnen wij voor u betekenen?</p>
<p class="box_text">Text here</p>
<span class="buttonarrow"><a href="#"></a></span>
<div id="concepts">
<div id="grid">
<div class="col">
<div class="section">
<div id="tral">
</div>
</div>
</div>
<div class="col">
<div class="section">
Content.
</div>
</div>
<div class="col">
<div class="section">
Content.
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>

VIPStephan

05-18-2012, 11:03 AM

Oh I see, this one was hard to spot. It seemed to be caused by the .section rule before #tral; whatever comes after doesn’t get any CSS applied. The CSS looks correct and then I decided to run it through the CSS validator and got this error:

Lexical error at line 165, column 2. Encountered: "?" (63), after : "" }??? #tral{ opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ background-image: url('box_1.png'); width: 750px; height: 133px; float: left; background-color: transparent; background-repeat: no-repeat; background-position: top; }

This tells us that there is a (hidden) character after the closing bracket of the .section {…} rule, and indeed, if I place my cursor behind the rule and hit backspace it’s not deleting the bracket but obviously the hidden character. That should fix it.

And by the way: Opacity is alway inherited, you can’t have children that are more opaque than their parent. In short: 100% of 50% opacity is still 50% opacity.

Bob8

05-18-2012, 12:36 PM

Goh, thanks, a hidden character? How did that came there?!

That does the trick! :) It works!

Lerura

05-19-2012, 01:20 PM

this hidden characters turn out to be a combination of 3 characters, URI encoded to:
%E2%80%8B

%E2 = a circumflex
%80= padding character (C1 control code)
%88= Partial Line Forward/Partial Line Down (C1 control code), which according to http://en.wikipedia.org/wiki/C0_and_C1_control_codes is used by printers for superscript and subscript.