Re: [WSG] Images & Paragraph Width
On Fri, 29 Aug 2008 15:39:04 +1000, Aldona wrote:
> [...]
> I have an image which my CSS doesn't know (and will never know) the size of.
> The image
> is in a paragraph with the class of 'img'.
>
> Regular Image
>
> What I want to do is put a border around the paragraph (not the image so it
> goes around
> the text as well). What happens is the border winds up the width of the whole
> page even
> though I have margin and padding set to zero.
>
> The CSS is:
>
> p.img{
> padding: 0.3em;
> margin: 0em;
> border: 2px solid red;
> font-size: 0.9em;
> }
>
> How can I stop the border stretching the entire width of the page.
> Unfortunately in
> this case float is not an option and I have a limitation in that the HTML
> needs to
> remain as basic as possible. The CSS can be as complicated as anything but
> the HTML
> needs to be simple.
>
[...]
As Bill Brown suggests, 'display: inline-block;" should do it for
most browsers. Being on a Mac right now, I can't vouch for IE, but
'inline-block' sets "hasLayout" for IE, so results will depend on the
context of your design. Post an example if you run into trouble.
Firefox 2 does not understand 'display: inline-block;' - try using
'display: -moz-inliine-box;' for that one.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Images & Paragraph Width
What about a _javascript_
solution? Find the width of the image and give the paragraph tag a
width to match.
--
Michael
Turnwall
for all
your web code needs
turnwall.net
Aldona wrote:
Hi,
I have a problem which I feel like I should know but apparently don't.
:-)
I have an image which my CSS doesn't know (and will never know) the
size of. The image is in a paragraph with the class of 'img'.
Regular
Image
What I want to do is put a border around the paragraph (not the image
so it goes around the text as well). What happens is the border winds
up the width of the whole page even though I have margin and padding
set to zero.
The CSS is:
p.img{
padding: 0.3em;
margin: 0em;
border: 2px solid red;
font-size: 0.9em;
}
How can I stop the border stretching the entire width of the page.
Unfortunately in this case float is not an option and I have a
limitation in that the HTML needs to remain as basic as possible. The
CSS can be as complicated as anything but the HTML needs to be simple.
Hopefully someone will have come across this problem before and be able
to point me in the right direction.
Thanks to all.
IceKat.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
RE: [WSG] Images & Paragraph Width
Just a thought... but perhaps a would better suit your design requirements than a ? -- The generation that took acid to escape reality is now taking antacid to deal with reality http://blog.dwacon.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Images & Paragraph Width
Hi,
I had a quick look on Google:
Here you go
Not sure if it works.
A link or two:
http://www.homeandlearn.co.uk/CSS/css1p8.html
http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-single/
Kate
- Original Message -
From: "Aldona" <[EMAIL PROTECTED]>
To:
Sent: Friday, August 29, 2008 6:39 AM
Subject: [WSG] Images & Paragraph Width
Hi,
I have a problem which I feel like I should know but apparently don't. :-)
I have an image which my CSS doesn't know (and will never know) the size
of. The image is in a paragraph with the class of 'img'.
Regular
Image
What I want to do is put a border around the paragraph (not the image so
it goes around the text as well). What happens is the border winds up the
width of the whole page even though I have margin and padding set to zero.
The CSS is:
p.img{
padding: 0.3em;
margin: 0em;
border: 2px solid red;
font-size: 0.9em;
}
How can I stop the border stretching the entire width of the page.
Unfortunately in this case float is not an option and I have a limitation
in that the HTML needs to remain as basic as possible. The CSS can be as
complicated as anything but the HTML needs to be simple.
Hopefully someone will have come across this problem before and be able to
point me in the right direction.
Thanks to all.
IceKat.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Images & Paragraph Width
Aldona wrote: > What I want to do is put a border around the paragraph (not the image so > it goes around the text as well). What happens is the border winds up > the width of the whole page even though I have margin and padding set to > zero. Since paragraphs are block level elements, stretching to fill the available area is what would be expected in this case. Setting margin and padding to zero would actually ensure that your paragraph did exactly that. > How can I stop the border stretching the entire width of the page. > Unfortunately in this case float is not an option and I have a > limitation in that the HTML needs to remain as basic as possible. The > CSS can be as complicated as anything but the HTML needs to be simple. Without floating, your only option that I can imagine would be applying display:inline-block on the paragraph element. In theory, this should cause a sort of shrink-wrap effect on the paragraph allowing it to shrink to the size of the content (in this case, your image) and then apply a border. This code appeared to work for me on FF3/Ubuntu: http://www.google.com/intl/en_ALL/images/logo.gif";> Regular Image ...but bear in mind, you'll need to apply adjustments for some versions of Internet Explorer and FF lte 2 (and maybe others). Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
