/    Sign up×
Community /Pin to ProfileBookmark

Image in h1 only working in IE

Copy linkTweet thisAlerts:
May 13.2007

I am very new to CSS and am having an issue with my header image dispaying outside of IE. I’m hoping someone can take a look and let me know what I can do to make this work. The relevant part of the CSS is:

h1 {
background-image: url([url]http://st71.startlogic.com/~innovati/gunpowder.quaker.org/logo2[/url] png.png);
background-repeat: no-repeat;
background-position: 0 0;
height: 400px;
width: 800px;
text-indent: 600px;
}

The website is [url]http://st71.startlogic.com/~innovati/gunpowder.quaker.org/index.html[/url]

Thanks for your help!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@sticks464May 13.2007 — I had to do some rewriting to get it to work. The image in IE has a background color that I can't get rid of though. But it renders the same in FF, Opera and IE the same with the exception of the background in IE.

<!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" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<title>Gunpowder Friends Meeting</title>

<style type="text/css">

* {

margin:0;

padding:0}


body{

margin:0;

padding:0;

font-family: Papyrus, Comic Sans MS, Cursive;

font-size: 12px;

font-weight: 600;

color: navy;

background: #C0C0C0;

}



b{font-weight: 900; font-size: 17px;}

em{color: white;}

li{ list-style: square inside }



#maincontainer{

width: 840px; /*Width of main container*/

margin: 0 auto; /*Center container on page, this is the main box on the site*/

;}






#topsection {

background:white url("http://st71.startlogic.com/~innovati/gunpowder.quaker.org/logo2 png.png");

background-repeat: no-repeat;

background-position:top center;

width:840px;

height:163px;

margin:0 auto;

border:none;

}



#rightcontainer{

float: right;

width: 49%;

height: 400px;

background: #80FF80;} /*this is the right side container*/



#contentcolumn{

margin-left: 2px; /*Set left margin to LeftColumnWidth*/

}



#leftcontainer{

float: left;

width: 49%; /*Width of left column*/

height: 400px;

background: #FFFF80;

}



#footer{

clear: left;

width: 100%;

background: #8080FF;

text-align: center;

padding: 4px 0;

}



#navbar2 {height: 30px;

width: 100%;

border-top: solid #000 5px;

border-bottom: solid #000 5px;

background-color: #8080FF;

text-align: center;

}

#navbar2 ul {

margin: 0px;

padding: 0px;

font-family: Papyrus, Comic Sans MS, Cursive;

font-size: 12px;

font-weight: 900;

color: white;

line-height: 30px;

white-space: nowrap;

}

#navbar2 li {

list-style-type: none;

display: inline;

}

#navbar2 li a {

text-decoration: none;

padding: 7px 10px;

color: #FFF;

}

navbar2 lia:link {

color: #FFF:

}

#navbar2 lia:visited {

color: #CCC;

}

#navbar2 lia:hover {

font-weight: bold;

color: #FFF;

background-color: #3366FF;

}





.innertube{

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/

margin-top: 0;

}



</style>



</head>
[/QUOTE]

<body>





<div id="topsection"></div>

<div id="maincontainer">

<div id="navbar2">

<ul>

<li><a href="AboutUs.html">About Us</a></li>

<li><a href="Worship.html ">Worship</a></li>

<li><a href="NewsCalendar.html">Newsletter/Calendar</a></li>

<li><a href="Quakerism101.html">Quakerism 101</a></li>

<li><a href="MemberLogin.html">Member & Attender Login</a></li>

</ul>

</div>



<div id="rightcontainer">

<div id="contentcolumn" align="left">

<div class="innertube"><br>

<b>Events and Announcements:</b>

<br><br>

<li>Silent Retreat and Simple Lunch, Saturday, May 12th

from 9:00am - 3:00pm



<li>Memorial Day Worship and Picnic, Monday, May 28th at

11:00am



<li>Mother's Day Pancake Breakfast, Sunday, May 13th at

Rise of Meeting



<li>Screening of the film "Searching for Peace in the

Mideast", Sunday, June 3rd at 10:00am



<li>Chesapeake Quarterly Meeting, Sunday June10th from

9:00am - 3:00pm (childcare provided



<li>Gunpowder Baseball Outing planned for Friday, July 13th - York Revolution vs Lancaster</li>

</div>

</div>

</div>



<div id="leftcontainer">

<div class="innertube">

<br><br><br><br>

<b>"As many candles lighted and put in one place do greatly augment the light and make it more to shine forth, so when many are gathered together into the same life there is more of the glory of God, and God's power appears to the refreshment of each individual,for each partakes not only of the light and life raised in oneself, but in all the rest." -- Robert Barclay (1648-1690)</b>

</div>

</div>


<div id="footer"><em>Gunpowder Friends is a community grounded in Quaker Practice, rooted in Christian Faith, and growing through its commitment to the ongoing spiritual lives of its members and attenders</em></div>



</div>

</body>

</html>
[/QUOTE]
Copy linkTweet thisAlerts:
@WebJoelMay 13.2007 — background:white url("http://st71.startlogic.com/~innovati/gunpowder.quaker.org/[B]logo2 png.png[/B]");[/QUOTE] Note the 'whitespace' in the filename "logo2 png.png". This is a "malformed URI referance" and don't be surprised if some browsers will not display the image. White-space in image-names should be avoided. Use no whitepace, or an underscore or a hyphen if you need to seperate words.
Copy linkTweet thisAlerts:
@WebJoelMay 13.2007 — background:white url("http://st71.startlogic.com/~innovati/gunpowder.quaker.org/[B]logo2 png.png[/B]");[/QUOTE] Note the 'whitespace' in the filename "logo2 png.png". This is a "malformed URI referance" and don't be surprised if some browsers will not display the image. White-space in image-names should be avoided. Use no whitepace, or an underscore or a hyphen if you need to seperate words.

Also:

<style type="text/css">

[B]* {

margin:0;

padding:0}[/B]


body{

[B]margin:0;



padding:0;[/B]

font-family: Papyrus, Comic Sans MS, Cursive;

font-size: 12px;

font-weight: 600;

color: navy;

background: #C0C0C0;

}[/QUOTE] Having used the Universal Selector " [B]* {margin:0; padding:0; }[/B] " There is NO need to have to re-state these, anywhere, in the same document again. ? You have re-stated them in BODY. Unnecessary. Harmless, but the point of the UniSelector is to removed the state declarations from EVERY element (which it had done). ?
Copy linkTweet thisAlerts:
@sticks464May 13.2007 — Having used the Universal Selector " * {margin:0; padding:0; } " There is NO need to have to re-state these, anywhere, in the same document again.[/QUOTE]
I just forgot to take those out when I rewrote the code.
Copy linkTweet thisAlerts:
@WebJoelMay 13.2007 — that's what I figured... I do the same thing myself sometimes. ?
Copy linkTweet thisAlerts:
@mcubedmaauthorMay 13.2007 — thanks to you both. this worked!
×

Success!

Help @mcubedma spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...