Hi all
I am dealing with the exact problem Ari experienced on an Australian
Government website. Unfortunately I can not provide a URL as the site
is in development.
The issue seems to be with the floats we are applying to images in the
content area of the site and only if a list follows the floated image.
We have not applied any styling to basic 'content area' lists but what
is happening is that the text aligns correctly where the paragraphs
should be but the bullet points seem to have a negative margin effect,
sliding them to butt-up beside the image, instead of acknowledging the
image margins.
I don't want to have to class the lists as that seems the wrong approach
when dealing with the 'content' area of the site.
Any advice appreciated.
/* Susan */
Code follows:
<div class="image_align_left">
<img src="../images/senate.jpg" width="200" height="150" alt="Senate
Chamber" /> <p class="caption">Australian Parliament House <br />Source:
AUSPIC</p> </div> <p>The red of the Senate Chamber is based on the
traditional Westminster red, but also reflects the colours found in the
Australian landscape.</p> <ul> <li>There are currently 76 Senators and
the Chamber has room to seat 120.</li> <li>The Senate is comprised of 12
members from each state and two members from each of the
territories.</li> <li>Senators elected to represent the territories only
serve a maximum of three years.</li> <li>State Senators normally serve a
six-year term with half the Senate retiring every three years.</li>
</ul>
CSS:
div.image_align_right, div.image_align_left {
border: 1px solid #ccc;
padding: 0.3em;
display: block;
}
div.image_align_left {
float: left;
margin: .5em 1.5em 1em 0;
}
div.image_align_right {
float: right;
margin: .5em 0 1em 1.5em;
}
div.image_align_right p, div.image_align_left p {
padding: 0;
margin: 0;
}
div.image_align_right p.caption, div.image_align_left p.caption {
text-align: center;
text-indent: 0;
font-size: 90%;
font-weight: normal;
background-color: #eee;
color: inherit;
}
_______________
Susan MacGillivray
Web Coordinator
Web Services
Department of the Prime Minister and Cabinet http://www.pmc.gov.au
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
[EMAIL PROTECTED]
Sent: Thursday, 15 December 2005 10:07 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] wrapping a list around an image
I seem to be having an unexpected amount of trouble wrapping a list
around an image.
On this particular page
(http://localhost/discover/oralhistory/guide.html), I have an image of a
book cover, floating left. Some text floats around the image, then a
list begins.
Surprisingly, the list does not indent under the text as is usually the
case. Instead, the text of the list is flush with the text margin, and
the list bullets are to the left of the text - originally, this put them
right under the image.
Once the list finishes wrapping, it's behavior returns to normal.
I could set the list up as a block, which would get me my desired
indent, I think, but would also eliminate the wrap - instead, the whole
list would be offset from the left margin by the same amount.
How is this situation handled gracefully?
Many thanks,
ari
Ari Davidow
[EMAIL PROTECTED]
http://www.ivritype.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org
-- http://www.evolt.org/help_support_evolt/
[ SEC=UNCLASSIFIED / NO CAVEATS]
----------------------------------------------------------------------
IMPORTANT: This message, and any attachments to it, contains
information that is confidential and may also be the subject of legal
professional or other privilege. If you are not the intended recipient
of this message, you must not review, copy, disseminate or disclose
its contents to any other party or take action in reliance of any
material contained within it. If you have received this message in
error, please notify the sender immediately by return email informing
them of the mistake and delete all copies of the message from your
computer system.
----------------------------------------------------------------------
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
