Author: cpage
Date: Wed Nov 30 09:39:29 2005
New Revision: 10388
Modified:
trunk/www/books/drm/drm.css
Log:
Job: website
Fixed the implementation of hollow square bullets and the indentation of
chapter tables of contents for Firefox (1.5).
Firefox doesn't support 'float: left' within a :before with
content:. Instead, it requires faking the float using a negative left
margin and approximating the correct spacing with margin-right:. The
'float: left' is still specified, so the layout is always correct on
browsers that support it -- the workaround can concievably end up placing
the start of the text slightly to the right or left of the left edge of the
remaining lines in the paragraph.
Firefox requires a more specific selector than Safari (2.0.2) in order for
some rules to override other rules. I don't know which is correct, but the
more verbose selector should always work correctly. This corrects the
indenting of second-level list items in the tables of contents at the start
of chapters.
Modified: trunk/www/books/drm/drm.css
==============================================================================
--- trunk/www/books/drm/drm.css (original)
+++ trunk/www/books/drm/drm.css Wed Nov 30 09:39:29 2005
@@ -32,9 +32,9 @@
width: 7.5em;
}
/*
- When printing, Firefox (as of 1.5 RC2) places all the absolutely
- positioned elements on pages two and later on top of each other on the
- first page. As a workaround, use a float instead.
+ When printing, Firefox (as of 1.5) places all the absolutely positioned
+ elements on pages two and later on top of each other on the first
+ page. As a workaround, use a float instead.
NOTE: We could simplify things and just use 'float: left' for the
onscreen display, as well; however, in Safari (as of 2.0.2) the links in
@@ -175,12 +175,12 @@
color: #606; font: bold 1em "Gill Sans";
}
- /*
- I think this is supposed to affect the size of the "content:" text,
- below, but it doesn't in Safari/OmniWeb/WebCore; it works in
- FireFox. So instead, we explicitly specify the font size where the
- content text is generated, below.
- */
+/*
+ I think this is supposed to affect the size of the "content:" text,
+ below, but it doesn't in Safari/OmniWeb/WebCore; it works in FireFox. So
+ instead, we explicitly specify the font size where the content text is
+ generated, below.
+*/
/* #basic-navigation *:first-line { font-size: smaller } */
/* links */
@@ -551,12 +551,22 @@
{
list-style-type: none
}
-ul ul li:before,
-ol ul li:before
+#content ul ul li:before,
+#content ol ul li:before
{
float: left;
- margin-left: -1.15em;
- content: "\25A1";
+ margin-left: -1.15em; /* The exact offset used by Safari
(as of 2.0.2) */
+ content: "\25AB"; /* U+25AB WHITE SMALL SQUARE */
+
+ /*
+ Firefox (as of 1.5) ignores 'float: left', so we
+ need to add a right margin to separate the marker
+ from the text. This margin is only an
+ approximation; browsers that implement float will
+ position the text precisely.
+ */
+
+ margin-right: 0.6em;
}
/* Contents, Index and navigation lists are formatted more compactly. */
@@ -635,10 +645,20 @@
margin-top: 0;
list-style-type: none;
}
-ul.TOC li:before, ul.TOC ul li:before,
-ul.index li:before, ul.index ul li:before,
-ul.page-toc li:before, ul.page-toc ul li:before
- { content: ""; }
+/* "#content" is necessary for these selectors in order for ul.TOC and
+ ul.index to override the global "#content ul" settings in Firefox (1.5);
+ "#content" can be omitted in Safari (as of 2.0.2). I don't know which is
+ correct, but it's not a big deal to include the id in the selector; it
+ just would have been nice to simplify these selectors and make them
+ match the surrounding ones. */
+#content ul.TOC li:before, #content ul.TOC ul li:before,
+#content ul.index li:before, #content ul.index ul li:before,
+ul.page-toc li:before, ul.page-toc ul li:before
+ {
+ float: none;
+ margin: 0;
+ content: "";
+ }
/* Don't indent the first level of TOC and index lists */
ul.TOC,
--
Gd-chatter mailing list
Gd-chatter@xxxxxxxxxxxxxxxx
https://gauss.gwydiondylan.org/mailman/listinfo/gd-chatter
|
