Fri, 2003-11-14 22:50
I have a frame div (#main) that is encapsulating my page - don't want dynamic width. However, in Firebird that frame isn't extending down to the bottom in one of the versions.
Look first in Opera or IE to see what it's supposed to do. Then look in Moz/Firebird.
http://www.unm.edu/~unmbsu/spp-trial/spp3/index.html - here you see that the bottom links are in a div with a background image.
http://www.unm.edu/~unmbsu/spp-trial/spp2/index.html - here I have another div (#pagenote) that is below that #bottommenu div with no image, and only a background color. However, the background image isn't showing up still, in the #bottommenu div.
What's up with this!?!? 
The css for spp2
#bottommenu{
background-color: #6b8aa9;
background-image: url(images/bottombanner.jpg);
background-repeat : no-repeat;
text-align: center;
line-height: 40px;
width: 750px;
border-top: 1px solid #2c5885;
border-left: 1px solid #a2b5c8;
border-right: 1px solid #a2b5c8;
}
#pagenote{
background-color: #6b8aa9;
line-height: 10px;
width: 750px;
vertical-align: bottom;
text-align: center;
border : 1px solid #a2b5c8;
border-top:0;
}
The css for spp3
#bottommenu{
background-color: #6b8aa9;
background-image: url(images/bottombanner-usdown.jpg);
background-repeat : no-repeat;
font: 10px Trebuchet MS, sans-serif;
color: #FFFFFF;
text-align: center;
letter-spacing : 1px;
padding-top: 6px;
width: 750px;
height: 40px;
} 
Sat, 2003-11-15 00:13
#1
Firebird not showing my background image - causing havok
The images location must be in relation to the stylesheet
if your structure is like:
/
images
styles
and stylesheet resides in the styles folder and images in images folder, then
try this:
#bottommenu{
background-color: #6b8aa9;
background-image: url(./images/bottombanner.jpg);
background-repeat : no-repeat;
text-align: center;
line-height: 40px;
width: 750px;
border-top: 1px solid #2c5885;
border-left: 1px solid #a2b5c8;
border-right: 1px solid #a2b5c8;
}
#pagenote{
background-color: #6b8aa9;
line-height: 10px;
width: 750px;
vertical-align: bottom;
text-align: center;
border : 1px solid #a2b5c8;
border-top:0;
}
change it similarly for the other url
Sat, 2003-11-15 03:10
#2
Firebird not showing my background image - causing havok
Nice try but that's not it. My image is called correctly. Note how it appears in IE and Opera but not in Firebird. If the path was incorrect it wouldn't show in either other browser. Also, other images in the same file are correctly displayed even in Firebird. Any other ideas?
Sat, 2003-11-15 08:02
#3
Firebird not showing my background image - causing havok
what about:
background-attachment: scroll;
BTW its not showing in Mozilla as well.. so try the above suggestion and see how it goes.
Sat, 2003-11-15 19:10
#4
Firebird not showing my background image - causing havok
That didn't do anything as far as I can tell. You know, The problem in Firebird (and I assume Mozilla as well since they are built from the same standards) is that the frame div is not extending to encompass the divs within it. The way it's set up is:
<div id="frame"> <div id="header"></div> <div id="leftcontent"></div> <div id="centercontent"></div> <div id="bottombanner"></div> </div>
So, since it's not exdending the frame div to the bottom (if you view source it's actually called main), it is interfering with the bottombanner. But, what I can't figure out is why in the version where I have two bottom banners (spp2 from above) the page is at least acceptable in Firebird, but when I got rid of the <div id="pagenote"> (the very bottom div containing the copyright) and included that in the <div id="bottombanner">, the frame div suddenly wouldn't extend any more.
I tried a few hacks, like putting <br clear="all" /> in the html just before I closed the frame div, to see if that would extend it, but though it did extend the frame div, it still ended right before the the bottom banner div, and it still didn't show the background image in Firebird. (also it added space after the bottom banner in Opera and IE - which I don't want.)
...still royally stuck... :?
Sun, 2003-11-16 01:25
#5
Firebird not showing my background image - causing havok
here you go:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>burkbum</title>
<!--<link rel="stylesheet" type="text/css" media="all" href="css/spp3.css" />-->
<style type="text/css">
<!--
body{
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/tile.gif);
font: normal 12px arial, sans-serif;
margin: 0px;
text-align:center;
font: sans;
}
#main{
width:752px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
background-color: #FFFFFF;
border: 1px solid #2c5885;
}
#banner {
background:#2c5885;
height:90px;
width: 750px;
border:0px;
voice-family: "\"}\"";
voice-family: inherit;
height:89px;
}
html>body #banner {
height:89px;
}
#leftcontent {
width:175px;
padding:0px;
float:left;
background:#fff;
}
#centercontent {
width:575px;
border-left: 1px solid #2c5885;
padding:0px;
padding-bottom: 15px;
float:left;
background:#fff;
}
#centercontent #menu {
border-left:1px dashed #2c5885;
border-bottom:1px dashed #2c5885;
float:right;
width:100px;
background:#E9ECEF;
margin: 16px 0px 10px 10px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu li.sub1{
list-style : none;
font: bold 10px/100% "Trebuchet MS", sans-serif;
padding : 3px 8px 4px 4px;
}
#menu li.sub{
list-style : none;
border-top : 1px dashed #2c5885;
font: bold 10px/100% "Trebuchet MS", sans-serif;
padding : 3px 8px 4px 4px;
}
ol{
font: normal 11px "Trebuchet MS", sans-serif;
}
div#menu a{
color: #2C5885;
text-decoration: none;
}
div#menu a:hover {
color: #FF9900;
}
a:link, a:hover, a:active, a:visited{
color: #2C5885;
text-decoration: underline;
}
#bottommenu{
background-color: #6b8aa9;
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/bottombanner-usdown.jpg);
background-repeat : no-repeat;
font: 10px Trebuchet MS, sans-serif;
color: #FFFFFF;
text-align: center;
letter-spacing : 1px;
padding-top: 6px;
width: 750px;
height: 40px;
}
div#bottommenu a {
color: #ffffff;
}
div#bottommenu a:hover {
color: #FF9900;
}
em{
color: #2c5885;
font-size: -1px;
}
p{
padding-left: 8px;
padding-right: 8px;
text-align: justify;
font-family : "Trebuchet MS", sans-serif;
}
p.center{
text-align: center;
}
p.small{
padding-left: 8px;
padding-right: 8px;
text-align: justify;
font-size : 10px;
font-family : "Trebuchet MS", sans-serif;
}
p.headline{
font: normal 10px "Trebuchet MS", sans-serif;
background-color: #E9ECEF;
color : #2c5885;
line-height: 15px;
border-bottom : 1px dashed #2c5885;
margin-top: 0px;
padding: 0px;
padding-left: 6px;
}
p.subheadline{
font: bold 10px "Trebuchet MS", sans-serif;
color : #2c5885;
padding: 6px;
padding-top: 0px;
padding-bottom: 0px;
}
p.container-blank{
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/container-blank.gif);
background-repeat : no-repeat;
background-color: #ffffff;
border : 1px solid #2c5885;
border-top:0px;
font: normal 10px "Trebuchet MS", sans-serif;
padding: 5px;
padding-top: 9px;
margin: 5px;
margin-bottom: 8px;
text-align: justify;
}
p.container-credits{
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/container-credits.gif);
background-repeat : no-repeat;
background-color: #ffffff;
border : 1px solid #2c5885;
border-top:0px;
font: normal 10px "Trebuchet MS", sans-serif;
padding: 5px;
padding-top: 9px;
margin: 5px;
margin-bottom: 8px;
text-align: justify;
}
p.container-news{
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/container-news.gif);
background-repeat : no-repeat;
background-color: #ffffff;
border : 1px solid #2c5885;
border-top:0px;
font: normal 10px "Trebuchet MS", sans-serif;
padding: 5px;
padding-top: 9px;
margin: 5px;
margin-bottom: 8px;
text-align: justify;
}
p.container-note{
background-image: url(http://www.unm.edu/~unmbsu/spp-trial/spp3/css/images/container-note.gif);
background-repeat : no-repeat;
background-color: #ffffff;
border : 1px solid #2c5885;
border-top:0px;
font: normal 10px "Trebuchet MS", sans-serif;
padding: 5px;
padding-top: 9px;
margin: 5px;
margin-bottom: 8px;
text-align: justify;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="contentheader">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="750" height="90" id="http://www.unm.edu/~unmbsu/spp-trial/spp3/flash/flashmenu-spp3"> <param name=movie value="http://www.unm.edu/~unmbsu/spp-trial/spp3/flash/flashmenu-spp3.swf"/> <param name=quality value=high /><embed src="http://www.unm.edu/~unmbsu/spp-trial/spp3/flash/flashmenu-spp3.swf" quality=high width="750" height="90" name="flashmenu-spp3" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</div>
<div id="leftcontent">
<p class="container-news">
<em>Monday, January 13, 2003</em><br/>"Appeal Over Tiny Fish Has Big Implications"<br/><a href="http://www.abqjournal.com/news/823716news01-13-03.htm">ABQ Journal Subscribers Login</a>
</p>
<p class="container-news">
<em>Wednesday, January 29, 2003</em><br/>"City Water May Go to Silvery Minnow"<br/><a href="http://www.abqjournal.com/news/828311news01-29-03.htm">ABQ Journal Subscribers Login</a>
</p>
</div>
<div id="centercontent">
<p class="headline">ASIRF Home</p>
<p class="subheadline">Welcome to American Southwest Ichthyological Research Foundation</p>
<p>The American Southwest Ichthyological Research Foundation is a private research organization based in Albuquerque, NM that specializes in studies of native fish fauna in all drainages in New Mexico. Over the past decade, ASIRF been closely associated with the Museum of Southwest Biology, Division of Fishes at the University of New Mexico, New Mexico Department of Game and Fish, New Mexico Fish and Wildlife, USGS and other groups in and around the Southwestern United States dedicated to the general ecology and community dynamics of native and nonnative fish species in the Southwest.</p>
</div>
<div style="clear:both;"></div>
<div id="bottommenu"><a href="home.html">Home</a> | <a href="drainages.html">Drainages</a> | <a href="projects.html">Projects</a> | <a href="features.html">Special Features</a> | <a href="about.html">About Us</a><br />© 2003 ASIRF</div>
</div>
</body>
</html>
This was the trick:
<div style="clear:both;"></div>
Sun, 2003-11-16 04:32
#6
Firebird not showing my background image - causing havok
Know what makes this forum great? Folks who stick with a problem until it's fixed! Thanks Loads! That did the trick. I still don't know exactly why that fixed it - I'll have to dissect it I guess.
Thanks! Burk.
Sun, 2003-11-16 07:57
#7
Firebird not showing my background image - causing havok
BTW I like the menu you have on that page. Only problem is its in Flash. Have you come across anything similar styled with CSS ?
Sun, 2003-11-16 09:34
#8
Firebird not showing my background image - causing havok
Thanks. I haven't really - outside of the newer "not dhtml" roll-over popups that are starting to make some appearances, which use CSS2 but which don't work in much besides Opera 7. Similarly functioning things I've seen are like the navigation on http://www.spoono.com, which use css and an external .js file. I like that real well and used it in an early prototype for this same site you helped me out with: http://www.unm.edu/~unmbsu/spp-trial/spp_trial-3.html. It doesn't function as rollover and I didn't give it as much graphical treatment as I would have had the folks who I'm designing this site for not requested that I use some Flash...(I compromised by putting CSS links on the bottom for people who don't have flash). In any case, I'll keep my eyes open for some similar CSS and pass it along if I find anything worth your while.
Cheers!