Re: [css-d] wrapping a list around an image -- me too! [SEC=UNCLASSIFIED / NO CAVEATS]
On 12/21/05, MacGillivray, Susan [EMAIL PROTECTED] wrote: 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. I'm pretty sure this is typical UL behavior. UL's align the text and have the bullets off the left. I usually give UL's at least 1.5 em left-margin for this reason. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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/
Re: [css-d] wrapping a list around an image -- me too! [SEC=UNCLASSIFIED / NO CAVEATS]
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=captionAustralian Parliament House br /Source:
AUSPIC/p /div pThe red of the Senate Chamber is based on the
traditional Westminster red, but also reflects the colours found in the
Australian landscape./p ul liThere are currently 76 Senators and
the Chamber has room to seat 120./li liThe Senate is comprised of 12
members from each state and two members from each of the
territories./li liSenators elected to represent the territories only
serve a maximum of three years./li liState 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/
Re: [css-d] wrapping a list around an image
On 15 Dec 2005, at 1:56 pm, Roger Roelofs wrote:
Ah, I went only halfway there when I redefined the li element. I
needed to zero out ul as well. But this still doesn't work in
IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in Safari/
OSX.
I can't test in ie/win (I'm on a mac). I can tell what is
happening in
safari 1.31, but I'm not sure how to fix it. If you add a light
background color to the li you will see how gecko and khtml
differ. In
firefox/gecko the li element is affected by the float and thus moves
over to accommodate it and the bullet is drawn relative to the li. In
safari/khtml the li flows under the float just like the ul does and
there is sort of an invisible container that is affected by the
floated
image and the bullet is drawn relative to this anonymous block.
This works as expected in various browsers.
style in the head.
Essentially make the li become a new formatting context, then the
whole thing moves. I use {display:table} for modern browsers,
'hasLayout' for old IE. IE Mac will need {display:inline-block}.
Of course, if you want the list to wrap under the image, then another
solution is required.
http://dev.l-c-n.com/_temp/list-image.php
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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/
Re: [css-d] wrapping a list around an image
Hi Ari,
I played around with the code, and was somewhat shocked to find this
solution:
ul { display: inline; }
Aren't lists always displayed inline? No matter, it fixes your IE6/Win
problems. I haven't tested on a Mac though, but I would image/hope it
would have no effect.
Cheers,
Jesse Skinner
www.thefutureoftheweb.com
Ah, I went only halfway there when I redefined the li element. I
needed to zero out ul as well. But this still doesn't work in
IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in
Safari/OSX.
Something is still missing.
__
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/
Re: [css-d] wrapping a list around an image
I played around with the code, and was somewhat shocked to find this
solution:
ul { display: inline; }
Aren't lists always displayed inline? No matter, it fixes your IE6/Win
problems. I haven't tested on a Mac though, but I would image/hope it
would have no effect.
No, lists (ol, ul and dl) are defined as block level elements. Check the
HTML 4 DTD:
http://www.w3.org/TR/html4/sgml/dtd.html
This does solve the IE problem, but doesn't solve the Safari issues. It
=is= true that we have an element in the left navbar that exceeds the width
defined for it. I'm going to follow up the earlier suggestion to rethink
the coding for those elements and see if that resolves the issue.
In a worst case, we're changing the sidebar element in about two weeks and
can pay attention to width issues this time around.
ari
__
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/
Re: [css-d] wrapping a list around an image
Hey Ari, You posted a URL that refers to your machine (localhost). Do you have a valid Internet URL? thanks, Mike [EMAIL PROTECTED] wrote: 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 __ 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/
Re: [css-d] wrapping a list around an image
Oops. That's what comes of testing in two places at one time. Try this, and thanks for noticing: http://dev.jwa.org/discover/oralhistory/guide.html Hey Ari, You posted a URL that refers to your machine (localhost). Do you have a valid Internet URL? thanks, Mike [EMAIL PROTECTED] wrote: 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 __ 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/
Re: [css-d] wrapping a list around an image
On Dec 14, 2005, at 6:18 PM, [EMAIL PROTECTED] wrote:
http://dev.jwa.org/discover/oralhistory/guide.html
I seem to be having an unexpected amount of trouble wrapping a list
around
an image.
Strange as it may seme, the ul extends under the floated image, so any
left margin on the ul is masked by the book. To prove this to yourself,
set a background-color on the ul. To get the look you're after, move the
margin/padding to the li like so.
ul {
margin: 0;
padding: 0;
}
li {
margin: .2em 0 .2em 3em;
}
If I recall correctly, ie/win handles this a bit differently, so my
suggestion may need a little tweaking for that browser.
PS. You had a padding of .5 on the li which I removed. In order to be
useful it would need a uint such as .5em.
Ah, I went only halfway there when I redefined the li element. I needed
to zero out ul as well. But this still doesn't work in IE6/Win. Looks
perfect in Firefox1.0x/Win. Doesn't work in Safari/OSX.
Something is still missing.
ari
__
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/
Re: [css-d] wrapping a list around an image
Ari,
On Dec 14, 2005, at 8:19 PM, Ari Davidow wrote:
On Dec 14, 2005, at 6:18 PM, [EMAIL PROTECTED] wrote:
http://dev.jwa.org/discover/oralhistory/guide.html
I seem to be having an unexpected amount of trouble wrapping a list
around
an image.
Strange as it may seme, the ul extends under the floated image, so
any left margin on the ul is masked by the book. To prove this to
yourself, set a background-color on the ul. To get the look you're
after, move the margin/padding to the li like so.
ul {
margin: 0;
padding: 0;
}
li {
margin: .2em 0 .2em 3em;
}
If I recall correctly, ie/win handles this a bit differently, so my
suggestion may need a little tweaking for that browser.
PS. You had a padding of .5 on the li which I removed. In order to
be useful it would need a uint such as .5em.
Ah, I went only halfway there when I redefined the li element. I
needed to zero out ul as well. But this still doesn't work in
IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in Safari/OSX.
I can't test in ie/win (I'm on a mac). I can tell what is happening in
safari 1.31, but I'm not sure how to fix it. If you add a light
background color to the li you will see how gecko and khtml differ. In
firefox/gecko the li element is affected by the float and thus moves
over to accommodate it and the bullet is drawn relative to the li. In
safari/khtml the li flows under the float just like the ul does and
there is sort of an invisible container that is affected by the floated
image and the bullet is drawn relative to this anonymous block.
Unfortunately, the only way I've been able to think of to fix it in
safari is to add extra markup inside the li.
Hopefully someone else on the list will have a solution.
Roger,
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
