Re: [css-d] How do you controll the vertical alignment of text inan li
2006/11/4, Dave Rathnow:
YES!! Thanks, that did it!
- Original Message -
From: Jorge Rumoroso :
Hello Dave. If you use line-height in the list item you have center it
vertically. Put same value in line-height that in height.
Dave, you just added line-height: 2.5em; in the CSS?
So that the CSS rules for li are now:
li {
height: 2.5em;
line-height: 2.5em; /* added */
width: 10em;
background: url(button.png) no-repeat center center;
background-color: transparent;
text-align: center;
}
Is that right?
--
Philippe DE MOURA
phdm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Necessity of width and height attributes within img
2006/10/16, [EMAIL PROTECTED] : Good afternoon, The Government of Canada is rolling out its next iteration of guidelines that governmental departments must adhere to, and I'm just in the process of writing up a constructive critique. One of the things I would like to see is height and width removed from image tags and instead be defined in the CSS. I have a number of recurring icons throughout my sites, and in the past I have been able to change the icons by simply overwriting the old version with the new one and updating the dimensions in the CSS accordingly. However, some other developers are leery of leaving them off. Are there any drawbacks or best practices I should know about? Good afternoon, CMS are necesseraly used by governmental departments. IMHO, the major drawback of your solution would be to prevent users of such tools to choose the size of the image they wish to include in a page (thanks be to God, CMS users cannot modify a style sheet...) This solution might be good in many cases, but a disaster in some other situations. Amitiés -- Philippe DE MOURA phdm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Necessity of width and height attributes within img
2006/10/17, Mark J. Reed:
The reason it has long been recommended to include width and
height attributes in image elements is to assist the browser in
rendering the page.
(...)
Modern browsers are quite adept at shuffling things around on the page
after the initial rendering, so my vote would be to leave off the
width and height specifications entirely.
Mark,
You are right, modern browsers don't really need the size of the
images in pixels, but don't forget that the width and height of images
are not nesseraly given in pixels. It can be, for instance, expressed
in ems or in % (of the width of its container),
Example, look at:
http://www.htmldog.com/articles/elasticdesign/demo/
the first image on his page has:
img alt=Elastic image src=icicles.jpg class=image id=image1
in the stylesheet:
.image {
width: 30em;
height: 15em;
margin: 0 2em 1em 2em;
border: 1px solid #ccc;
}
The size of the image will change with the default size of your font.
You could also have something like:
.image { width: 90%; height: auto; }
There is no other way to tell the brother what to do here. You do need
to specify at least a width or a height either in the style sheet or
in the source of your HTML document.
Regards
--
Philippe DE MOURA
phdm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] max width
Ross, your width should be set in % or be equal to auto. Gunlaug's solution (set the with in ems) is a good (you can read then: Elastic design http://alistapart.com/articles/elastic/) You can also set the width in % and the max-width in ems, the min-width remaining in pixels. I use this solution to handle elastic designs, because width in ems can easily lead to a horizontal scroll bar. Believe it or not, but if IE7 is working in standard mode, it will understand that (it won't in quirks mode). Amitiés 2006/9/26, Gunlaug Sørtun answered to Ross: http://blue-fly.co.uk/tri/test.php When I increase the text I would like the div to expand to fit the suckerfish dopdown in it. The problem is if I ser max-width and min-width the box does not expand. The element won't expand if you set 'width' in pixels. The 'max-width' and 'min-width' do nothing in your example. If you want the element to expand with font-size, then you must set 'width' in ems. You can then set a suitable 'max-width', and maybe also a 'min-width', in pixels if you like, or omit those properties. -- Philippe DE MOURA phdm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid design width problem - using display: table-cell to solve a clearing issue
[--- Le 03/02/06 13:56, Zoe M. Gillenwater a écrit : ---] :
So, remove the width and the float and apply margin-left: 180px to
#maincontent. Your new problem then becomes that the clearers you have
within #maincontent are clearing the #sidebar too. This is because
#sidebar and #maincontent are in the same block formatting context.
You need to create a new block formatting context for #maincontent so
that clearers within it pay no mind to #sidebar. The float you had on
there before was establishing a new context, but it was unusable with a
fluid layout. Luckily, you have several different ways:
http://www.w3.org/TR/CSS21/visuren.html#q15
I applied display: table-cell to #maincontent in Firefox and it worked
great. If this doesn't work in other browsers, you can try display:
inline-block on them.
Very interesting, Zoe. I was testing something like that this day and I
didn't get this solution.
display: table-cell applied ti #maincontent works on Opera 8.51.
To avoid any problem with IE, I have added through a conditional comment:
!--[if lt IE 7]
style type=text/css
#maincontent {
height: 1%; /* holly hack */
display: block; }
/style
![endif]--
The holly hack seems absolutely necessary, display: block is rather
an additional security.
It works fine as well on Netscape 7.02 (Gecko 1.02) and Mozilla Firebird
0.7 (Gecko 1.5) but amazingly, it works for these two brothers even if
display: block is applied to #maincontent.
Amitiés
--
Philippe DE MOURA
phdm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
