[WSG] table-cell and ie
Please help as I am starting to go bald from pulling by hair out over this issue. Is there anyway (hack) to get Internet Exlporer to abide by the table-cell property? Or is there a max-height hack for IE? :-) Janelle
RE: [WSG] Font Size Re-sizing
We are in the middle of redesigning our company's website and after using pt
for so long ems have been challenging to get used to. I have declared body
{font-size: 1em;} and have adjusted from there (i.e. sidenav {font-size:
0.80em;}.Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
Thanks,
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Darren Wood
Sent: Tuesday, August 16, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I say
designer I mean those people who spend their hours in photoshop and NOT
doing the markup) who still insist that font-sizes be in point size. That
is simply not practical in the web-space (as, I'm sure you know)...generally
I ignore them and their silly point sizes. I find the best method for font
resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what the
design shows) and then use em's to inc them for headers and strong tags,
etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
<[EMAIL PROTECTED]> wrote:
> G'day Mates,
>
> I've reviewed articles on A List Apart and the WSG sites, as well as,
> The CSS Anthology, but I really would like a more defintive answer
pertaining to the best method for re-sizing text.
> Therefore, I thought it prudent to turn to the experts!
>
> The following is my current set of rules for allowing visitors to zoom
text:
>
> body
> {margin: 0;
> padding: 0;
> font-size: 76%;
> background: #6A6A8F;}
>
> #container
> {width: 100%;
> font: normal 1em/14pt verdana, arial, sans-serif;
> text-align: justify;
> background: #fff;}
>
> Any advice regarding this important design and accessible feature is
greatly appreciated!
>
> Respectfully submitted,
> Mario S. Cisneros
>
>
> **
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> **
>
>
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Font Size Re-sizing
Ahhh, thank you. Does it always have to have the slash or can you use a
space? All other css short cuts seem to use a space, is the
size/line-height short cut special?
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Brian Cummiskey
Sent: Tuesday, August 16, 2005 2:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote:
Can you explain what the slash in your example is (body {font:
> x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
130% in this case is the line height. it's short hand for:
body {
font-family: verdana, sans-serif;
font-size: x-small;
line-height: 130%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Font Size Re-sizing
Oh, another quick question. Is it better to use % for line-height versus
pixel?Like I said I am used to using set sizes (pt & px) for everything.
This css is such a learning/breaking bad habits adventure.
:-)
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Brian Cummiskey
Sent: Tuesday, August 16, 2005 2:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote:
Can you explain what the slash in your example is (body {font:
> x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
130% in this case is the line height. it's short hand for:
body {
font-family: verdana, sans-serif;
font-size: x-small;
line-height: 130%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
[WSG] Win IE hacks -- Please help!
We are redesigning our company website and I am in charge of creating the templates. We are moving into XHTML and pure stylesheets which has been (and is still) a really amazing learning curve. We have always had to code cross browser but with this redesign we are finally chucking Netscape 4.7 and Mac IE (yippie). Windows IE has always been our savior as far as doing what you wanted it to do but now that we are moving into pure css and tabless we have suddenly discovered the evils of Win IE. I have searched high and low to find ways around IE css issues but have recently stumbled on the underscore (underscore in front of the css tag, i.e. _height). I've also seen slash stars which I have tried to decipher but got a headache instead. We currently are using a sniffer for Win IE but I would really like to try keep the win_ie.css as minimal as possible. What good hacks are there for Win IE like the underscore where other browsers don't render. Oh, yeah, I found the star (* html, * body) one as well. That's a good one too. But it would be nice to have a full list for a one stop shop. :-) My recent headache is trying to create a column/row of cells, like what tables used to be used for, but with the display properties table, table-row, table-column, table-cell. And after seeing how beautifully they are rendered in Firefox/Mozilla/Netscape 7 I want to figure out how to force Win IE to render them too. Any suggestions? Oh yeah, I can not give set heights to the divs because the content is flexible (more or less depending on the page). Thanks, Janelle ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Win IE hacks -- Please help!
Thanks Ben. Unfortunately it is not for tabular data but page layout. But let me clarify that. The main template (topnav, sidenav, footer) is in a tabless format and validated. The content area will have a 2 row, 3 column layout. Each cell will contain content, like highlights or list of products, but not relate to eachother in a tabular fashion. However each cell has a bottom border that need to match up so if one cell expands in height I need the rest to expand at the same rate. Only a table can give this or display: table-cell. The table-cell would be perfect for this issue except for Win IE. So far I have it in a single table with styled cells but was wondering if there is a trick to get Win IE to render table-cell correctly or some way to do this tabless. I am uncomfortable with hacks and am trying to avoid them as much as possible. I really appreciate all the links and info on Win IE hacks that everyone has been giving but reading about how they work is not helping. I could really use an example of how to implement them. Can you give me an example of CC being used in a style sheet? Thanks, Janelle -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Curtis Sent: Tuesday, August 16, 2005 7:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Win IE hacks -- Please help! On Aug 16, 2005, at 3:10 PM, Janelle Clemens wrote: > My recent headache is trying to create a column/row of cells, like > what tables used to be used for, but with the display properties > table, table-row, table-column, table-cell. Use a table. Tables are valid HTML. You style them with CSS. When you have tabular data, using anything else is unsemantic and wrong. If you have rows and columns, then you have tabular data. Use a table. The table tag is not banned for use in XHTML+CSS sites. Using tables to lay your page out is a bad idea, but anything other than tables for tabular data is a worse idea. Don't throw the baby out with the bathwater. Oh, and regarding hacks for IE: remember that IE7 is coming out very soon, and anything that relies on a parsing bug may behave unpredictably. Using "* html" will likely mean that you will apply your hack to IE7 before you even see how it does without the hack. Your best (only?) bet is the conditional comment option. Remember: "Only hack the dead." -- Ben Curtis : webwright bivia : a personal web studio http://www.bivia.com v: (818) 507-6613 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Win IE hacks -- Please help!
Hi Ben. I tried your code but it is not giving what I need. It's a design
thing. Not my design as we have designers that are designing the
templates. My job is to make the html look like their comps. Here are
the examples:
http://www.sgi.com/tempie.html
The first is your code. The second is divs using float left. The third is
display: table-cell; (the third looks perfect in Firefox).
I need the borders of all 3 cells to match up. Like I said it is a design
thing. So far my best solution is a simple table giving each cell the
background image that creates the border.
Do you know if IE7 will acknowledge the display value table-cell?
Thanks for your help by the way.
:-)
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Ben Curtis
Sent: Wednesday, August 17, 2005 9:50 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Win IE hacks -- Please help!
On Aug 16, 2005, at 9:45 PM, Janelle Clemens wrote:
> Thanks Ben. Unfortunately it is not for tabular data but page
> layout. But
> let me clarify that. The main template (topnav, sidenav, footer) is
> in a tabless format and validated. The content area will have a 2
> row,
> 3 column
> layout. Each cell will contain content, like highlights or list of
> products, but not relate to eachother in a tabular fashion.
> However each
> cell has a bottom border that need to match up so if one cell expands
> in
> height I need the rest to expand at the same rate. Only a table
> can give
> this or display: table-cell.
I think your previous training with tables has taught you to look at things
on a page, instead of things being properties of the content.
For example:
- you see that the bottom borders of two cells in one row need to line up on
the page
- I see that there are two equally important content areas which are
themselves related; I need to illustrate these relationships by placing the
content areas side by side, and making them visually take up the same space
as each other.
Coding XHTML+CSS is much easier when you look at the semantics first.
They share a bottom border. Why? What does this mean? It means they are a
group.
div.blockContent {
float:left;
width:100%;
border-bottom:2px solid #000;
}
div.blockContent div {
float:left;
width:50%;
}
blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah
Notice: the borders matching up on the page indicate that the "cells"
are related, and since the border is the relationship, the border property
gets assigned to the element that relates them -- the parent div.
(The "float:left;" on the parent div is just so that it stretches to enclose
all of the floating children. Since the width is 100%, it has no other
effect.)
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] IE Madness
Works fine on IE5.5. I did notice you don't have which might fix your problem. From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kenny GrahamSent: Thursday, August 18, 2005 3:45 AMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] IE Madness Works fine for me in IE6/WinXP/SP2. Normally, I'd recommend you uninstall and reinstall your browser... but wait... it's IE, and I doubt you want to reformat. *evil grin*
RE: [SPAM?]: Re: [WSG] Firefox Greyscale Extension
That is a great webiste. Thanks. :-) -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of morten fjellman Sent: Thursday, August 18, 2005 8:34 AM To: wsg@webstandardsgroup.org Subject: Re: [SPAM?]: Re: [WSG] Firefox Greyscale Extension Not sure if it's exactly what you want, but try this one: http://colorfilter.wickline.org/ Fjellman On 8/18/05, Marcel Pociot <[EMAIL PROTECTED]> wrote: > Hey sorry for not translating it into english :) > > Well I want to know if there is a firefox extension that makes it > possible to look at a webpage in greyscale. > The point is: To have a webpage barrier-free the contrast of the > webpage has to be good enough to recognize every image, link, etc. > even if the monitor would only display it in greyscale. > > It would be a lot of work to check for this feature by making > screenshots of the webpage and editing this screenshot in Photoshop. > > So unfortunately editing the css would not sovle this problem. > > Or maybe a little tool that could switch Windows to greyscale (like > when Windows XP is shutting down) - Just a simple and fast solution > for this :) But FF Extension would be the best of course ;) > > > Marcel > > > Marcel Pociot | e-mail: [EMAIL PROTECTED] > > .. . . . . . . . . . . . . . . . . . . . . . > > Xbyte GmbH | 40699 erkrath | trills 23 > > http://www.xbyte.de | tel.: 02104-138 49 30 | fax: 02104-138 49 34 > > > -Ursprüngliche Nachricht- > Von: Zulema [mailto:[EMAIL PROTECTED] > Gesendet: Donnerstag, 18. August 2005 16:44 > An: wsg@webstandardsgroup.org > Cc: Marcel Pociot > Betreff: [SPAM?]: Re: [WSG] Firefox Greyscale Extension > > Quoting Marcel Pociot <[EMAIL PROTECTED]>: > > Hallo zusammen! > > > > Ich suche nach einer Erweiterung für Firefox , die es ermöglicht > > eine Webseite in Graustufen anzeigen zu lassen. > > Im Bezug auf Barrierefreiheit ist die Darstellung der Farben in > > Grautönen mit ausreichendem Kontrast eine Prio 1. > > Allerdings ist es etwas umständlich von dem Bildschirm ständig > > Screenshots zu machen und diese in Grautöne umzuwandeln. > > > > Wenn es eine einfache Firefox-Plugin Lösung geben würde, wär ich > > sehr erfreut. > > > > Google hat mir leider nicht weitergeholfen. > > > > Mit freundlichen Grüßen, > > Marcel Pociot > > > > Marcel Pociot | e-mail: [EMAIL PROTECTED] .. . . . . . . . . . . . . . > > . . . . . . . . > > Xbyte GmbH | 40699 erkrath | trills 23 http://www.xbyte.de | tel.: > > 02104-138 49 30 | fax: 02104-138 49 34 > > It's very interesting how this translates: > --- > Hello together! I look for for an extension for Firefox, it make > possible a web page in gray tones indicate to let. In the reference to > barrier liberty the representation of the colors is in grey tones with > sufficient contrast a Prio 1. However it is to be constantly made > somewhat pedantically from the screen Screenshots and converted these > into grey tones. If it would give a simple Firefox Plugin to solution, > more waer I much pleases. Google did not help me unfortunately. > Yours sincerely, > Marcel Pociot > --- > > Marcel, if I understand correctly, you are looking for a Firefox > extension that will remove all colors from a web page to render it in black and white. > I do not believe there is such an extension. You may be able to use > the Web Developer toolbar [1] to edit the CSS of a webpage and change > the colors manually, but that will not be easy to do either compared > to your current process. > > [1] http://chrispederick.com/work/firefox/webdeveloper/ > > hope that helps, > Zulema > > · · · · · · · · · · · · · · · · > Zulema Ortiz > web designer > folio: http://zoblue.com > blog: http://blog.zoblue.com > browser: http://getfirefox.com > · · · · · · · · · · · · · · · · > > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] another 'open new window' dilemma
I find it very confusing. The policy we use for our corporate website is to open a new browser window for external links with target="top" title="This link will open in a new browser window." Who says opening a new window is bad practice. Especially if it is an outside link. I've been searching the web for information on this and finding nothing. My understanding of web accessibility and 508 is to make everything as clear a possible.If there is a guideline out there that states "Thou shall not open new window" please post the link. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: Wednesday, August 24, 2005 9:13 PM To: wsg@webstandardsgroup.org Subject: [WSG] another 'open new window' dilemma Hi accessible care takers, I know open new window even for external site is no good and have put it in practise for most sites I have done, however I am kind of stuck on a site that has over 100 links to external sites. My client, understands no accessible issues however she was willing to take many of my suggestions, except the NO 'open new window' to external sites. Her argument is valid and justifiable, that she is afraid her audience (marketing decision markers, art directors and IT managers, ad firm account managers etc) will get lost if there isn't new window open for external site. I tried to convince her that her audience probably are more advanced internet users than most grandpa/grandmom audience my other clients have. She doesn't buy it and I haven't give up :) Visited Accessify, sitepoint as well as WSG archives to look for perfect solution; there seems none. It can also be quite a pain adding js code just to make the link works. My temporarily solution is to have the 'title="right click for new window' in the tag, and also provides an open new window icon next to the link text, however I am afraid this may actually creates confusion to her audience. So I created another icon that indicates 'right click to open new window' - it seems a bit over kill. I still think the 'title="right click for new window' is the best approach, but I notice the indication takes more than 3 seconds to show. Some people click faster than 3 seconds. Can you tell the message I try to convey at the first glance of the icon? Does it too fancy, too confusing? please see the first two links. http://clients.lotusseeds.com/news/june05_nikkeibussiness.html thanks! tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] another 'open new window' dilemma
Does the reader not read the title tag which states "Link will open in a new browser window."?I thought that is why we use the title tag to give more info on the link. Thank you all for explaining the use of target="top".I will be discussing this with my manager and hopefully we will start implementing target="_blank". As for using JavaScript I don't see why you would use js to open a new window if you don't want to control the treatment of new window. -Original Message- From: Paul Novitski [mailto:[EMAIL PROTECTED] Sent: Thursday, August 25, 2005 11:54 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] another 'open new window' dilemma At 11:00 AM 8/25/2005, Janelle Clemens wrote: >Who says opening a new window is bad practice. Especially if it is an >outside link. I've been searching the web for information on this and >finding nothing. My understanding of web accessibility and 508 is to make >everything as clear a possible.If there is a guideline out there that >states "Thou shall not open new window" please post the link. Janelle, As I understand it, when a new window opens a user depending on a screen reader can easily get confused. The new window will take the place of the old one but won't have a history for the Back button. How can the user get back where they came from? Should they close the current window, close the current tab (in a tabbed browser such as Firefox or Opera), or toggle tabs or windows to return to their previous page? If they've got multiple applications open, it could be time-consuming and frustrating to find one's way back. Presumably if we include sufficient warnings within the link itself then folks will know ahead of time that a new window will open and will know how to deal with it. But I don't know if this answers all of the concerns. Regards, Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] another 'open new window' dilemma
Being there are so many things to consider how do you code to compensate for everything. Or which things do you focus on or ignore?Are there stats on what readers or other usability devices are being used and by how many people and what their limitations are and differences between them?We (our webteam) have really been trying to be 508 compliant but now that just seems like not enough, or what we thought we doing correctly may not be. I have to say this discussion is making me feel a little overwhelmed and lost. Especially since I have been searching all the 508 and accessability websites but not finding coding standards (examples). How does one go about making your website accessability friendly? What are the standards? I just want a page that lists "This is how you treat an href for the majority of readers", "This is treatment for readers A", "This treament is for readers B".I feel like everything right now is a theory. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Thursday, August 25, 2005 1:14 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] another 'open new window' dilemma Janelle Clemens wrote: > Does the reader not read the title tag which states "Link will open in a new > browser window."?I thought that is why we use the title tag to give more > info on the link. Not always. Depends on verbosity settings of screen readers, which in many cases don't have that option enabled. Also worth considering that title attributes are not exposed to users browsing via the keyboard or similar device. -- Patrick H. Lauke __ re*dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Font-size em and reseting within
If you are using em with font-size is there is a way to clear the font-size of a box element (stop the inheritance)?I am having a hard time explaining myself so maybe an example would be better. So if you have this code, the "More text" would be 0.80em relation to the 0.90em. Some text More text Some text Is there a way to reset the font-size on the second div so the 0.80em is actually 0.80em relation to the body of 1.0em without having to code like this? Some text More text Some text Thanks, Janelle ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Controlling the gap?
Is there anyway to control the space between the bullet and text of an ? Our designer is having issues with this and since I am in charge of creating the templates I need to find a workaround. Thanks, Janelle ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Controlling the gap?
I tried that but it made more space. I tried negative but only margin seems
to like negative numbers, padding ignores negative numbers.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Neal Watkins
Sent: Monday, August 29, 2005 2:07 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Controlling the gap?
Use padding
example:
ul li {padding-left: 5px;}
that should helpcan use negative amounts
Quoting Janelle Clemens <[EMAIL PROTECTED]>:
> Is there anyway to control the space between the bullet and text of an
?
> Our designer is having issues with this and since I am in charge of
> creating the templates I need to find a workaround.
>
> Thanks,
> Janelle
> **
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> **
>
>
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Controlling the gap?
Thanks Kenny. That sounds like a good solution. I'll give that a try. :-) Janelle From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kenny GrahamSent: Monday, August 29, 2005 2:26 PMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] Controlling the gap? 1) remove the bullet with list-style: none2) create an image of a bullet3) set that image as the background image (non-repeating) of the 4) adjust left padding of the to set distance from the fake bullet
[WSG] How do I combat extra padding?
I had to create a table for this piece of our templates but am finding that firefox, netscape 7 and opera are adding extra padding under the images in the top row of cells. So far my fix has been to give our mozilla stylesheet margin-bottom: -4px for these images which has worked but I would like to know why firefox, netscape and opera are adding the extra padding. Code: http://www.sgi.com/tempie/ Stylesheet: http://www.sgi.com/tempie/styles.css Thank you, Janelle ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] How do I combat extra padding?
Thank you Bert. That worked like a charm. :-) Janelle -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bert Doorn Sent: Tuesday, August 30, 2005 5:59 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] How do I combat extra padding? G'day >I had to create a table for this piece of our templates but am finding >that firefox, netscape 7 and opera are adding extra padding under the images in >the top row of cells. So far my fix has been to give our mozilla >stylesheet margin-bottom: -4px for these images which has worked but I >would like to know why firefox, netscape and opera are adding the extra padding. > > I recall having similar issues myself with table based layouts in the past. >From memory, Mozilla, gives the images a vertical-align of "baseline" unless you override it. Try giving them (in css) a vertical-align:bottom. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Tables - a challenge!
Try this. This gives you a box centered in the browser with a width of
650px. Does this help?
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en">
Template
This is some text
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of designer
Sent: Wednesday, September 07, 2005 1:10 PM
To: web
Subject: [WSG] Tables - a challenge!
Hello all,
I've been holding back with this, as I've said it before and I can hear the
yawns from some of the longer suffering members . . .
OK, I don't use tables, except for tabular data. I've been doing this
standards stuff for for just one year and there is only one place where I
use a table for layout, and that is to put something (div, or
whatever) slap bang in the middle of the screen, both vertically and
horizontally. There are many ways to do this, but none of them (that I
know) are as simple or as reliable as this method using a single-cell table:
CSS:
body, html {
height : 100%;
}
#layoutgrid{
height : 100%;
width : 100%;
}
#layoutgrid td {
vertical-align : middle;
text-align : center;
}
Then, in the body:
This is in the middle!
Other methods use javascript, others use negative margins. The negative
margins way is neat, but it suffers from the fact that, if the viewport
is smaller than the thing you are centering [eg, content height is
500px and you have a screen that is only 640 by 480] you cannot see the
top of the content, and (obviously) you can't scroll there!
So, the challenge: do what I've done above with no table, AND make it
work in IE. It's easy if you forget IE (see 1), but since IE is still
the primary browser in use that isn't a solution.
[1. see Steve Clay:
http://mrclay.org/web_design/vertical_centering_by_the_specs.html ]
Anyone?
Bob McClelland
www.gwelanmor-internet.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
__
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email
__
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Tables - a challenge!
Ah, never mind. I missed the vertical align part of your problem. Tom's
example seemed like a good one though.
:-)
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Janelle Clemens
Sent: Thursday, September 08, 2005 4:21 PM
To: 'wsg@webstandardsgroup.org'
Subject: RE: [WSG] Tables - a challenge!
Try this. This gives you a box centered in the browser with a width of
650px. Does this help?
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en">
Template
<!--
body {
font-size: 1.0em;
font-family: verdana, arial, sans-serif;
color: #5C5C5C;
margin-top: 0px;
text-align: center;
}
#container {
margin-top: 4px;
margin-left: auto;
margin-right: auto;
width: 650px;
min-height: 450px;
border: 1px solid #8F8F99;
}
-->
This is some text
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of designer
Sent: Wednesday, September 07, 2005 1:10 PM
To: web
Subject: [WSG] Tables - a challenge!
Hello all,
I've been holding back with this, as I've said it before and I can hear the
yawns from some of the longer suffering members . . .
OK, I don't use tables, except for tabular data. I've been doing this
standards stuff for for just one year and there is only one place where I
use a table for layout, and that is to put something (div, or
whatever) slap bang in the middle of the screen, both vertically and
horizontally. There are many ways to do this, but none of them (that I
know) are as simple or as reliable as this method using a single-cell table:
CSS:
body, html {
height : 100%;
}
#layoutgrid{
height : 100%;
width : 100%;
}
#layoutgrid td {
vertical-align : middle;
text-align : center;
}
Then, in the body:
This is in the middle!
Other methods use javascript, others use negative margins. The negative
margins way is neat, but it suffers from the fact that, if the viewport is
smaller than the thing you are centering [eg, content height is 500px and
you have a screen that is only 640 by 480] you cannot see the top of the
content, and (obviously) you can't scroll there!
So, the challenge: do what I've done above with no table, AND make it
work in IE. It's easy if you forget IE (see 1), but since IE is still
the primary browser in use that isn't a solution.
[1. see Steve Clay:
http://mrclay.org/web_design/vertical_centering_by_the_specs.html ]
Anyone?
Bob McClelland
www.gwelanmor-internet.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
__
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email
__
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
[WSG] controlling font size in form text box
My designer is on me
to reduce the size of the font in the search box on the templates for our
redesign. But I can not get it to budge without getting too
small. Does anyone know of a trick for this. We
have decided to use a fixed font (px or pt) for the search box text.
Two reasons: 1. to keep it constant when a viewer increases
their browser font, and 2. using em was way to inconsistent cross
browser. The text under the search box is the size my designer
wants it to be.
http://www.sgi.com/tempie/search_font.html
.box {font-size:
9px;}
Thank
you,
Janelle
RE: [WSG] controlling font size in form text box
Thank you Peter. You are right. It is exactly the same as the text
below.
:-)
Janelle
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Peter Asquith
Sent: Wednesday, September 21, 2005 3:09 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] controlling font size in form text box
Hi Janelle
If you set the font-family on the .box to verdana it then renders the
same as your example below. Looks like the text input field is picking
up the default sans-serif(?)
Cheers
Peter
Janelle Clemens wrote:
> My designer is on me to reduce the size of the font in the search box
on
> the templates for our redesign. But I can not get it to budge
without
> getting too small.Does anyone know of a trick for this. We have
> decided to use a fixed font (px or pt) for the search box text. Two
> reasons: 1. to keep it constant when a viewer increases their
browser
> font, and 2. using em was way to inconsistent cross browser.The
text
> under the search box is the size my designer wants it to be.
>
> http://www.sgi.com/tempie/search_font.html
>
> .box {font-size: 9px;}
>
> Thank you,
> Janelle
>
--
Peter Asquith
http://www.wasabicube.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] controlling font size in form text box
Ack! I knew the font size was going to bring comments. Personally I
think the font on the whole site is too small but that is not my
decision to make, and believe me I have raised my concerns about it
plenty. Thanks to Peter I was able to fix the problem so I can move on
to the next issue.
:-)
Janelle
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Felix Miata
Sent: Wednesday, September 21, 2005 3:10 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] controlling font size in form text box
Janelle Clemens wrote:
> My designer is on me to reduce the size of the font in the search box
> on the templates for our redesign. But I can not get it to budge
> without getting too small. Does anyone know of a trick for this. We
> have decided to use a fixed font (px or pt) for the search box text.
> Two reasons: 1. to keep it constant when a viewer increases their
Viewers zoom their fonts so that they can see things that designers make
too small.
> browser font, and 2. using em was way to inconsistent cross browser.
As indeed it should be. Ems are designed to accomodate users' needs, and
so will vary in ultimate size depending on user settings. When you
design to take this into account, everybody wins.
> The text under the search box is the size my designer wants it to be.
> http://www.sgi.com/tempie/search_font.html
> .box {font-size: 9px;}
Both are already much much much too small for me to tell any difference
between them. The latter @ 10px is 1/4 the size of my default, totally
useless if I'm stuck using IE. You should set up a system for high
resolution and show "my designer" what 10px can mean to accessibility.
--
"Cast your cares on the Lord and He will sustain you."
Psalm 55:22 NIV
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://members.ij.net/mrmazda/auth/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
[WSG] How do I vertical-align bottom
I have a div inside a table cell that needs to align to the bottom but can't get it to work. Can anyone help? http://www.sgi.com/tempie/box.html Janelle ClemensWeb Programmer, SGI[EMAIL PROTECTED](650) 933-9362
RE: [WSG] How do I vertical-align bottom
Thanks Paul. I was hoping to find a solution without having to split the cell. But I might have to go that route. :-) Janelle -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: Wednesday, October 05, 2005 2:51 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] How do I vertical-align bottom 2 options spring to mind: (1) give the div margin-top to push it to the bottom. This way, even if the above content expands, the div *should* still appear at the bottom of the table cell (2) Rowspan the other two cells and split the third (containing the div) into two rows eg: --- | | | | | | | cell 3 | | | | | | cell 1| cell 2| | | (rowspan = 2) | (rowspan = 2) | | | | | | | | |--- | | | cell 4 | | | |(vert-align: bottom) | | | |(contains div) | --- Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] How do I vertical-align bottom
Thank you Nick. That worked like a charm :-) Janelle -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Cowie Sent: Thursday, October 06, 2005 12:05 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] How do I vertical-align bottom You can use absolute positioning as long as it is inside a relatively positioned block element. Add postion: relative; to the td holding the div "ad" and to the div "ad" Add position: absoloute; bottom: 0; left: 0; Nick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Janelle Clemens Sent: Thursday, 6 October 2005 6:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] How do I vertical-align bottom Thanks Paul. I was hoping to find a solution without having to split the cell. But I might have to go that route. This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Conditional Comments question
I have a question about conditional comments. I have heard so much about them especially in the last discussion about "Set min-width using DOM" but have never used them. We have always used a _javascript_ style sniffer to determine which browser the viewer is using. However when _javascript_ is turned off the site looks pretty nasty. Does conditional comments still work if js is turned off? And is this a better way to go than a _javascript_ style sniffer? What do you do for browsers like mac ie if you don't want it to use the style sheet. With the sniffer I can tell it to use our nostyle.css file. Thanks, Janelle
