CSS Forum

**Marc Timberlake** · 03-18-2005, 06:13 PM

I'm confused right now... been sat here for an hour trying to figure out why the 'Recent Additions' section of my short stories site looks so crap with Firefox.

I've used CSS to set widths for <span> elements, which works fine in IE etc, but the spans all default to the width of the text in Firefox

ARGH!!!!

Any idea what's going on?

Here's the CSS code, and HTML code:

Code:

<style>

a:link { text-decoration: none; font-weight: bold; color: #332299 }
a:visited { text-decoration: none; font-weight: bold; color: #5544bb }
a:active { text-decoration: none; color: #332299 }
a:hover { text-decoration: underline; color: #C30202 }

body	{ font-family: verdana;
	font-size: 13px;
	margin: 10 10 10 10}

table	{ font-family: verdana;
	font-size: 13px}

.recent	{ font-size: 11px;
	color: #336699;
	border: solid 1px gray;
	background: white;
	padding: 2}

.footer	{ font-size: 11px}

.border { border: solid 1px #B6B4A7}

.alert	{ color: red; border: solid 1px red; padding: 2}

.heading      { font: bold 14px}		

.title	      {	width: 125px;
		align: center;
		padding: 0px;
		overflow: auto}

.author	      {	width: 95px;
		align: center;
		padding: 0px;
		overflow: auto}

.genre	      {	width: 95px;
		align: center;
		padding: 0px;
		overflow: visible}

.ratingHeader {	width: 60px;
		align: center;
		padding: 0px;
		overflow: hidden}

.rating       {	width: 60px;
		margin-left: 8px;
		padding: 0px;
		overflow: hidden}

.scroll       { height: 105px;
		overflow: auto}

.seperate     { border-bottom: dotted 1px #dddddd}

</style>

Code:

<div class="recent">
<div style="font: bold 16px" align="center">Recent Additions</div>
<div style="font: 9px" align="center">Most recent shown first in list</div><br />
<span style="font: 9px" align="center"><img src="0.gif" alt="OK For All"> = OK For All&nbsp&nbsp</span>
<span style="font: 9px" align="center"><img src="1.gif" alt="Some Strong Language"> = Some Strong Language&nbsp&nbsp</span>
<span style="font: 9px" align="center"><img src="2.gif" alt="Adult/Explicit Theme"> = Adult/Explicit Theme</span><br /><br />

<div class="heading">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="genre">Genre</span>
<span class="ratingHeader">Rating</span></div>

<div class="scroll">

<div class="seperate">
<span class="title"><a href="story.pl?s=285">`Kindred` a Short Short-Story</a></span>
<span class="author"><a href="list.pl?a=131">Jay Gillard Jr.</a></span>
<span class="genre"><a href="genre.pl?l=17">Fiction</a></span>
<span class="rating"><img src="0.gif" alt="OK For All"></span>
</div>

<div class="seperate">
<span class="title"><a href="story.pl?s=284">the End of the World</a></span>
<span class="author"><a href="list.pl?a=146">Sarah McKenzie</a></span>
<span class="genre"><a href="genre.pl?l=23">Fantasy</a></span>
<span class="rating"><img src="0.gif" alt="OK For All"></span>
</div>

<div class="seperate">
<span class="title"><a href="story.pl?s=283">Night Out</a></span>
<span class="author"><a href="list.pl?a=139">Aparna N</a></span>
<span class="genre"><a href="genre.pl?l=9">Horror/ Suspense</a></span>
<span class="rating"><img src="0.gif" alt="OK For All"></span>
</div>

</div></div>

**Marc Timberlake** · 03-21-2005, 07:15 AM

no ideas? I've still not been able to figure this out... infuriating

**Wassercrats** · 03-21-2005, 09:43 AM

How's this?

I changed the spans to floated div's and added some clears and changed some aligns to text-aligns.

**dk01** · 03-21-2005, 11:15 AM

spans are inline by definition. This basically means that they act like a <b> tag or an <u> tag would (snaps to fit text). IE handles this incorrectly and firefox is actually correct. You can set spans to act as block level elements (elements with set widths, borders, etc) by putting this in your stylesheet.

span { display:block }

-dk

**Wassercrats** · 03-21-2005, 12:50 PM

Here's the source code. I'll be deleting the webpage eventually.

Code:

<html>
<head>
<style>

a:link { text-decoration: none; font-weight: bold; color: #332299 }
a:visited { text-decoration: none; font-weight: bold; color: #5544bb }
a:active { text-decoration: none; color: #332299 }
a:hover { text-decoration: underline; color: #C30202 }

body    { font-family: verdana;
    font-size: 13px;
    margin: 10 10 10 10}

table    { font-family: verdana;
    font-size: 13px}

.recent    { font-size: 11px;
    color: #336699;
    border: solid 1px gray;
    background: white;
    padding: 2}

.footer    { font-size: 11px}

.border { border: solid 1px #B6B4A7}

.alert    { color: red; border: solid 1px red; padding: 2}

.heading      { font: bold 14px}        

.title          {    width: 125px;
        text-align: center;
        padding: 0px;
        overflow: auto;
        float: left;}

.author          {    width: 95px;
        text-align: center;
        padding: 0px;
        overflow: auto;
        float: left;}

.genre          {    width: 95px;
        text-align: center;
        padding: 0px;
        overflow: visible;
        float: left;}

.ratingHeader {    width: 60px;
        text-align: center;
        padding: 0px;
        overflow: hidden;
        float: left;}

.rating       {    width: 60px;
        margin-left: 8px;
        padding: 0px;
        overflow: hidden;
        float: left;}

.scroll       { height: 105px;
        overflow: auto;
        clear: left;}

.seperate     { border-bottom: dotted 1px #dddddd;
               clear: left;}

</style></head>

<body>
<div class="recent">
<div style="font: bold 16px" align="center">Recent Additions</div>
<div style="font: 9px" align="center">Most recent shown first in list</div><br />
<span style="font: 9px" align="center"><img src="0.gif" alt="OK For All"> = OK For All&nbsp&nbsp</span>
<span style="font: 9px" align="center"><img src="1.gif" alt="Some Strong Language"> = Some Strong Language&nbsp&nbsp</span>
<span style="font: 9px" align="center"><img src="2.gif" alt="Adult/Explicit Theme"> = Adult/Explicit Theme</span><br /><br />

<div class="heading">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="genre">Genre</span>
<span class="ratingHeader">Rating</span></div>

<div class="scroll">

<div class="seperate">
<div class="title"><a href="story.pl?s=285">`Kindred` a Short Short-Story</a></div>
<div class="author"><a href="list.pl?a=131">Jay Gillard Jr.</a></div>
<div class="genre"><a href="genre.pl?l=17">Fiction</a></div>
<div class="rating"><img src="0.gif" alt="OK For All"></div>
</div>

<div class="seperate">
<div class="title"><a href="story.pl?s=284">the End of the World</a></div>
<div class="author"><a href="list.pl?a=146">Sarah McKenzie</a></div>
<div class="genre"><a href="genre.pl?l=23">Fantasy</a></div>
<div class="rating"><img src="0.gif" alt="OK For All"></div>
</div>

<div class="seperate">
<span class="title"><a href="story.pl?s=283">Night Out</a></span>
<span class="author"><a href="list.pl?a=139">Aparna N</a></span>
<span class="genre"><a href="genre.pl?l=9">Horror/ Suspense</a></span>
<span class="rating"><img src="0.gif" alt="OK For All"></span>
</div>

</div></div>
</body>
</html>

**Marc Timberlake** · 02:04 PM

Thanks a lot for the help both of you

Wassercrats: for some reason the headings 'Recent Additions' etc vanish when I tried your idea, only to re-appear if I highlight them!

dk01: I had a look into different 'display' values, and found { display: table-cell} to be perfect

**dk01** · 03-21-2005, 03:03 PM

Glad to head it Marc

-dk