List items flow around the image, destroying the indent and the look of agendas in particular which are both news items and topic lists. Reproducible: Always Steps to Reproduce: 1.Click on sample URL above 2.Observe list elements flowing around the graphic. 3. Actual Results: Works as expected. We need a way to :- a) turn the graphic off. b) start any list rendering below the graphic c) a whole new template for agendas which does not have this problem
Created attachment 164294 [details] 2008-09-01-232657_775x655_scrot.png
I see several approaches to try to 'fix' this issue. The problem resides in the design of gentoo news items and the using of list elements with it. All our items have an image associated with its category. The image is displayed in the top left corner and the text around the image. Talking in CSS, the image is floating left and the text is adjusting around the image. When the text is a list, the elements starts in different positions depending on the image position. Possible solutions could be: 1. Stop using list items in the news. Probably something the people don't like, lots of news with lists lately. 2. Allow news item to not display an image Some xsl trickery to disable the image in the news item. This goes against all other news items until now, all of them have an image. 3. Make the list jump the image and start below clear:left for list in items news can do the trick (see test1). Problem is that sometimes the space leaving before the list could be too big. This will need some more testing anyway. 4. Make the list items to start after the image tricky and dirty. Using padding we can make all list items to start after the image (see test2). Another problem of this approach is that all lists in the news will suffer the same effect even if they are under the image. Not sure about the way we want to go, but most of them present serious issues.
Created attachment 164494 [details] test1-clear-css.jpeg clear:left test implementation.
Created attachment 164495 [details] test2-padding-hack.jpeg dirty padding hack
.news ul {display:table;} .news ol {display:table;} seems to do the trick.
