gaea 0 Report post Posted January 15, 2007 (edited) 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 http://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: *Dead Link*And here is the span based page: *Dead Link*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: 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: <!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> Edited October 24, 2016 by OpaQue (see edit history) Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted January 15, 2007 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. Share this post Link to post Share on other sites
gaea 0 Report post Posted January 15, 2007 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. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted January 15, 2007 You are welcome. I guess I haven't been totally wasting my time reading all those articles. :PGlad to have been a help. I will leave this open so others might learn from the example. Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted January 15, 2007 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 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ 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="https://www.iraqbodycount.org/ 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/. 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/ 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/; </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="https://www.nationalpriorities.org/cost-of/?redirect=cow 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. <a href="http://forums.xisto.com/no_longer_exists/ our brave men and women have lost their lives; <a href="http://forums.xisto.com/no_longer_exists/ have died, and there is still no end in sight. It isbecoming increasingly apparent that we are trapped in a quagmire, andthat ourcurrent path will not help to extradite us. What is needed now ishonest discussion about the war, its realities, and how we canstabilize the regionenough to bring our troops back alive and safe to their families andfriends. This website is meant as an incubator to foster thosetypes of discussions;a place were people can come and discuss the realities of the war weare entrenched in, regardless of their political orientation.</p><p>One of the largest obstacles we face in these discussions ispeople's detachment from the actual events that are occurring. The media, whither it beliberal or conservative, only paints a very limited picture of what isactually going on. This is quite unfortunate as the less peopleknow, the lessthey feel obligated to engage the issue. In an attempt towardsrectifying this informational blackout we are hosting a <a href="http://www.facesofwar.org/rg-erdr.php?_rpo=t of images</a>from the war. A majority of these pictures were taken by thetroops themselves. These are the atrocities they experience everyday. <i>This</i> is what war trulylooks like.</p><p>War photographs have had a long and powerful history of influencingthe struggles they depict. Few can forget the images that cameout of <a href="http://www.rotten.com/library/history/war-crimes/my-lai-massacre/ Lai</a>or the use of <a href="http://www.krysstal.com/images/democracy_vietnam_napalm.jpg; in the Vietnam war. Likewise, <a href="http://www.shutterbug.com/content/alexander-gardnerbrhistory-made-history-recorded Gardner</a> captured imageswhich had dramatic impact on people's understanding of the civil war. Now it is time for our generation to see <a href="http://www.facesofwar.org/rg-erdr.php?_rpo=t images</a>, a job made much more difficult with the media's new practice of embedded reporting. Please help to spread the word.</p><p> </p><div style="text-align: right;"><p>Sincerely,<br /><i>Paolo Unger Dvorchik</i></p></div><p> </p><p> </p><p> </p><p> </p></div></span></center></body></html> and it looks so code :PHopefully 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. Share this post Link to post Share on other sites
