5 replies [Last post]
whoisKeel
Offline
newbie
Last seen: 18 years 8 weeks ago
Joined: 2004-05-08
Posts: 6
Points: 0

hey, i hear css can replace tables, so i'm trying Smile it looks good in IE, and opera (although the titles are not correct in opera i can deal with that), but it completely falls apart in mozilla...almost as if mozilla isn't even recognizing my width declarations or padding. i figure it is something i am over-looking, but i can't figure it out.

here's my page so far, it is a catalog.

http://whoiskeel.com/catalog/test8.html

and here's the css...it's not and external sheet yet, so you can just view the source of the page if that is easier...thanks for any help

body { text-align:center; background-color:#FFFFFF; margin:0px; padding:0px; color:#333333; font-family:arial, sans-serif; font-size:8pt; font-weight:normal; }
#top { color:#000000; text-align:right; width:750px; padding-top:5px; }
#page { width:1000px; }
#main { margin:0px auto; width:850px; text-align:center; }

.leftAlign { color:#333333; font-size:22pt; font-family:verdana, sans-serif; padding-top:5px; background-color:#FFFFFF; width:800px; height:45px; text-align:left; }
.entry { border-left:solid 1px #000000; border-right:solid 1px #000000; width:750px; text-align:left; }
.firstEntry { border-top:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; width:750px; text-align:left; }
.lastEntry { border-bottom:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; width:750px; text-align:left; }

.number { width:35px; text-align:right; padding-right:10px; padding-top:2px; padding-bottom:2px; }
.title { width:375px; text-align:left; padding-top:2px; padding-bottom:2px; }
.condition { width:80px; text-align:left; font-family:monospace; padding-top:2px; padding-bottom:2px; }
.notes { width:235px; text-align:left; padding-left:15px; padding-top:2px; padding-bottom:2px; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

width doesn't hold up in mozilla... :(

Hi

I know you aren't going to thank me for saying this, but you really shouldn't have done that in pure css.

If ever I saw a reason to use tables, your page is it.

css was never meant to replace tables. It's just that so many folk have used tables to do site layout and design when css is the better choice.

BUT, for pure data layout, tables were and always will be the best and easiest way foward.

Sure, style the table with css, but use a table for structured data.

Trevor

whoisKeel
Offline
newbie
Last seen: 18 years 8 weeks ago
Joined: 2004-05-08
Posts: 6
Points: 0

width doesn't hold up in mozilla... :(

actually, i was kind of expecting that answer. i probably will revert back to using tables for that page...but would still like to know why this isn't working in mozilla. is it a nesting issue or am i just doing something wrong?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 33 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

width doesn't hold up in mozilla... :(

Yes Tabular data is best left in tables.

Your problem is the use of span instead of Div. Change all spans to Divs and width will work. Not sure I agree with Moz disregarding a width setting under span, but they probable figured that it is not meant to create a box, and therefore why should it acknowledge a width specification.

Span is used to specify attributes over items that may not be in a box shape. For example - If I had some text that was long enough to flow down for 4 lines. I could span one and a half lines and change font colour to red.

Regards
Day

The only way to learn is to do it yourself

whoisKeel
Offline
newbie
Last seen: 18 years 8 weeks ago
Joined: 2004-05-08
Posts: 6
Points: 0

width doesn't hold up in mozilla... :(

yeah, i switched it over to tables...

i don't see how divs would work in that instance, as they always seem to break to the next line...unless i'm missing something.

anyways, if curious here it is in final form

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 33 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

width doesn't hold up in mozilla... :(

whoisKeel wrote:

i don't see how divs would work in that instance, as they always seem to break to the next line...unless i'm missing something.

Text within a div (without a fixed height, unless IE) will increase the height of the div when it wraps. But even if you have 1 1/2 lines of text the div will be in a box shape, and half of the line will be empty.

Span, spans the text itself, it does not really form a box shape (container) around the text.

For example a div with a background colour of red would always be in a rectangular or square shape no matter where the text ended, while putting a span around text with a background of red would stop wherever the text and ending /span finished.

Regards
Day

The only way to learn is to do it yourself