[css-d] Vertically centering text in a paragraph
I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
Tim: I know you said that you didn't want to go the table way, but a table in this case is perfectly acceptable, insofar as the relationship between the image and text is a tabular one. I wouldn't hesitate to use a table here, so long as it's marked up properly. Bob - Original Message - From: Tim Dawson t...@ramasaig.com To: css-d@lists.css-discuss.org Sent: Monday, April 13, 2009 9:45 AM Subject: [css-d] Vertically centering text in a paragraph I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
Thanks, Bob. I know it's possible to take table-aversion too far, and you are right in saying the information is essentially tabular. I'll look into it. Meanwhile I'm using a varying number of br / which has the merit of being very simple to insert. Provided the content is fairly static, it's not much trouble to maintain, either. Not good semantically, of course, and I'm sure I'll have the standardistas after me. Tim designer wrote: Tim: I know you said that you didn't want to go the table way, but a table in this case is perfectly acceptable, insofar as the relationship between the image and text is a tabular one. I wouldn't hesitate to use a table here, so long as it's marked up properly. Bob - Original Message - From: Tim Dawson t...@ramasaig.com To: css-d@lists.css-discuss.org Sent: Monday, April 13, 2009 9:45 AM Subject: [css-d] Vertically centering text in a paragraph I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson t...@ramasaig.com mailto:t...@ramasaig.com wrote: I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Tim Dawson I just woke up, so roll with me here. How about wrapping each image/text in a div/p combination. Since images are inline elements, this should technically be the more semantic way of doing it. By wrapping the text inside a span, you should be able to open yourself up to using the vertical-align property of CSS. -- -Jack Timmons http://www.trotlc.com Twitter: @codeacula Thanks, Jack. My image/text are already in div/p combinations, as you suggest. I'll explore putting the text into a span. Meanwhile the br / solution (forcing the text down the para), while not good semantically, is quick and flexible, particularly if the clients change their mind when they see the result. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson t...@ramasaig.com wrote: I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Tim Dawson I just woke up, so roll with me here. How about wrapping each image/text in a div/p combination. Since images are inline elements, this should technically be the more semantic way of doing it. By wrapping the text inside a span, you should be able to open yourself up to using the vertical-align property of CSS. -- -Jack Timmons http://www.trotlc.com Twitter: @codeacula __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
andree hollander wrote: On 2009-04-13, at 13:03, Tim Dawson wrote: I'll explore putting the text into a span. Meanwhile the br / solution (forcing the text down the para), while not good semantically, is quick and flexible, particularly if the clients change their mind when they see the result. Bad idea: I know, that's why I'm here looking for a better solution. It still works in IE7 (and FF3 and Opera) meanwhile, so I can show the client the effect. Also note http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.mull-bed-and-breakfast.co.uk%2Fnewcrofts%2Fwildlife.php No Character Encoding Found! Thank you for pointing this out. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
You can apply a class to the paragraphs that are together and make the line height the same as the height of the image and then st vertical-align to middle. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
sorry, that was bad information. I just tried it and while it does make it vertically centered, it adds huge space because of the line height. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
Brian Hazelton wrote: sorry, that was bad information. Thanks for trying, anyway (I got both your e-mails). It seems it's one of those apparently small problems that require sledge-hammer treatment to achieve in CSS. Regards, Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Fix For Floated Netflix-Style Links?
Hey, folks;
I have a three-column, fixed-width holy grail layout, and I've recently
added a jQuery plugin that transforms a set of radio buttons into six
floated A elements with a star background, which submit a vote to rank this
page when you click on them. The problem is that these star elements are
floated left by default, and I'd like to center them in the column.
I did this by wrapping the elements in a div (with an assigned width) and
then by assigning a left margin calculated to push the div out into the
center of the column. This works in every browser but, you guessed it, IE.
Problem is, in IE 7 that margin appears to be not quite doubled, but
definitely added to:
http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html
(This sample page has no dynamic transformation, only the HTML as it's
rendered once the plugin is done, so you shouldn't have to turn JavaScript
on.)
Any idea why this is, or how to fix it? The page validates as valid XHTML,
and the CSS validates with the exception that I do use moz-border-radius and
webkit-border to provide rounded edges on some browsers... But those
elements (th) aren't present on this page.
---
For the record, here's the relevant HTML once the page is finished
rendering:
div id=article_voting
form
action=http://www.starcitygames.com/polls/poll_article_process.php;
method=get
input name=article_ID id=article_vote_ID value=17218
type=hidden /
h2 id=nochangeFeedback Options/h2
div id=rating_control
div class=star-rating-control
div class=rating-cancela
title=Cancel Rating/a/divdiv class=star-rating rater-0 hover-star
star-rating-applied star-rating-live star-rating-ona title=Very
poor1/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=Poor2/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=OK3/a/divdiv class=star-rating rater-0 hover-star
star-rating-applied star-rating-live star-rating-ona
title=Good4/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=Very Good5/a/div
/div
input style=display: none; class=hover-star
star-rating-applied name=article_ranking value=1 title=Very poor
type=radio /
input style=display: none; class=hover-star
star-rating-applied name=article_ranking value=2 title=Poor
type=radio /
input style=display: none; class=hover-star
star-rating-applied name=article_ranking value=3 title=OK
type=radio /
input style=display: none; class=hover-star
star-rating-applied name=article_ranking value=4 title=Good
type=radio /
input style=display: none; class=hover-star
star-rating-applied name=article_ranking value=5 title=Very Good
type=radio /
/div
span id=hover-testRate this article/span,br /
then a
href=http://forums.starcitygames.com/viewtopic.php?t=316966;talk about it
in our forums!/abr /
input style=display: none; value=Submit
id=article_submit type=submit /
/form
/div
Here's my customized CSS to contain the floated elements:
#article_voting, #article_voting form {
margin: 5px;
padding: 5px 5px;
text-align: center;
background-color: white;
border: 1px solid black;
}
#rating_control {
margin: 0px 0px 0px 225px;
padding: 0px;
border: 1px dotted blue;
overflow: hidden;
width: 102px; /* IE7 requires a width to center properly */
}
And here are the elements, as styled via the jQuery Rating Plugin.
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/
*/
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-ind
ent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidd
en}
div.rating-cancel,div.rating-cancel a{background:url(delete.gif) no-repeat 0
-16px}
div.star-rating,div.star-rating a{background:url(star.gif) no-repeat 0 0px}
div.rating-cancel a,div.star-rating
a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */
Thanks in advance,
The Ferrett
Co-writer, www.mighthavebeen.net, a webcomic about rock, the end of the
world, and tiny plastic guitars
Editor-in-Chief and
[css-d] Tables and font-size and Chrome
The site which I work on has an older form that is several pages long.
The outer shell is doctype 4.0, tabular with so many coding errors I
could only make it work in all browsers. Currently, I updated the
out shell to be standards css based with xhtml transitional but kept
the form in the older tabular format.
I developed a special style sheet for the tabular section and works in
all browsers I support
IE 6 7 8, Firefox 2 and 3, Safari 3.
Although we don't officially support Google Chrome, but had some time
so I was going through the site in this browser. The font-sizes
within the tables were so much larger in Google than any other
browser.
body {
font-size:1em;
}
The entire tabular structure is in a container I called .outer
within that are several nested tables which I didn't deal with so I
put.
.outer {
font-size: 75%;
line-height:130%;
.outer td {font-size: 100%; }
.outer td table tr td {font-size: 100%;}
.outer td table tr td table tr td {font-size: 100%; }
This is a small piece of the css and nothing is live so I cannot show you.
Thanks in advance
Nancy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
Brian Hazelton wrote: does IE support display:table or display:table cell though? I could have sworn it didn't. Georg has a long article on this, on his web site, and he says it doesn't. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
does IE support display:table or display:table cell though? I could have sworn it didn't. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Tim Dawson Sent: 13 April 2009 09:46 To: css-d@lists.css-discuss.org Subject: [css-d] Vertically centering text in a paragraph I'm working on a site which has several images on the page (300x225px). Each image has some descriptive text alongside, which generally is not as high as the image. My client would like the text vertically centred on the image. http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php CSS deliberately seems to avoid a v-align capability in paragraphs. I realise I could introduce padding, but that would have to be tailored for every piece of text. Tables allow v-align in cells, I know, but I don't want to go that route either Is there a better way, please ? Hi Tim This has been in discussion a few times. Here is the link that will help you. http://www.mondiara.com/graphics/valign.html It is based on display:table and display:table-cell where your div acts like a table. Follow the CSS in the example and you will find all you need. Cheers Ian Iyesolutions.co.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
does IE support display:table or display:table cell though? I could have sworn it didn't. - IE7 and older does not support CSS table. - IE8 does support CSS table as well as any other browser - when in full standards mode. Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Fix For Floated Netflix-Style Links?
The Ferrett wrote: This works in every browser but, you guessed it, IE. Problem is, in IE 7 that margin appears to be not quite doubled, but definitely added to: http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html Interesting, indeed... I can get the block centered (more or less) in compliant browsers and even IE/7. But lost the stars in Mac FF. Sorry. Such is life... :-) http://chelseacreekstudio.com/ca/cssd/devel.htm First set of selectors at top of style sheet http://chelseacreekstudio.com/ca/cssd/devel_files/table_fr.css __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Fix For Floated Netflix-Style Links?
David Laakso wrote: The Ferrett wrote: This works in every browser but, you guessed it, IE. Problem is, in IE 7 that margin appears to be not quite doubled, but definitely added to: http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html Interesting, indeed... I can get the block centered (more or less) in compliant browsers and even IE/7. But lost the stars in Mac FF. Sorry. Such is life... :-) http://chelseacreekstudio.com/ca/cssd/devel.htm First set of selectors at top of style sheet http://chelseacreekstudio.com/ca/cssd/devel_files/table_fr.css Hmm. Takes forever and a day to load but the stars magically appeared now on this end in Mac FF. Not tested in PC FF. ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Get rid of top space
I am trying to get rid of the space right at the top of the page but I can't seem to do it, what do I need to doo? Thank you http://tinyurl.com/clg668 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Fix For Floated Netflix-Style Links?
The Ferrett wrote:
I did this by wrapping the elements in a div (with an assigned
width) and then by assigning a left margin calculated to push the div
out into the center of the column. This works in every browser but,
you guessed it, IE. Problem is, in IE 7 that margin appears to be not
quite doubled, but definitely added to:
http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html
Make it...
#rating_control {
border: 1px dotted blue;
overflow: hidden;
width: 105px;
margin: 0 auto;
}
...and it will center in all browsers - including all IE versions.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
body margin and padding set to 0 and the first element set to margin-top 0 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
--- On Mon, 4/13/09, Brian Hazelton bdh_2...@comcast.net wrote:
From: Brian Hazelton bdh_2...@comcast.net
Subject: Re: [css-d] Get rid of top space
To: bayliss_tre...@yahoo.com
Cc: css-d@lists.css-discuss.org
Date: Monday, April 13, 2009, 1:54 PM
body margin and padding set to 0 and the first element set
to margin-top 0
Thanks Brian,
I think that is is already:
body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 0px;
color: #003300;
font: 80% Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
#wrapper {
padding: 0px 0px 10px 10px;
margin: 0px auto;
width: 730px;
background-color: #fff;
text-align: left;
}
#wrapperLogoNavigation {
padding: 0px;
margin: none;
background: #fff;
border-bottom: #fff 5px solid;
height: 65px;
text-align: right;
}
#wrapperLogoNavigation img{
float: left;
}
p{
padding: 0px 0px 0px 0px;
font-size: 100%;
margin: 0 0 1em;
line-height: 1.25pc;
}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
make p margin:0px instead of the 0 0 1em, I just tried it and that is what was screwing you up. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
trevor bayliss wrote:
I am trying to get rid of the space right at the top of the page but I can't
seem to do it, what do I need to doo? Thank you
http://tinyurl.com/clg668
It is a collapsing margin problem.
#wrapperLogoNavigation {
/*padding: 0px; */
padding-top: 1px;
/*margin: none; */
}
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
aside: you'll save yourself a lot of grief if you validate the css
(although doing so would not have corrected the issue you wrote about)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
Try setting html margins to zero as well. I have pages with and without top gap, and that seems to be the only difference. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Get rid of top space
Thanks Brian Elias and David David it only had one error which obviously happened between the last time I validated it- I have now sorted out margin: none instead of margin: 0px There are however some warnings there-important? Thanks __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centering text in a paragraph
Venditelli, Daniel - Web Development Administrator wrote: Just keep in mind that if you do use br/ then your layout won't hold up as soon as someone uses their browser settings to increase the font-size Yes, the br / is only a stop-gap to show the client. It doesn't appear that there's any simpler solution than to fall back on tables. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height for wrapper div?
I'm using this sticky footer method: http://www.cssstickyfooter.com/ But my wrapper (outlined in red) isn't going to the bottom - can someone point out my error(s)? This page validates as both XHTML strict and CSS. My page: http://www.redkitecreative.com/projects/mgwa/ -- Debbie C www.redkitecreative.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to set div opacity
Chike Loney wrote:
How do I set the opacity of a div to let's say 50%
DIV, or DIV background? If the latter, here's my (partial) solution
for 25%:
.aside {
background: url(images/argb44452713.png);
*background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44452713,endColorstr=#44452713);
/*AARRGGBB*/
background: rgba(45, 27, 13, .25);
}
The semi-transparent PNG is for pre-CSS3 browsers, with the exception of
IE, which gets its proprietary gradient filter. Browsers that handle
RGBA use the last declaration-- the rest ignore it.
The *background: transparent; nullifies the background-image in
IE 5,6,7. If I knew how to do the same for IE 8 I'd use this filter:
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44452713,endColorstr=#44452713);
Ideas?
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to set div opacity
On Apr 14, 2009, at 8:26 AM, David Hucklesby wrote:
How do I set the opacity of a div to let's say 50%
DIV, or DIV background? If the latter, here's my (partial) solution
for 25%:
.aside {
background: url(images/argb44452713.png);
*background: transparent;
filter:progid:DXImageTransform
.Microsoft.gradient(startColorstr=#44452713,endColorstr=#44452713);
/*AARRGGBB*/
background: rgba(45, 27, 13, .25);
}
The semi-transparent PNG is for pre-CSS3 browsers, with the
exception of
IE, which gets its proprietary gradient filter. Browsers that handle
RGBA use the last declaration-- the rest ignore it.
The *background: transparent; nullifies the background-image in
IE 5,6,7. If I knew how to do the same for IE 8 I'd use this filter:
-ms-
filter
:progid:DXImageTransform
.Microsoft.gradient(startColorstr=#44452713,endColorstr=#44452713);
I wouldn't use that -ms- filter, except for iE 6, maybe. IE 7 +
supports transparent PNG's just fine. The -ms- filter has some
unwanted side effects, one of which is to make fonts look cr*p, more
so with cleartype turned on. Besides, those -ms- filters require
'hasLayout' to be true to make them work, which can have negative side
effects on its own.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] OFF TOPIC (webpage size)
Just out of curiosity, if i had a page with a width of 768px total, and the rest is a subtle bg, would that be too small of a width? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height for wrapper div?
Debbie Campbell wrote: I'm using this sticky footer method: http://www.cssstickyfooter.com/ But my wrapper (outlined in red) isn't going to the bottom - can someone point out my error(s)? This page validates as both XHTML strict and CSS. My page: http://www.redkitecreative.com/projects/mgwa/ Your markup differs from the example. There should only be two outer DIVs on the page-- #wrapper (with min-height: 100%;) and the #footer. Those extra DIVs on your page are making it taller than 100% at all times. Incidentally, your page does not like text sizes other than medium. Note that medium on my older IBM laptop is 16px in Firefox, but 20px in IE and Opera (compensating for small pixel sizes). Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] OFF TOPIC (webpage size)
On Mon, 13 Apr 2009 20:01:24 -0600 Came this utterance formulated by Brian Hazelton to my mailbox: Just out of curiosity, if i had a page with a width of 768px total, and the rest is a subtle bg, would that be too small of a width? For a phone that can view 400px wide or a 2400px wide monitor? Perhaps you should consider a flexible width, not a fixed pixel width. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
