Gentoo Websites Logo
Go to: Gentoo Home Documentation Forums Lists Bugs Planet Store Wiki Get Gentoo!
Bug 134709 - Poor CSS layout usage
Summary: Poor CSS layout usage
Status: RESOLVED INVALID
Alias: None
Product: Websites
Classification: Unclassified
Component: [OLD] Articles (show other bugs)
Hardware: All Linux
: High enhancement (vote)
Assignee: Docs Team
URL: http://www.gentoo.org/doc/en/usb-guid...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2006-05-28 18:44 UTC by fow
Modified: 2006-05-29 10:28 UTC (History)
0 users

See Also:
Package list:
Runtime testing required: ---


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description fow 2006-05-28 18:44:40 UTC
I was browsing this article, when I noticed I had trouble scrolling through a code sample (I'm using Firefox 1.0.8) and deemed it to happen whenever a code sample reached a certain length vertically. I decided to investigate and noticed that the code sample was in a table when it had no reason to be. I noticed the same for the green notes. Sure, it works, but it's not very good. I don't want to restate what's already on the web, so see http://web.archive.org/web/20041010185323/http://www.allmyfaqs.com/faq.pl?Tableless_layouts  for some reasons why one shouldn't use tables outside of tabular data. I went ahead and coded a better and easier way to do the exact same. 

CSS:

div.note {
    color: black;
    background-color: #bbffbb;
    padding-left: .4em;
}
div.code {
    color: black;
    background-color: #eeeeff;
    padding-left: .4em;
}
div.code > h4 {
    color:white;
    background-color: #7a5ada;
    margin-bottom: .3em;
    padding-left: .6em;
    margin-left: -.4em;
}
div.code span.input { color: #0000c8 }
div.code span.comment { color: #d80000 }

and the XHTML portion:

<div class="note">
<p><b>Note:</b> Integer sed neque. Cras mattis ante id sem. Sed vehicula pellentesque
massa. Morbi iaculis purus. Ut elit. Sed ante sapien, placerat at,
pharetra eu, dignissim eu, eros. Nulla ultricies blandit augue.
Pellentesque sollicitudin tortor eleifend risus. Morbi urna ante, ornare
sed, placerat non, euismod quis, velit. Maecenas sodales, urna et
sollicitudin scelerisque, odio nulla consequat nulla, a scelerisque
augue elit a lacus. Maecenas ultrices bibendum neque. Nullam
sollicitudin aliquam nisl. Nulla eget magna. Morbi sit amet turpis. Nunc
scelerisque. Morbi ac lectus. Nulla viverra ligula eu arcu.</p>
</div>

<div class="code">
<h4>Code Listing 4.5: Installing coldplug</h4>
<samp><pre>
# <span class="input">emerge coldplug</span>
<span class="comment">(And you can add it to the boot runlevel)</span>
# <span class="input">rc-update add coldplug boot</span>
 * coldplug added to runlevel boot
 * rc-update complete.
</pre></samp>
</div>

The spacing is probably a bit off. I was only able to test it in Opera, Firefox 1.0.8 and 1.5.0.1, and Internet Explorer. The code worked fine in both Opera and Firefox, but the header background did not change color in Internet Explorer. Thank you for your time, and I apologize if I posted this bug in the wrong place.
Comment 1 nm (RETIRED) gentoo-dev 2006-05-28 21:48:20 UTC
Documentation team does not control page design and layout. You're seeing XML source code (which we do write) that has been processed and rendered into html by the server (which we don't control).

In addition, the scrolling problem you describe is a known bug within Firefox, not with the server; Firefox can't handle scrolling when the mouse is hovered over a preformatted <pre> block. It doesn't handle <pre> spacing and scrolling properly.
Comment 2 Jan Kundrát (RETIRED) gentoo-dev 2006-05-29 03:39:49 UTC
Please try http://wwwredesign.gentoo.org/ .
Comment 3 fow 2006-05-29 10:28:24 UTC
(In reply to comment #2 and #3)

I see. Thanks for your time.