Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Css Span/div Display Problem
gaea
post Jan 15 2007, 02:00 AM
Post #1


Super Member
*********

Group: Members
Posts: 205
Joined: 14-March 06
From: Vermont or Boston (USA)
Member No.: 20,077
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>


This post has been edited by gaea: May 4 2008, 01:10 AM

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Jan 15 2007, 02:13 AM
Post #2


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,077
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
gaea
post Jan 15 2007, 02:46 AM
Post #3


Super Member
*********

Group: Members
Posts: 205
Joined: 14-March 06
From: Vermont or Boston (USA)
Member No.: 20,077
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">&nbsp;). Weird quirk, but it seems to be working fine now.

Thanks for your help.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Jan 15 2007, 03:13 AM
Post #4


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,077
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
You are welcome.
I guess I haven't been totally wasting my time reading all those articles. laugh.gif

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

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Jan 15 2007, 03:30 AM
Post #5


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,564
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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 sad.gif

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.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Span "display: _____" Problems(2)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 7th October 2008 - 10:31 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation