Office Live Small Business Community Forums

CSS for list - had problems with Firefox & Safari

Last post 08-18-2008 10:30 AM by WendyMacdonald. 2 replies.
Page 1 of 1 (3 items)
Sort Posts:
08-16-2008 2:38 AM
WendyMacdonald Joined on 08-06-2008 Boston Posts 20
CSS for list - had problems with Firefox & Safari

I am using float with DIVs (nested) to achieve the format on my custom list.  My original version (and 4 more that I've been testing) all had problems under Safari and Firefox.  I don't have access to anything but IE7 for a few days, but I think I've solved my problems.  Would anyone please view this page and tell me if you see anything wrong?  http://bobfreedmanarranger.com/test6.aspx  To help you judge if what you're seeing is what I was expecting there are links on the page to screen shots and an HTML file that shows the structure of the document using colored boxes.

Thank you for letting me know if it works or not on your platform!

-Wendy

 

08-16-2008 10:09 AM In reply to
WendyMacdonald Joined on 08-06-2008 Boston Posts 20
Re: CSS for list - had problems with Firefox & Safari

Still a problem in version 6...so here is version 7!  http://bobfreedmanarranger.com/test7.aspx

08-18-2008 10:30 AM In reply to
WendyMacdonald Joined on 08-06-2008 Boston Posts 20
Re: CSS for list - had problems with Firefox & Safari - !!!FIXED!!!

In case anyone is interested, I've worked out the problems I was having.

 

Some of the problems were fixed with the DIV & float declarations (that took care of Firefox), some were caused by my lack of understanding of the PRE- and PRE-WRAP text formatting statements (trying to let the Rich Text in the list display as formatted in the list.)  Safari continued to have extra space in the middle column before the "Arrangement Description" paragraph.  I spun my gears for a long time trying to fix it with the FLOAT because it looked like something from column 1 was "bumping" column 2.  I finally started swapping out data fields one at a time - putting in placeholder text - until I found that getting rid of the "Arrangement Description" field fixed the problem.  That is one of the fields that have rich text, so then I focosed on the declaration for that paragraph formatting.

 

It sure is interesting how the different browsers have different tolerances! The modified declarations in my stylesheet section are: 

 

.SongTitle{FONT-SIZE: 16pt; FONT-WEIGHT: bold;}

 

.Instrumentation{FONT-SIZE: 10pt;}

 .ArrangementDescription{FONT-SIZE: 12pt; LINE-HEIGHT: 1.25em;} 

 

#SeriesWrap { WIDTH: 11.0in; }

 

#SeriesHeader {FONT-SIZE: 200%; FONT-WEIGHT: 900; BACKGROUND-COLOR: #2d73b9;

COLOR: WHITE; TEXT-ALIGN: Center; WIDTH: 100%;}

 

#ArrangementWrap {WIDTH: 100%;}

 

#Detail {FONT-SIZE: 100%; WIDTH: 100%;}

 

#NestedDetail {float: left; WIDTH: 7.5in; MARGIN-RIGHT: 0.5in; }

 

#Column1{float: left; WIDTH: 1in; margin: 6pt .1in 0 0;}

 

#Column2{margin: 6pt .1in 0 1.25in; }

 

#RemainderDetail{ }

 

#Column3{Margin: 6pt .1in 0 0; PADDING-LEFT: 2em; TEXT-INDENT: -2em; }

 

#Footer{clear: both; 100%; MARGIN-TOP: 12pt; LINE-HEIGHT: .5; BORDER-TOP: 1px solid silver;}

Advertisement