Css Span/div Display Problem

gaea

Jan 15 2007, 02:00 AM

Update: The pages referenced in this post have been removed for quite some time. I apologize if this causes any inconvenience. The finished version of this page may be found here. Also, if you're interested in political video art I highly suggest you check out my portfolio at www.highimpactart.org. --Paolo Unger Dvorchik.

I've been working on redoing one of my websites' designs and have run into a weird problem. I initially designed it using <div>s to separate the various sections, but then realized that it would create a line break separating the original banner from the content. When I tried switching it over to using <span>s instead the display gets all messed up. Are there certain css commands that are compatible with div but not span? I've never heard of this...but maybe?

Here is the div based page: http://www.facesofwar.org/test/index.html
And here is the span based page: http://www.facesofwar.org/test/index2.html

I'm sure there is probably a blatantly simple fix, but it's eluding me at the moment.
(P.S. The is just a skeleton architecture...so things will change/come up to spec as the design progresses).

The Css:

CODE

body{
     background-color:#000000}

     .backgroundimage {
     width:0em; /*center hack*/
     margin:0 auto; /*center hack*/
     min-width:1050px;
     background-image: url('bgdone2.gif');
     background-position: top center;
     background-repeat: repeat-y
     }

     .textholder {
     width:35em; /*center hack*/
     margin:0 auto; /*center hack*/
     max-width:930px;
     font-size:1.8em;
     }

The Html:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html><head><title>FacesofWar.org Test</title>
     <link rel="stylesheet" type="text/css" href="style.css"></head>
     <body text="#000000">
     <script type="text/javascript" src="minmax.js"></script>

     <center><img src="bannertest2.jpg" />
     <br /><img src="menutest.jpg" width="100%"/></center>

     <span class="backgroundimage"><span class="textholder">
     <p>Blah blah blah, content, blah blah blah</p>
     </span></span>

     </body></html>

jlhaslip

Jan 15 2007, 02:13 AM

Two comments.

1.) you have set the background colour as #000000, which is the same as the default colour of text, so the text is there, only it is being displayed as the same colour as the background colour, so it is not visible.

2.) I think you might be having an issue with the backgroung image on the span. I think the Image is a block level element and you have it inside an in-line element, which might be the issue. You also have the width set to 0px, so that might be the issue, too.

For the div-based page, try setting the padding:0 to see if that eliminates the gappage.

gaea

Jan 15 2007, 02:46 AM

Thanks for the quick reply. I already realized that the text color and the bgcolor were the same...but that image is supposed to be behind the text.

Thanks for the heads up about the block vs in-line element. I just added in display:block; to my css and it works now (though--oddly enough--only when I put a space following the tag. i.e. <span class="backgroundimage"> ). Weird quirk, but it seems to be working fine now.

Thanks for your help.

jlhaslip

Jan 15 2007, 03:13 AM

You are welcome.
I guess I haven't been totally wasting my time reading all those articles.

Glad to have been a help. I will leave this open so others might learn from the example.

Saint_Michael

Jan 15 2007, 03:30 AM

Just when I had it fix well most of your problems after your last update this does clean up some of your issues hopefully it works.

CSS

CODE

body{
background-color:#000000;
}
.bannerhead {
background-image: url('bannertest2.jpg');
width:1050px;
height: 271px;
}
.menu {
position:relative; top: 4px; 
background-image: url('menutest.jpg');
width: 1275px;
height: 40px;
}
.backgroundimage { 
position:relative; top: 0px;
min-width:1050px;
background-image: url('bgdone2.gif');
background-position: top center;
background-repeat: repeat-y;
background-repeat: no-repeatx;
} 

.textholder { 
position:relative; top: 9px;
background-image:url('bgdone2.gif');
max-width:1050px;
font-size:1.8em;
}

.container {
position:relative; top: 0px;
            margin-top: 0px;
			margin-left: 50px;
			width:930px;
			color: #000000;
	}
.counterTitle {font-family: arial, times; font-size: 16pt; color: #000000; text-align: center;  font-weight: bold}
.counterTitle2 {font-family: arial, times; font-size: 12pt; text-align: center;  font-weight: bold; text-decoration: none}
.counters { background-color: #ffffff; text-align: center; font-family: arial, times; font-size: 10pt; }
.borderlicious { position:relative; top: 15px; left: 15px;border-style: solid; border-collapse: collapse}

HTML

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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index_files/style.css" />
</head>

<body>
<center>
<script type="text/javascript" src="index_files/minmax.js"></script>
<div class="bannerhead"></div>
<div class="menu"></div>
<div class="textholder">
<div class="container">
<table class="borderlicious" align="right" border="2" bordercolor="black" width="300"><tbody>
<script src="index_files/casualties.js"></script>
<tr><td colspan="2" class="counterTitle" bgcolor="#bbbbbb">Casualties in Iraq</td>
</tr><tr><td class="counterTitle2">
<a class="new" href="http://www.iraqbodycount.net/">Iraqi Civilians (min-max):</a></td>
<td align="center"><img src="index_files/ibc_b.gif" /></td>
</tr>
<tr><td class="counterTitle2"><a class="new" href="http://www.antiwar.com/casualties/">U.S. Soldiers Killed:</a></td>
<td class="counters" height="17" width="25">
<center><script>document.write(casualties.total_value);</script>3017</center></td></tr>

<tr><td class="counterTitle2"><a class="new" href="http://www.antiwar.com/casualties/">In Combat:</a> </td>
<td class="counters" align="right" height="17" width="25">
<script>document.write(casualties.combat_value);</script>2481</td></tr>
<tr><td class="counterTitle2"><a class="new" href="http://www.antiwar.com/casualties/">Wounded:</a> </td>
<td class="counters" height="17" width="25"><script>document.write(casualties.wounded_value);</script>22834</td></tr>
<tr><td class="counterTitle2"><a class="new" href="http://www.costofwar.com/">Cost of the Iraq War:</a></td>
<td class="counters" height="17" width="25">
<center><script language="JavaScript" src="index_files/costofwar.js" type="text/javascript"></script><div id="raw">$358,358,023,157</div><script language="JavaScript" type="text/javascript">inc_totals_at_rate(1000);</script></center></td></tr>
</tbody></table>

<center><u>March 25th, 2006</u></center>

<p>	Three years have passed since the inception of the war in Iraq. &nbsp;<a href="http://icasualties.org/oif/">2,322</a>
of our brave men and women have lost their lives; <a href="http://www.iraqbodycount.net/">33,773</a>
civilians have died, and there is still no end in sight. &nbsp;It is
becoming increasingly apparent that we are trapped in a quagmire, and
that our
current path will not help to extradite us. &nbsp;What is needed now is
honest discussion about the war, its realities, and how we can
stabilize the region
enough to bring our troops back alive and safe to their families and
friends. &nbsp;This website is meant as an incubator to foster those
types of discussions;
a place were people can come and discuss the realities of the war we
are entrenched in, regardless of their political orientation.</p>

<p>One of the largest obstacles we face in these discussions is
people's detachment from the actual events that are occurring.
&nbsp;The media, whither it be
liberal or conservative, only paints a very limited picture of what is
actually going on. &nbsp;This is quite unfortunate as the less people
know, the less
they feel obligated to engage the issue. &nbsp;In an attempt towards
rectifying this informational blackout we are hosting a <a href="http://www.facesofwar.org/test/gallery/">gallery of images</a>
from the war. &nbsp;A majority of these pictures were taken by the
troops themselves. &nbsp;These are the atrocities they experience every
day. &nbsp;<i>This</i> is what war truly
looks like.</p>

<p>War photographs have had a long and powerful history of influencing
the struggles they depict. &nbsp;Few can forget the images that came
out of <a href="http://www.rotten.com/library/history/war-crimes/my-lai-massacre/">My Lai</a>
or the use of <a href="http://www.krysstal.com/images/democracy_vietnam_napalm.jpg">napalm</a> in the Vietnam war.  &nbsp;Likewise, <a href="http://www.shutterbug.com/features/1104sb_alexander/">Alexander Gardner</a> captured images
which had dramatic impact on people's understanding of the civil war. &nbsp;Now it is time for our generation to see <a href="http://www.facesofwar.org/test/gallery/">these images</a>, a job made much more difficult with the media's new practice of embedded reporting. 
&nbsp;Please help to spread the word.</p>
<p>&nbsp; </p>
<div style="text-align: right;"><p>Sincerely,
<br />
<i>Paolo Unger Dvorchik</i></p></div>

<p>&nbsp; </p>
<p> </p>
<p> </p>
<p>&nbsp;</p>
</div></span></center>
</body></html>

and it looks so code

Hopefully you don't make to many changes when you see this. It cleans out some of the problems you had on your old design plus hte second update you did before you reedited the site which I see you where doing.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE