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] ***