Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cannot display image with background-image: url;

    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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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).

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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.
    Last edited by VIPStephan; 05-17-2012 at 04:38 PM.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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!

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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>

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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.

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Goh, thanks, a hidden character? How did that came there?!

    That does the trick! It works!

  • #9
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •