Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Css and Firefox - Width problems....
Old 03-18-2005, 06:13 PM Css and Firefox - Width problems....
Marc Timberlake's Avatar
Ultra Talker

Posts: 300
Trades: 0
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>
__________________


Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
Marc Timberlake is offline
Reply With Quote
View Public Profile Visit Marc Timberlake's homepage!
 
 
Register now for full access!
Old 03-21-2005, 07:15 AM
Marc Timberlake's Avatar
Ultra Talker

Posts: 300
Trades: 0
no ideas? I've still not been able to figure this out... infuriating
__________________


Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
Marc Timberlake is offline
Reply With Quote
View Public Profile Visit Marc Timberlake's homepage!
 
Old 03-21-2005, 09:43 AM
Wassercrats's Avatar
Average Talker

Posts: 17
Trades: 0
How's this?

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

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
Wassercrats is offline
Reply With Quote
View Public Profile
 
Old 03-21-2005, 11:15 AM
dk01's Avatar
Ultra Talker

Posts: 373
Location: Ames, IA
Trades: 0
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
__________________
Did I help you? If so, be nice and throw me some
Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE
dk01 is offline
Reply With Quote
View Public Profile
 
Old 03-21-2005, 12:50 PM
Wassercrats's Avatar
Average Talker

Posts: 17
Trades: 0
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>
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
Wassercrats is offline
Reply With Quote
View Public Profile
 
Old 03-21-2005, 01:50 PM
Marc Timberlake's Avatar
Ultra Talker

Posts: 300
Trades: 0
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
__________________


Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

Last edited by Marc Timberlake; 03-21-2005 at 02:04 PM..
Marc Timberlake is offline
Reply With Quote
View Public Profile Visit Marc Timberlake's homepage!
 
Old 03-21-2005, 03:03 PM
dk01's Avatar
Ultra Talker

Posts: 373
Location: Ames, IA
Trades: 0
Glad to head it Marc

-dk
__________________
Did I help you? If so, be nice and throw me some
Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE
dk01 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Css and Firefox - Width problems....
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.18650 seconds with 12 queries