Resolved transparent .gif not showing correctly in banner [Archive]

mlegg

04-15-2012, 12:18 AM

I made this image, it's a gif with background transparent.
http://portsmouthgreekfestival.com/images/GreekBackground2.gif

When the site is uploaded it doesn't show correctly. I am seeing white in back of it, not my blue background from the page.
http://portsmouthgreekfestival.com/

CSS

html,body {
padding:0;
margin:0;
height:100%;
background-color:#003366;
background-position:center top; /* this positioning has been modified */
}
#mainPicture {
height:250px;
width:960px;
margin:auto;
background-image:url(images/GreekBackground2.gif);
}
#container {
position:relative;
width:960px;
margin:auto;
font-family: andalus;
color:#003366;
font-weight: bold;
background-color:#FFFFFF;
}

div.one {
width:960px;
margin:auto;
padding:5px;
height:100%;
}
div.one a:link {
color :#00008B;
text-decoration:underline;
}
div.one a:visited {
color: #FF0000;
text-decoration : underline;
}

div.one a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

div.one a:active {
color : #FF0033;
background-color: #FFFFFF;
text-decoration: underline;
}

#nav1 {
background: transparent url(images/greek-key-BG.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:960px;
text-align:center;
}

#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;
text-transform:uppercase;
font-size:13px;
font-family:Arial,sans-serif;
}

#nav1 ul li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url("images/hmenu.jpg") repeat-x top left;

}

#nav1 ul li a {
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:0px 20px ;
line-height:40px;
font-weight:bold;
}

#nav1 ul li a:hover {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

iframe {padding: 20px; border:none; float: right;}

table a {
font-size:16px;
color:#000066;
text-decoration:underline;
}
table a:hover {
font-size:16px;
color:#fff;
background-color:#8B0000;
}

#footer {
background: transparent url(images/greek-key-BG.jpg) repeat-x scroll left top;
height:40px;
width:950px;
text-align:center;
}

#footer a:link {
color : #FF0000;
text-decoration:underline;
}

#footer a:visited {
color: #FF0000;
text-decoration : underline;
}

#footer a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active {
color : #FF0033;
background-color: #FFFFFF;
text-decoration: underline;
}

The part of the page where the banner is in the <div id="mainPicture"></div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="language" content="english" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="google-site-verification" content=
"I4Ask6VXiDmcOHZoEGhMNu7K7mGb4VG28ZHmOGPF7SE" />
<META NAME="keywords" CONTENT="greek, festival, portsmouth NH, orthodox , music, Glendi, dancing, St. Nicholas Greek orthodox church, voluntary admission, food, beer, wine, greek gifts, children activities, DJ Meleti, orfeas ">
<meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The “Glendi” or party will begin on Friday, July 13th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children’s play area will ensure the entire family enjoys their virtual visit to this ancient land." />
<title>Greek Festival Portsmouth</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
/*<![CDATA[*/
li.c1 {border:none}
/*]]>*/
</style>
<style type="text/css">

<style type="text/css">
/*<![CDATA[*/
div.c1 {clear:both}
/*]]>*/
</style>
<body>
<div id="container">
<div id="mainPicture"></div>
<div id="nav1">
<ul>
<li id="current" class="c1"><a href="index.html">Home</a></li>
<li><a href="involved.html">Get Involved</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="events.html">Schedule of Events</a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="contact.html">Contact & Directions</a></li>
</ul>
</div>
<div class="one">
<h1 style="text-align:center">Festival Dates 2012<br><br>July 13th, July 14th and July 15th.</h1>
<p style="text-align:center">The families of St. Nicholas Greek Orthodox Church are proud to bring to the Greater Portsmouth Seacoast are the 36th Greek Festival.</p>

<p>The St. Nicholas Greek Festival has become over the years a staple for the community to get there fix of Greek Foods, Pastries and Music. </p>

<p>It is a fun event for all ages and this year promises to be another great event, the community of St Nicholas comes together during the later part of Spring to prepare the numerous items on the food and pastries menu. So come join us for fresh Lamb skewers, Moussaka, a Gyro or a fresh piece of Baklava. This is food our YiaYia’s would be proud to serve.
</p>

<h2>New for 2012</h2>
<p><strong>Festival Express</strong> – Enjoy our new take out menu<br>
If you are looking for a quick dinner on Friday or food for the beach all three days come to our new express line near the entrance.</p>

<table>
<tr>
<td width="470px">
<p>Hours: Friday – 12noon to 11PM<br>
Saturday 11AM to 11PM<br>
Sunday – 12noon to 3PM</p>
<p>Voluntary admission: $3.00 (children under 12 admitted free of charge)</p>
<p>Music provided by DJ Meleti all weekend</p>
<p>Live Music – Saturday at 7PM – by orfeas</p>
<p>Greek Dancing Exhibitions by our Greek School Students Friday and Saturday at 6PM</p>
</td>

<td width="480px">
<object width="480" height="360"><param name="movie" value="http://www.youtube.com/v/4i3gocNI-6Q?version=3&hl=en_US&rel=0;&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4i3gocNI-6Q?version=3&hl=en_US&rel=0;&autoplay=1" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</tr>
</table>

<div style="clear:both;"><br>

<b>Directions:</b> From Portsmouth Rotary, take Rte 1 bypass, then left at 3rd traffic light (Greenleaf Ave). Follow signs to Festival at Andrew Jarvis Drive next to Portsmouth High School. <a href="contact.html">View a map here.</a></p>
<p>Add us on <a href="http://www.facebook.com/event.php?eid=210109069003368" target="_blank">
<img src="images/Facebook.gif" width="120" height="30" border="0" alt="Facebook" />
</a></p>

<h3 style="text-align:center">Want to support the Greek Orthodox Community? <a href="https://www.fundraise.com/st-nicholas-greek-orthodox-church" target="_blank">Become a supporter</a> and join our fundraising campaign.</h3>
<p style="text-align:center">Copyright © PortsmouthGreekFestival.com</p>
<div style="clear:both;">
<div class="c1"></div><br />
<div id="footer">
</div>
</div>
</div>

</body>
</html>

jscheuer1

04-15-2012, 02:01 AM

It's true there's white behind its curved corners, but that's consistent with the layout. The element behind it, aka its parent element is:

<div id="container">

whose background color is white. (<div id="mainPicture"></div> has no background color, so that defaults to transparent)

And incidentally, it looks fine that way. As a result, I don't fully understand the problem. What exactly are you going for? Can you make an image that shows the desired effect?

mlegg

04-15-2012, 02:15 AM

I fixed it in the HTML, I put the <div id="mainPicture"></div> above the container.

<body>
<div id="mainPicture"></div>
<div id="container">
<div id="nav1">

If you look at the page now it's just what I wanted. I can't believe I overlooked this to begin with. :(