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!

Code:

<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

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

Bob8 · 05-17-2012, 04:14 PM

Quote:

Originally Posted by VIPStephan

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

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 is always making things easier – as well as valid CSS. 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:

Code:

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

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Edit: By the way: Here is a list of all valid HTML elements.

Bob8 · 05-17-2012, 04:41 PM

Quote:

Originally Posted by VIPStephan

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 is always making things easier – as well as valid CSS. 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:

Code:

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

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Edit: By the way: Here is a list of all valid HTML elements.

I don't think they are ignored since the "Grid" and "col" are doing just fine... Anyway, let me start with that validator, and try to clean it up, afterwards I will come back here to see wheter the problemo is solved or not, thank you for now!

Bob8 · 05-18-2012, 10:09 AM

Quote:

Originally Posted by VIPStephan

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 is always making things easier – as well as valid CSS. 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:

Code:

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

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Edit: By the way: Here is a list of all valid HTML elements.

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:

Code:

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

Quote:

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.