Re: [css-d] style sheets and page weight

2007-11-19 Thread Bob Easton
Cyber Cog wrote:
 Hi,
 here is a silly question:
 
 If I have 10KB of text in an external style sheet, or 10BK of text as inline
 styles is there any difference in how fast the page loads the *first* time?
 If so, why?
 

Virtually no difference.  Yes, there is an extra request, but the 
request itself takes a pittance.  Now, for subsequent reloads, external 
style sheets make a difference.  They're cached in the browser and 
there's no load time.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
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] Advanced CSS techniques book

2007-10-28 Thread Bob Easton
Robert James wrote:
 I'd like to improve my CSS techniques.  I'm comfortable with basic CSS, but
 there's a lot of advanced stuff out there which I'd like to leverage.  (I
 especially have trouble with some of the advanced positioning.)  Can anyone
 recommend a good book for the advanced techniques?  ...

There is a link to our WIKI/FAQ at the bottom of every post.  It has a 
page about books that a lot of people have put effort into creating. 
You might find something useful there:
http://css-discuss.incutio.com/?page=GoodBooks

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
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] ADMIN - OFF TOPIC -Same old Hat (new)

2007-10-22 Thread Bob Easton
David Laakso wrote:
 Since your question has nothing to do with CSS, a nothing to do with CSS 
 method for achieving a splash page (if you decide to go that sometimes 
 annoying route) is to use a timed meta attribute in the head of the 
 document.

As David said, we're OFF TOPIC.  Let's stop now, or move to another 
list.  For suggestions, see: http://css-discuss.incutio.com/?page=OffTopic

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
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] ADMIN - OFF TOPIC - Newbie

2007-10-22 Thread Bob Easton
david wrote:
 Phil Tobias wrote:
 On Oct 20, 2007, at 11:39 PM, [EMAIL PROTECTED] wrote:

 is Dreamweaver acceptable or am I better off (as a beginner) going  
 down
 a different route ?...

We have strayed far from a CSS specific question. Other places might be 
more appropriate for discussing coding techniques.  See: 
http://css-discuss.incutio.com/?page=OffTopic

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
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] Vertical Space Grudge Match: br vs css

2007-05-21 Thread Bob Easton
Francesco Rizzi wrote:
 
 So, my question for the list is:
 why should we use css rules in this scenario instead of br tags ?

Let's call it separating content (HTML) from presentation (CSS).  Use 
technologies for their intended, and standards compliant, purposes.  Use

1) Use HTML for well structured, semantic, markup.  br and br / have 
no semantic value.  Those are presentational markup that should never 
have been in HTML.

2) Use CSS for all presentation markup, not only appearance of 
typography, but also layout, such as that space between elements.

3) Use JavaScript for all behaviors.

Doing things this way has become the accepted best practice among 
leading designers and developers.  The benefits are many, but the most 
important is that this approach reduces future maintenance.  For your 
example, when the client wants to change the space between the elements, 
add dingbats, or whatever, it can be done by changing one CSS file, not 
editing all of the brs in all the HTML files.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] [css-d ADMIN] Any CSS GURUs?

2007-04-16 Thread Bob Easton
Gigaboy20 wrote:
 I'm looking to hire an insanely smart css wizard who can hack theri way into 
 doing almost anything with css.
 

Gigaboy20 has been unsubscribed - blatant violation of list policies.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] 3 column displays incorrectly in IE6

2007-04-14 Thread Bob Easton
KS wrote:
 Hi,
 
 The page below displays incorrectly in IE6. I've been trying to get
 the middle column to line up horizontally with the thumbnail images in
 the left column. You can see how it should look in Firefox or in FF on
 a Mac for that matter. Any help would be greatly appreciated.
 
 Page: http://tang.skidmore.edu/oex/contexts/authors/bach.htm
 CSS: http://tang.skidmore.edu/oex/contexts/ie.css
 

This one of those cases where one could easily use a table, completely 
free of any guilt.  :)

Tables are intended for data representations where there are 
relationships between the contents of cells.  You have that on this 
page.  The images in the left column are related to their descriptions 
in the right column.  Perfectly appropriate use of a data table.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] [ADMIN WARNING] font-size advice

2007-03-27 Thread Bob Easton
We are treading on the edge of civility with exclamations like wrong 
and nonsense.  This topic has been covered dozens of times on this 
list and too often wanders into downright argument based on opinion and 
personal preferences.

Warning to all: contribute factual, technical information about CSS 
techniques, or stay out of the discussion.

For others: visit the archives and the WIKI where you will find a huge 
amount of material already.  Little has changed in browsers since that 
material was contributed, so you're not missing any late breaking news 
by reading what has already been written.  Links at the bottom of every 
post.

Rick Pasotto wrote:
 On Tue, Mar 27, 2007 at 02:28:33PM +0100, Chris Ovenden wrote:
 I'm afraid that question has been discussed to death in this list
 and elsewhere. I'd say you just have to decide between usability
 and right size, since usability means that there is no right size.
 Surely the right size, or a t least the right initial size, is the
 same size as (most) other sites.
 
 Wrong. Truth is *not* determined by majority vote.
 
 By using body { font-size:100% } or similar,
 
 You are giving the user what the user finds most comfortable to read.
 
 you're immediately making your fonts annoyingly large compared to the
 majority who use something like body { font-size:76% } - a de facto
 'standard' for good reason:
 
 Nonsense like that is why I have to increase the displayed font size
 (sometimes *twice*) on 90+% of the sites I visit in order to be able to
 read them. That is most definitely *not* user friendly.
 
 The web is *not* print. The rules are different. Do not expect your
 pages to look exactly the same on all displays. You can't even be sure
 that your selected font is available and different fonts have different
 base sizes, a fact that could very easily throw off all your careful
 calculations.
 


-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Using em's for unit measures

2007-01-08 Thread Bob Easton
Martyn Clark wrote:
 Hi
 I have a div element with just a few words of text directly in the div, I
 have applied padding using em's but when I view this in IE and Firefox IE
 seems to make the element larger than it appears in Firefox.
 
 If I put an equal amount of padding all round the div element in Firefox
 this places the text to be aligned in the centre of the div, while in IE the
 text seems lower down and the div appears a lot larger. Can anybody shed
 some light on this?
 

Since you don't mention which version of IE and whether you are using 
strict or transitional DTD, we will assume what you are seeing is IE's 
broken box model.

Please read:
http://css-discuss.incutio.com/?page=BoxModel
and the top part of
http://css-discuss.incutio.com/?page=BoxModelHack

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] [ADMIN - OFF Topic] Off topic UK law for websites

2007-01-08 Thread Bob Easton
Terry wrote:
 Hi guys,
 
 can anyone tell me if the article below holds any weight?
 
 http://www.theregister.co.uk/2006/12/21/new_web_email_regulation/
 
 Thanks
 
This is NOT a CSS related question and does not belong here. If we apply 
a three strikes rule, one more off-topic posting and you'll be banned.

ref:
http://css-discuss.incutio.com/?page=PostingGuidelines
http://css-discuss.incutio.com/?page=OffTopic

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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/


[css-d] CSS Celebrating 10 years with Style

2006-12-20 Thread Bob Easton
CSS, as a technology, reached its tenth birthday a few days ago.  To 
celebrate, Bert Bos and Håkon Lie, founding fathers and still the core 
of the CSS Working Group, put together an anniversary web site.

Enjoy it at: http://www.w3.org/Style/CSS10/

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Pitfalls of overflow

2006-12-19 Thread Bob Easton
Barney Carroll wrote:
 I...
 
 I'm under the impression that position:absolute within an 
 overflow:hidden; are nails in both feet. I'm wondering if anyone's ever 
 succeeded in this - I'm certain it must have been done at some point, 
 both techniques (flyout submenus and extending faux-table-cell columns) 
 are so common... Or am I chasing an impossible (or just ultra risky) dream?
 

Does the submenu really need overflow:hidden?  I haven't tried it (or 
can't remember trying it), but what happens with overfolw:scroll on an 
absolutely positioned element?


-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] [ADMIN] Community view point for CSS on font size

2006-12-18 Thread Bob Easton
Information - Abyss wrote:
 Dear Community,
 
 
 What is the communities view point on CSS font-size property? should it be 
 in pt (point) or px (pixel) measurements?
 

Lori Robinson suggested reviewing the material in our list WIKI (address 
at the bottom of every posting). There is sufficient material in the 
WIKI, and in the list archives, that we need not rehash the discussion 
here yet again.

This thread stops now.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Bizarre img margin behavior in IE7

2006-11-04 Thread Bob Easton
Thomas Hall wrote:
 Could someone peek at this page - www.atrachapter.com
 http://www.atrachapter.com/  in IE7. When the page loads look at the
 margin on the main image of the page. When I move my mouse over the left
 hand navigation (ul) the margin on the image disappears. ...

The CSS validator is complaining about too many values for .vnav ul and 
.vnav ul li ... having to do with the opacity specification.  I'm not 
sure why this would cause that symptom, but worth trying.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Tailor's dummy accessible menu

2006-11-04 Thread Bob Easton
Mike A wrote:
 http://www.uk-web-pros.co.uk/left-menu-bordered-example-1/left-menu-tailorsdummy.html.
 
 I've set out this no-hack menu for trainees here who have difficulty
 understanding box models for accessibility standards compliance. Before
 writing a detailed article it makes sense to have experts check it.
 
 ...
 
 I hope the menu will work across modern browsers. It should expand as
 zoom/text expands, and remain fluid as browser window size changes. I'd
 appreciate feedback on errors or ways to improve code. I've deliberately
 left long cascading elements in CSS for tutorial purposes (and probably been
 a bit lazy in condensing code) but any feedback is most welcome.
  

Mention of Zoom left me looking for an alternate zoom style sheet. 
After I realized you simply meant normal text scaling, I tried in a few 
browsers.  Works in everything I have on my WinXP system, including IE7.

Took a look at the CSS and left very quickly. Being an old time 
programmer, set in his ways, I'm not a fan of needing to scroll 
horizontally to read code.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Heading tag Sizing

2006-11-04 Thread Bob Easton
Steve LaBadie wrote:
 What do I need to do to have the heading tag render the same size cross
 browsers?


The absence of an answer is because there can be many, many, many 
reasons and you asked a very general question.  A more specific 
question, supported by a test case or code we can examine, will make it 
easier to answer.

Generally, if all browsers have been left with their default font size 
settings, and there's nothing browser-specific in the CSS, font size 
should be very close across browsers.  However, there are hundreds of 
ways to change the results.  Show us some code and tell us which 
specific browsers you are concerned about.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] IE Conditional comments

2006-11-04 Thread Bob Easton
[EMAIL PROTECTED] wrote:
 Does anyone else have an issue with Microsoft's conditional comments 
 solution? I really don't want to sound like I'm bashing here, I'm really 
 happy that we're getting a more compliant browser from IE, but I'm about to 
 embark on hours of work to fix up sites for which I or previous developers 
 employed the child selector to get around IE's deficiencies which still have 
 not been fixed.
 
 I must now decide between IE's conditional comments approach, or use the 
 triple-XXX hack. Neither of these appeal. My main concern with conditional 
 comments is that it pollutes my document with proprietary, bulky markup. I 
 employ filters to feed CSS to different versions of IE. If I followed 
 Microsoft's advice, I would instead have the following in the head of every 
 one of my pages:
 
 !--[if IE 5.0]
 link rel=stylesheet type=text/css href=ie-5.0.css /
 ![endif]--
 !--[if IE 5.5]
 link rel=stylesheet type=text/css href=ie-5.5.css /
 ![endif]--
 !--[if IE 6]
 link rel=stylesheet type=text/css href=ie-6.0.css /
 ![endif]--
 !--[if IE 7]
 link rel=stylesheet type=text/css href=ie-7.0.css /
 ![endif]--
 
 What about future versions? ..
 Wouldn't it be a more elegant solution to put conditional comments in the CSS 
 document itself? ...
 Am I over-reacting to this? Does anyone else have an issue with this?
 

Now that you've got that off your chest  :-)

Yes, I'm sure you can find a lot of sympathy here.  The one thing you 
WON'T find is a CSS-only solution. As much as we would like, CSS doesn't 
handle conditionals, and won't any faster than those governmental 
agencies get to release 5.

The approach I'm tempted to take is a single conditional statement for 
any IE version and all IE hacks in a single CSS file.  If you have hacks 
for all those versions in a single all browser CSS file today, you 
know them well enough to carry over into a single file for IE without 
breaking them up into 4, 5, 6 files.  Go with !--[if lt IE 8] and (1) 
hope they'll get it right in 8 (check's in the mail), or (2) lower your 
opportunity for global search and replace catastrophes.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] CSS 3 column layout: elastic/fluid

2006-09-04 Thread Bob Easton
Stefan Nagtegaal wrote:

 as one of a lot of people I'm trying to find the best way on how to  
 accomplish a 3 column layout.
 The idea is to have an #left-sidebar, #right-sidebar both fixed width  
 at 200px and have a #content in between them which would be fluid.  
 (offcourse we'll also need a #header and #footer).
 
 ...

See our WIKI: http://css-discuss.incutio.com/?page=ThreeColumnLayouts


-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Navigation tabs

2006-08-20 Thread Bob Easton
ed gooddy wrote:
 Hi all,
I am trying to work out how to create navigation tabs using images for the 
 curved sides and backgroundsbut I am getting comfused. I have made three 
 examples: http://www.villa-corti.com/indexnav.html 
   In the first example- navtabs div -I have an image rightside.jpg which I 
 put on the A link and repeat which creates the background for the link text. 
 I put left_side.gif as the background image for the UL for the lefthand 
 curved sides.
 There is a problem with the tabs not being side by side. Is this a good way 
 to do it? How do I make the tabs side by side?
   In the second example -navtabs1 div-I have an image rightside.gif which I 
 put on the A link and don`t repeat which creates the right curved sides. 
 I put left_side.gif as the background image for the lefthand curved sides.
 How do I put a background on the link?
   The third example -navtabs2 div- is the same as the second example but I 
 put a background-color on the a link which covers the curved side. How do I 
 put a background- I don´t know how to put another image on the a link? What 
 is the solution?
   I know there are various ways to do curved backgrounds usgin css without 
 images but at this stage I want to try and find the best way to do this with 
 images and then I will check and see if they work with different browsers.
   Any comments greatly appreciated, Thanks!
 

It sounds like Douglas Bowman's Sliding doors technique is what you 
need.  Ne created curved corner tabs that adjust to the width of text in 
the tabs, and has been well tested in many browsers.

http://alistapart.com/articles/slidingdoors/

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Wide Table and CSS Based Layout?

2006-06-27 Thread Bob Easton
Jaimie wrote:
 I'm looking for a solution to how to make a CSS based layout work when the
 content is a very wide table.
 
 What I would like to happen is to have the browser just show a horizontal
 scroll bar on the bottom like it would in a table based layout.
 
 I also would like the container div to enclose all of the content (in
 this case the table).
 

Unless I'm missing something very subtle, I think the answer is to set 
an explicit width on the container that holds the table.  I would 
suggest min-width, but IE does not support min-width until IE7.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] [OT] [ADMIN]Sharing a BrowserCam account

2006-06-27 Thread Bob Easton
Tim Gaunt wrote:
 Hi,
 
 I know this is a touch off topic but I think it is something that
 css-discuss readers would be interested in. 
 
 If you're interested in sharing a browsercam account,...

Yes, it is both OFF TOPIC and against this list's advertising and 
solicitation policies, and you know better, as evidenced by starting 
with a quasi-apology.

You are inviting expulsion.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] IE Image redraw problem on scroll

2006-06-27 Thread Bob Easton
Tim Arnold wrote:
 When I use float: left; to render an unordered list horzontally, it 
 picks up the parent divs background image after scrolling in IE6 
 (version 6.0.2900.2180).  When I switch to display: inline; on the 
 lis the background issue goes away. 
 
 My first question is, obviously, why?  My second question is, background 
 image wierdness aside, is it preferable to use one method over the 
 other?  I seem to recall float being better for screenreaders, but can't 
 remember for sure.
 
 Instructions:
 
   [remainder snipped]

First, a suggestion on posting.  When posing a new question, start with 
a completely new piece of mail.  You used a reply to a previous question 
   which placed your new question at the end of someone else's thread, 
where it was probably overlooked all day.

I can't reproduce the image problem in my IE6.  Not sure why it would be 
failing for you.

As for accessibility, the HTML structure is always more important than 
the CSS.  As long as all the navigation is in a list, either CSS 
approach produces the same results in a screen reader.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] CSS layout breaks in IE6 when window is narrow

2006-06-19 Thread Bob Easton
Debbie Campbell wrote:
 I'm not sure what to call this problem... When you narrow the width of the
 browser window far enough, the right-side div breaks and shows up below the
 two left columns (green and blue) in IE 6. Doesn't happen in FF. 
 
 http://www.parallaxwebdesign.com/projects/parallax_r2/
 
 ... code snippets removed
 
 What is this problem called, if it has a specific name? And what can I do
 about it? Thanks
 

It's called a column drop.  The simple cause is too much content for the 
width available.  Something has to give, so a column drops.

Now, the problem with posting code snippets is that they rarely show 
where the problem really is.  In fact, in this case, there is no 
problem.  The reason it works in FF is because of a min-width:550px on 
the body element, and that 550 px is enough to prevent the column drop.

The reason it fails in IE is because no current version of IE respects 
min-width.  So, once the window is squeezed too far, IE drops the column.

Comment out the min-width, and FF will drop the column too.

There are a few work arounds noted in the WIKI: 
http://css-discuss.incutio.com/?page=MinWidth

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] List style colour

2006-06-16 Thread Bob Easton
Brendan Grossman wrote:

 Is it possible to colour a list's bullets and not the text? 
 
 I can get around it by using span or something within each li, but I was
 hoping I wouldn't need to...
 

Not today.  Maybe with CSS3 sometime in the future, but not now.  It's a 
  shame to have to use spans.  Some developers get around this by 
using images instead, included via CSS list-style-image: url(...)

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Fonts

2006-05-22 Thread Bob Easton
Nicholas Morgan wrote:
 Thanks Bob for your replay.  I just don't get why this is not a  
 priority.
 
 Does this mean that no one is going to do anything about this?  I  
 think this is a big deal and something that should be worked on as  
 core for every browser.  Not solving this problem just costs everyone  
 more money, more time, more bandwidth, less accessibility, etc, etc..
 
 Why doesn't any one care about this? Am I totally off by asking for  
 something like this?  Is anyone working on figuring this out?
 

Two points.
1) PLEASE don't quote entire messages. Several thousand subscribers 
don't need to see the whole thread over and over again.  BTW, most of us 
prefer bottom posting. Both are mentioned in the list policies.

2) Some provision for loadable fonts will be in one of the CSS3 modules. 
  The W3C CSS Working Group (I'm a member) has been discussing this 
recently.  The feature is not yet in any draft, but it is almost certain 
to occur in some form.  As to why it's not a priority, demand drives 
almost all W3C activity.  There are many other things that people have 
asked for more frequently than downloadable fonts.

CSS3 work under construction: http://www.w3.org/Style/CSS/current-work.html

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Two columns equal length

2006-05-21 Thread Bob Easton
Dave Buchholz wrote:
  snip
 * html div.half_block_center
 {
 overflow: visible;
 width: 100%;
 }
 
 ...which is according to specs[1] for the good browsers, and according to
 Microsoft[2] for IE/win. Looking good in my browsers.
 /snip
 
 If I were to put this code in a conditional comment should I choose the
 catch all !--[if IE] or a more specific version type ?
 

The general case will work, but may not be perfect in IE 5.0 (haven't 
tested).


-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Anidated divs IE problem

2006-05-21 Thread Bob Easton
Joel Alfonso wrote:
 I don't know why when I put a div immediately inside of another div, the
 first element in the anidated div, IE doesn't displays the correct format
 defined in the CSS file ... [snipped]
 
 In the IE, the output shows the First element with all the properties
 except the border, Second element (and all after that) looks totally
 fine... in Firefox all the elements shows the border... Plus, if I put
 anything before h1First element/h1, even a simply letter, the element
 displays his respective border... somebody knows what's this problem? I
 really appreciate any help, thanks!

The two small snips of code are not enough to recreate the problem. 
Something else is part of the problem.  We need to see more.

Can you post an example on the web?

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Style Families

2006-05-21 Thread Bob Easton
Bill Brown/Jessica Weinberg wrote:
 [lots snipped] I thought it might be a good idea if those
 designers had included a snap to full-width button which would switch the
 blog to the full width of the viewport. Now it occurred to me (and probably
 to you) that I could kill their styles altogether or they could have allowed
 a style switch, but I also found out a reason why they might not.

 [lots snipped]
 
 Maybe the introduction of such a thing to the W3C is a pipe dream and
 getting even Firefox or another fairly compliant browser to begin to
 implement that borders on the delusional, but ... [remainder snipped]

Style sheet switching scripts and Greasemonkey scripts exist today which 
serve the purpose, or are easily extended to serve the purpose. You 
mention you have your own script too.  The Firefox and Opera families of 
browsers already support menu driven style sheet switching.  I don't 
remember if IE7 does (high probability), so what is it you really want?

You are proposing ways to select thematic style sheets, and asking that 
the W3C and browser publishers codify those methods. From sitting on the 
W3C CSS Working Group, I can speculate that what you suggest might be 
considered (isn't delusional), but would likely sit at the bottom of a 
long priority list until sufficient demand caused it to percolate up. 
  Then, it would take time to get it into a spec, and more time yet to 
get it into browsers.

For example, web designers started using image substitutes for text 
(headings, esp) a few years ago.  The CSS Zen Garden popularized the 
technique(s).  There are half a dozen related techniques in use, each 
with its own pros and cons.  Only a few weeks ago the CSS WG started 
discussing a provision to offer an img url substitute in the font 
selections.  It is slotted for the text module of CSS3, which is still a 
l-o-n-g way off.  Caution advised with this example.  We are discussing, 
but have not agreed to provide such a feature.  So, don't get too 
excited about it until it makes its way into a draft spec.

Only a few W3C folks follow this list, and fewer yet browser 
implementors.  A better way to make sure your proposal is seen is to 
post it on the W3C's *www-style* mail list.  Find subscription 
instructions here: http://www.w3.org/Mail/Request

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Is css3 going to allow us to use non-system font?

2006-04-27 Thread Bob Easton
[EMAIL PROTECTED] wrote:
 Is this a planned for css3? I am not really that bothered but the two things 
 graphic designers (argggh!!) ask me are... 
 
 (i) why does IE not render text? 
Georg had a good answer.
 

 (ii) can the text not be in my own chosen font.


As a member of the W3C CSS Working Group I can tell you that there is 
not currently any provision in CSS3 for using fonts that need 
downloading at read time.  However, that has been a topic of recent 
discussion.  So, there's a very tiny glimmer of hope.

Be aware that the standards making process is long and tedious, and then 
is followed by an implementation period that is also long and tedious. 
If it does happen, it might be years before we see it actually 
implemented in browsers.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] What IMG Replacement Technique?

2006-04-19 Thread Bob Easton
Anthony Baker wrote:
 Hey Folks,
 
 I'm currently developing a site where I'm going to be using
 graphical navigation and an image replacement technique. ...

Be aware that there are accessibility problems with some of the image 
replacement techniques.  Details at:
http://www.access-matters.com/2005/05/08/quiz-114-image-replacement-techniques/

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Duplicate Content, Form Width Madness

2006-03-27 Thread Bob Easton
Ingo Chao wrote:
 Rahul Gonsalves wrote:
 I'm absolutely flummoxed by what IE is doing to this page:

 http://mentaid.in/newsletter

 ...
 The client wants this site up fairly soon, so if someone could look 
 through it and send me a reply, I would be extremely grateful.
 
 I think IE is somewhat irritated by the missing
 /form
 
 
 Ingo
Yes, looks like Ingo got it right.

While looking at the problem, I noticed another problem.  Your class 
accessibility is set to display:none.  That is *not* a good technique. 
  It hides content from screen readers, the people who need it most.

Read more:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] 3 Column fluid and equal layout

2006-03-27 Thread Bob Easton
Kenoli Oleari wrote:
 Can someone point me to some CSS code that works in IE Windows (along  
 with other browsers) for creating a three column fluid and equal  
 height layout where columns all adjust to the same length based on  
 the one with the longest content and adjust fluidly with the browser  
 window in the horizontal direction?  I'd rather have real columns  
 than the faut layout using background colors.
 
 
The best answer is Alex Robinson's One True Layout.
http://www.positioniseverything.net/articles/onetruelayout/

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Problem with overlapping a form element

2006-03-14 Thread Bob Easton
Peter Neu wrote:
 Hello,
 
 I trying to do a navigation bar with subentries based on the drop-down menu
 example from Eric's book.
 
 The approach works fine except when I try to overlap with the sub-entry a
 form element. Somehow the select control panel shines through the popped up
 subentry in the Internet Explorer.  What can I do?
 
 
 Here's some of the css:
 
 div#nav ul ul{
 position:absolute;
 top:0;
 left:6em;
 background-color: #003173;
 border:1px solid;
 display: none;
 
 }
 
 div#nav ul.level1 li.submenu:hover ul.level2 {display:block;}
 
 div#nav li:hover{
 background: #6cbc0f;
 }
 
 I am trying to overlap this html code:
 
   div id=selection
 ul
 li id=criteria Indicator /li
 li id=select
 form name=# method=GET action=#
 select name=# onchange=# 
   option value=0 # /option
 /form
 /li
  /ul
   /div
 
 I tried the z-index but it does not seem to work on the select control
 panel. The rest of the div tag gets overlapped though. 
 
 I uploaded the html and css files to this location.
 http://www.geocities.com/mkdir2/ .  
 Unfortunately geocities does not allow me to upload the htc file. 
  

This is normal behavior for form controls.  They always rise to the 
highest z-order.  The best answer is to locate the control in a place 
where it does not conflict with a menu.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] height: 100%;

2006-03-13 Thread Bob Easton
caparuni wrote:
 hi all, i'm a new member and like to share my problem and hope that
 someone could help me out, cause i'm stuck here for days ;(
 
 http://www.caparuni.or.id/konsulat_philipines/main5.htm
 http://www.caparuni.or.id/konsulat_philipines/main6.htm
 
 i've made those 2 layout and have some problem with height.
 in main5.htm the #contentLEFT (gray) have more height than
 #contentRIGHT (brown) and in main6.htm the #contentRIGHT (brown) have more 
 height than #contentLEFT (gray)
 then my question is how to make this a 100% height to their parrents
 (#content)
 

You are seeing normal behavior for height. Containers expand in height 
to hold their content.

Our WIKI has an article about making any column longest which describes 
several ways to have all columns the same height.

See: http://css-discuss.incutio.com/?page=AnyColumnLongest

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] CSS dropdown menu + Accessibility Issue

2006-03-13 Thread Bob Easton
Christian Montoya wrote:
 On 3/12/06, Tracy Shorrock [EMAIL PROTECTED] wrote:
 ...
 I don't imagine many users will browse the site without CSS, but for
 the odd chance that it happens, you could put a skip to content
 on-page link that is hidden by the CSS in the stylesheet. This has
 it's own accessibility issues, but it does solve the problem.
 

Skip links are very common solutions, and don't have any accessibility 
issues. The techniques used for hiding is where the issues are. To avoid 
problems, hide the skip link with the off left technique described in 
http://css-discuss.incutio.com/?page=ScreenreaderVisibility

By the way, use the text skip to MAIN content.  Without the adjective, 
some screen readers pronounce content the wrong way, as in contented, 
satisfied.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Problems with IE 7

2006-02-02 Thread Bob Easton
Adam Kuehn wrote:
 At 03:07 PM 2/2/2006, Eric A. Meyer wrote:
 Thus the IE7 CSS support
 page on the wiki (the URL of which I added to the list footer
 appended to every message).
 
 Just a request to those making contributions to this wiki page (which 
 I hope Microsoft will locate and find useful): Please be sure to 
 document that you are testing IE7 *beta 2*.  That way as Microsoft 
 releases updated beta versions, we will have our bug reports properly 
 catalogued by applicable version, and can delete any reports of 
 issues they fix (or can update the entries if the fixes are only partial).
 

MS is also operating a discussion group about IE7b2 at:
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.internetexplorer.generalcat=en_us_28cca3eb-7037-4d4f-bde1-d8efee1f1420lang=encr=us

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
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] Css menu

2006-01-29 Thread Bob Easton
Abyss Information wrote:
 
 Here is a neat CSS menu - if anyone is looking for one
  
 http://koivi.com/css-menus/

You will do us all a big favor by adding this to our css-d WIKI. The 
information will be more persistent than a passing post. Find the WIKI 
link at the bottom of every posting.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Browser Statistics

2006-01-28 Thread Bob Easton
{tonyFelice} wrote:
 Does anyone know of a good resource for browser/platform statistics?
 
If you are trying to make a decision about which browsers to support, 
the *only* place you should be looking is your own site's logs. 
Determine what your actual audience uses, not some sample of an unknown 
audience.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] CSS Technique Resource

2006-01-18 Thread Bob Easton
Tyson Tate wrote:
 ...
 If there exists none currently, I'll look into making a public Wiki  
 for everyone.
 

Echoing Christian Heilmann's advice: try supporting our own CSS Discuss 
FAQ/WIKI ... the one mentioned at the bottom of every single posting.

-- 
Bob Easton  (CSS-Discuss associate list mom)
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Mixing fixed and flexible widths

2006-01-14 Thread Bob Easton
Richard Brown wrote:
 Hi All
 
 I recently tried mixing fixed and flexible widths on a site:
 #leftcol {
 width: 200px;
 }
 #wrap {
 width: 76%;
 }
 #nav {
 width: 200px;
 }
 #content {
 width: 68%;
 }
 But it didn't work! Surprise, surprise!
 Am I allowed to mixed fixed and flexible widths by this method:
 #wrap {
 width: 25%;
 }
 #leftcol {
 width: 200px;
 }
 #nav {
 width: 200px;
 }
 #content {
 width: 75%;
 }
 
 The reason I would like to use a flexible/fixed width method is because 
 I would like to have three columns:
 Left Nav Content
 The left and Content columns would be one colour and the Nav column 
 would split them up with another colour, extending the full length of 
 the column. Is it possible to have an image that extends the full 
 length of the column when using a flexible layout please?
 
 Many thanks for the help.
These CSS declarations mean nothing without the HTML.  Correctly nested, 
they might work, but it is impossible to know without understanding the 
layout you are trying to achieve. You mention 3 cols, left, nav, 
content. What is wrap, and why 25%.  Content is 75% of width in relation 
to what? ... the entire viewport, or part of whatever it is inside of?

-- 
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Content not centering in IE

2005-12-26 Thread Bob Easton
iorhael wrote:
 ...
 I have set of pages in a subfolder on a site with their own stylesheet. The
 page contents center beautifully in Firefox and Opera, but not in IE (the
 content is set to 0 auto 0 auto). The elements center under each other but
 they are not centered in the middle of the page. I figure there's probably
 got to be a fix for this in IE. 
 ...

IE 5.5 and earlier doesn't know about margin:auto.  IE 6 does.  There's 
a good page about centering block elements in our wiki.

http://css-discuss.incutio.com/?page=CenteringBlockElement
-- 
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [css-d ADMIN OFF TOPIC] Purchase of MAC for CSS cross-browser testing

2005-12-13 Thread Bob Easton
People with recommendations for Sam should answer off list so 6000 
subscribers don't have to wade through it.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Centering Flickr Badge

2005-12-13 Thread Bob Easton
Niels Olson wrote:

 I barely know enough about CSS to keep my blog from returning errors every
 time I change the style sheet. I have one fairly directed question: how do I
 center my flickr badge in a column? I have added align=center everywhere I
 can think of and it still aligns to the left. Help! My blog is here:
 http://nielsolson.us/Haversian/

#zg_div {margin: 0 auto;} should do it.  This says use 0 margin top and 
bottom and auto width margins left and right.

There's more on centering in the WIKI at:
http://css-discuss.incutio.com/?page=CenteringBlockElement

-- 
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [css-d ADMIN Off Topic] em or % in width

2005-11-29 Thread Bob Easton
We have wandered astray from the original question.

To avoid veering further astray, into the dreaded / endless font size 
discussion, let's leave this one as it is.

-- 
Bob Easton

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [css-d - ADMIN] OT - Understanding the Website Flow

2005-11-22 Thread Bob Easton
On 11/22/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:

 On one of the lists I belong to, someone posted a link to an article about
 When Graphic Designers become Web Designers or Understanding the Website
 Flow or something like that. If I could remember, I could probably find it
 in the search a lot better. And it may not even been this group that I saw
 it on as well.


People looking for OT information should review our OT page in the WIKI
instead of posting to the list. See:
http://css-discuss.incutio.com/?page=OffTopic

--
Bob Easton
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Box Model Tutorial

2005-11-22 Thread Bob Easton
On 11/22/05, Brian Cummiskey [EMAIL PROTECTED] wrote:

 Miki Kersgard wrote:
  I'm having a moment of brain lapse here. In the last day or two someone
  on this list or my Dreamweaver list posted a nice bunch of links for box
  model tutorials.

 http://www.tantek.com/CSS/Examples/boxmodelhack.html
 http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41


Our WIKI, noted at the bottom of *every* post is also a good place to look
... for almost any CSS related question.

--
Bob Easton
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE Print Margins

2005-11-10 Thread Bob Easton
Rutgers wrote:
 Is there a way to set the print margins in Internet Explorer (6+)?  I don't
 like the preset margins ... like FireFox better but have to make it work in
 IE.

Printer page margins are set by the device driver, and are not 
accessible to browsers.  That is, each printer has a native margin set 
in the operating system device driver.  While some graphic editing 
programs allow access to these margins, browsers don't have access to 
them.  The best you can do is ensure your print style sheet sets the 
margins for the outermost container to zero.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Beginner's Positioning Question - IE6

2005-10-15 Thread Bob Easton

pfaff wrote:
Howdy, folks!  A friend of mine pointed me to this list, so hopefully 
y'all can help me.


I've done my very first attempt at CSS and it looks great and slick and 
exactly how I want it in every single browser... except, of course, 
IE6.  It's a rather simple site, nothing fancy, but stuff doesn't line 
up right.


http://www.berkeleygoclub.org/ is the site
http://www.berkeleygoclub.org/bgc-styles.css is the sheet

As you can see, the black lines don't line up in IE6, nor do the active 
page tabs overlap quite properly.


Is there any way to fix this without getting too nutty?  Since I'm new 
to all of this, I don't even know where to look to find the answer to my 
problem, and frankly I don't want to spend forty hours on it.  I'm 
perfectly fine with creating a separate stylesheet for IE, but I 
similarly don't know what's the best way to go about doing that.




On looking at this very quickly (meaning I didn't download your code and 
try to fix it), it looks like the 3px bug we sometimes see in IE.  Yet, 
it doesn't have the characteristic text offset. (1)


The Holly hack cures a lot of these sorts of problems.

(1) http://www.positioniseverything.net/explorer/threepxtest.html

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] re forms

2005-10-02 Thread Bob Easton

adrian suri wrote:

Hi again

I think I am making progress, by removing the name attribute it now 
passes w3, but I am having problems still getting the form value

form=ftplogs
feild=pssword
var passwrd=document.getElementById(ftplogs:pssword);



Our discssions here are about using CSS. If you are having HTML 
problems, this is not the right place.  See our off-topic page in the 
WIKI for suggestions about where else to ask question.


http://css-discuss.incutio.com/?page=OffTopic

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d][OFF TOPIC] Anyone know of a good usability list

2005-10-01 Thread Bob Easton

Aaron Roberson wrote:

I am looking for a list that is as good as this one but for usability
issues. Anyone know of such a list?


The question is off topic for this list.  Please consult the list of OFF 
Topic resources in the WIKI.


http://css-discuss.incutio.com/?page=OffTopic

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] columns of lists

2005-10-01 Thread Bob Easton

Kristina Floyd wrote:

Dear List

I am trying to create a two column list, that displays the sitemap.  The 
content is being generated by a CMS and I have no control over the 
number of items in each list, but the column headings need to be level 
with each other.




Thee latest issue of A List Apart has TWO articles about multi-column lists.

http://www.alistapart.com

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Many requirements

2005-09-29 Thread Bob Easton

[EMAIL PROTECTED] wrote:

Is it possible to set this page up so that they two gray boxes (Iron Giant is Good, I Like Ray Liotta) 
stretch with the width of the browser window while keeping the same amount of space inbetween the two boxes 
*and* so that the two gray lines below How?s The Weather in Brazil? and Aquaman is Not a 
Good Superhero stretch as well with their right edges and the right edge of the text beginning with 
More than 75% . . .  always at the same point of the far right edge of the Ray Liotta box? Some 
of this is presenting tabular data so tables are necessary at some point but is there a way to use less 
tables than I have now while keeping everything faithful to the mockup? I am going to try to work out 
solutions to all this but suggestions are appreciated. Thanks
 
http://www.christianziebarth.com/rent/mockup.html
 
based on:
 
http://www.christianziebarth.com/rent/mockup.gif


The strategy for doing this in a way that minimizes tables for layout is 
the following:


1) Learn about multi-column layouts from the 2-col and 3-col pages in 
our WIKI. (The WIKI link is at the bottom of ecery positing.) The goal 
is to have a content container that has its width expressed as a 
percentage of the page width, so it will be flexible


2) Leave the top two boxes (Iron giant, and I like Ray) in tables.  You 
can learn later how to do them with less markup.  When you want to take 
that step consult our WIKI for a page about rounded corners.


3) Float those top two tables left within the content container. Give 
each of them a width of 50% so they sit side by side.  For safety in 
browsers which have rounding errors, make one of them width:49%.


4) Clear the float.  This is VERY IMPORTANT and is the solution to a 
great many of the questions listed here.  Again, consult the WIKI, read 
Eric's article on containg floats (a) and Big John's clearfix technique (b).


5) Code the orange lines as headings.  They are semantically headings, 
not just orange text.  Style them with a border-bottom, and indent their 
text with padding-left.


6) Code the text under the headings as paragraphs, again being 
sematically correct.  Style the paragraphs to have left and right 
padding to produce the indentation you want.


7) Try your hardest to never use SPAN again.  It's a very sloppy way of 
styling text. Using well structured IDs, classes, and chosing the right 
CSS selectors is much cleaner.  (Again, class and ID info in the WIKI.)


(a) http://www.complexspiral.com/publications/containing-floats/
(b) http://www.positioniseverything.net/easyclearing.html

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Four Column Layout

2005-09-25 Thread Bob Easton

Richard Brown wrote:

The question I have in building this design the use of divs. I have an 
outer wrap to fix the size to 800px. Then where do I go from here. Two 
divs within this, one floating left and the other floating right. And 
then two divs within these divs again floating left or right. Or do I 
just have four divs, three floating left and one floating right.


You can always float all four of them left.  There's no need for any to 
float right. Floating one left and another right is a cheap trick for 
establishing a gutter between the columns, but isn't needed if each has 
either well defined margin or padding.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] random background image

2005-09-25 Thread Bob Easton

jeremy wrote:
i have been looking for a really good way to make a random background 
image happen. ... 
Is there a pure CSS way to go about this?



CSS can't do it. It's scripting time.

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How big is too big?

2005-09-22 Thread Bob Easton

Tim Zappe wrote:

How big is too big?

   - What is a good rule of thumb for a CSS file size?
   - How big should all of the images used by your stylesheet be? --
   Total
   - What is a good size for a typical web page? -- I remember hearing
   60-80k, but that seems like we should be able to go bigger by nowI just
   don't know how big.
- What screen resolution should we cater to? -- I noticed that A List
   Apart(www.alistapart.com http://www.alistapart.com) is now catering
   to 1024x1280 instead of 600x800 is this something that we can start moving
   our industry to, or is it still too early? If it is too early, when can we
   expect this change?
   - What are the appropriate sizes and techniques -- for CSS -- to mange
   users on mobile devices? -- PDASs, Phones, ect.



Too many questions in one post, and actually too many to answer in a day 
of reading and typing. Only the first and last are CSS topics that apply 
to this list.  The others might be better answered on other lists.  See 
our off-topic page in the CSS-discuss WIKI for where to find those 
lists. (1) Some of these other questions have no easy answers and are 
sometimes discussed on web developer's blogs.  Start subscribing to 
those blogs to  keep up with what they are thinking.  I'll add a 
CSS-discuss WIKI page shortly to start building a list of blogs and 
feeds.  Look for it soon. (3)


For your first question, the answer is in the concept of separating 
presentation from content. Remove all of the presentation markup from 
the HTML.  Learn to use CSS in wasys that are efficient, such as 
understanding selectors well enough to miminize divitus. (Divitus is 
the excessinve ues of DIVs, something that's all too easy to do when 
coming from a history of using tables for layout.) Then, develop the 
style sheets to apply the desired presentation characteristics.  They 
will be long and complex if the design is complex, smaller if the design 
is smaller. ... and smaller yet as you learn to optimize CSS coding. 
There is no rule of thumb, other than a variation of an old Einstein 
chestnut: Make your CSS as complicated as needed, but no more.


For the last question, there are not a lot of good sources.  One is 
because the browsers in small devices are still rather primative and 
designers dislike thingking about them.  Second, (I think) the market 
hasn't yet demanded we cater to those devices.  I expect it will 
someday, when available bandwidth is ubiquitous. One good strategy is to 
offer an alternative style sheet that serializes the page into a layout 
that is not width or size sensitive.  This is Joe Clark's Zoom 
technique, originally designed to help people with low vision, who zoom 
the magnification of pages. (2)



(1) http://css-discuss.incutio.com/?page=OffTopic
(2) http://www.alistapart.com/articles/lowvision
(3) http://css-discuss.incutio.com/page?=DesignerDeveloperBlogs

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] CSS hover panel and IE

2005-09-19 Thread Bob Easton

Richard Grevers wrote:

I have a list of form inputs which, when you hover the labels need to
show the relevant address data. ...



Can anyone spot the problem?
Also, a secondary effect seems to be that the label  element doesn't
function in IE
...
#labelcontainer div:hover div.addresspanel {...
...


The problem is simple. IE supports hover only on anchors, not on any 
other HTML element.  The solution is more difficult. Wait for IE7 to 
become pervasive, of find a different technique.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] variable width left column, left+right column tops line up

2005-09-18 Thread Bob Easton

CJ Larson wrote:

I know this is possible with tables pretty easily, but I'm clueless as
where to start with CSS.  I have some variable-width and -height images
that need to go in a left hand column, and a set of bullets to go in a
right column.  The bullet lists line up with each image, so they also
need to line *up* with the images.  I would know how to get either the
tops or widths lined up but I don't know enough to do both.

I'm sorry I don't have a live site to post a graphic or sample page on,
but I hope this ascii will give you the general idea:

+-+
| =  :|
| =  :  - bullet  |
| ===Graphic===  :  - bullet  |
| =  :  - long bullet |
| =  :|
+-+

+-+
|:|
|=== :  - bullet  |
|Graphic :  - bullet  |
|=== :  - long long bullet|
|:|
+-+

The graphic is centered both horizontally and vertically, and the
bulleted list is centered vertically as well.  The dotted vertical line
(:) needs to be the same distance from the left on all graphic/list
combos to line the page up.

Is this possible with CSS?



I see no answer on the list.  Maybe someone responded off list?  If not, 
the reason is that it's impossible to solve a problem or offer a 
solution without seeing working code, and without knowing exactly what 
you want to see.


Some part of this is possible with CSS, but probably not to the extent 
you might want.  Vertical centering is not one of the easy things to do 
with CSS, but it can be done. If the images and the lists are about the 
same vertical height, they could be put side by side in a container and 
that container then be given top and bottom margins to produce the 
centering.  However, the first time someone increases text size, 
kabloooey!  Of course, you'd have that in a table based design too.


See our WIKI for more information on centering:
http://css-discuss.incutio.com/?page=CenteringBlockElement

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Is it possible to style a cell TD so that images inside of it with links have no border?

2005-09-16 Thread Bob Easton

Bruce Searl wrote:

Hello all you CSS brains.
 
I've got what might be a simple no, or why would you? or You can - but you
shouldn't! sort of question. 
 
But thus far all I've been able to do is nothing...
 
The goal is to apply formatting to a table or table cell, that will prevent the border

from showing if the image contained in it has a link around it... so instead of 
typically
doing it like this:

tda href=link.aspimg src=image.jpg border=0/a/td

 
It would be something like this... 


td border=0a href=link.aspimg src=image.jpg/a/td

 
Of course my above example won't work... the image will have a link box around it... is

there a correct CSS way to do it?
 


I have not treied this with an explicit test case, but I think it is 
correct and the CSS SelectOracle(1) gives the expected explanation.


td img a {border:none;}

(1) http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Printing resized text

2005-09-16 Thread Bob Easton

Ben Curtis wrote:


It seems that only in very few places on the web can I resize my  text, 
then print, and have the printed text respect the new size I've  chosen. 
I do this often, because most pages print edge to edge, which  is hard 
to read, so I print 2-up (two shrunken pages, side-by-side  and rotated, 
on one sheet of paper) to mimic columns. But if the  print is too small, 
I try to enlarge it before printing. Sometimes it  works; most times it 
doesn't.


Is there some CSS thing that either helps or hinders the print  version 
taking the same resized text as the screen version? Although  my reason 
for discovering the failure is not common, I suspect that  people who 
enlarge text on the screen will want it larger on paper,  and I don't 
want to get in the way of that.




Interesting question.  It is especially pertinent if you are thinking 
about using Zoom layouts, which make it even easier to enlarge text in 
ways that don't break a page into an unreadable mess. (1)


Imagine letting people switch to a zoom layout and then print from that. 
 This is a scenario that calls for no print style sheet, and having the 
zoom sheet set for type=screen, projection, print.


Another scenario suggests having no explicit print style sheet, or one 
that makes absolutely no font-size declarations.


(1) http://www.alistapart.com/articles/lowvision

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Gaps Between List Items in IE

2005-09-16 Thread Bob Easton

[EMAIL PROTECTED] wrote:

Hello List,
I don't have access to a server to post an HTML file, but if someone could look at the code 
below, and please tell me why in IE6 (pc) I have extra vertical  space between my 
li elements. In Firefox, it looks fine. The odd thing is that if I put a 1px border 
on the li, the gap disappears (see it commented out below).


You are seeing a common IE whitespace bug. The line break between each 
item is producing the space. Numerous fixes exist and you found one with 
the border. You could simply make the border the same as the background 
color.  Or you could try other methods:


- run all the LIs together on one continuous line
- line break the LI in an unusual manner, such as:
limiscellaneous stuff
/lilimore stuff
/lilietc/li

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Compliant Browser displaying upgrade browser message

2005-09-15 Thread Bob Easton

Craddock, Melissa wrote:

The email excerpt below was sent today from a user. We are using the
WASP Invisible Object Method to display the Upgrade Note. ...


Two points:
1) the display:none technique is very poor form.  It hides information 
from exactly the audience who needs it, screen reader users.  Learn more 
at: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

or: http://www.access-matters.com/screen-reader-test-results/

2) It's long past time to be displaying browser upgrade notices.  Those 
should have died away when most of the version 4 browsers slid into 
obscurity.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] MSIE li menu problem

2005-09-12 Thread Bob Easton

Ask Bjørn Hansen wrote:

Hi everyone,

I made a simple menu with a olli .../lili.../li[]/ol  
structure.


It's at http://www.pool.ntp.org/ (css at http://www.pool.ntp.org/css/ 
ntppool.css)


It works great in Safari and Firefox:
http://tmp.askask.com/2005/09/pool-safari.png

But in MSIE each li is the width of the window and stacked below  each 
other:

http://tmp.askask.com/2005/09/pool-msie.png


Give those floats an explicit width. Standards compliant browsers do a 
good job of calculating the implied widths.  IE doesn't.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] help positioning

2005-09-12 Thread Bob Easton

Bram  Vera wrote:

hello all,

i'm trying to make csszengarden template, well right now i'm lil bit 
frustated with positioning between IE and Firefox anyone can give me a clue 
please

take a look on this screenshot http://www.bramvera.com/positioning.jpg


#quickSummary .p2 {
position: absolute;
top: 110px;
width: 280px;
text-align: right; 
margin-left: 405px; 
}

#quickSummary .p1 {
position: absolute;
top: 190px;
width: 158px;
margin-left: 342px;
text-align: right;
line-height: 14px; 
}


You're not making this very easy for us. We have to go somewhere else to 
determine what p1 and p2 are, and we have to guess at which result you 
actually prefer. Debugging from screen shots and small code clips is 
nearly impossible. There are lots of other variables we don't see with 
just a tiny clip of code.  For example, what other adjustments have you 
made elsewhere for font size, for line height, and for paragraph margins.


From what little I see here, I think the basic problem is either with 
font sizing techniques, or with paragraph margin-top settings (defalut 
or otherwise).  Additionally, I think you'll find absolute positioning 
far too fragile for this application. The first time someone resizes 
text in their browser, overlaps are very likely.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Cubecart - OFF TOPIC

2005-09-11 Thread Bob Easton

Software Options wrote:


I wonder if anyone knows anything about Cubecart?   I have a client who is
being persuaded to use this system following the failure of another system.
Is it easy for a relative novice to handle without a significant amount of
knowledge?


This list is for questions and discussions about CSS.  Cubecart is a 
shopping cart system which should be discussed elsewhere.  Please see 
our off-topic page for suggestions on where else you might ask.


http://css-discuss.incutio.com/?page=OffTopic

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Toggle between fixed and liquid layouts

2005-09-11 Thread Bob Easton

II Site Design Gmail wrote:

I would like to know how to toggle between fixed and liquid layouts like as 
www.simplebits.com does.

Any pointers?



The toggling is done by switching style sheets. The code is pretty 
simple.  Note the links for stylesheets, esp the alternate stylesheet. 
Then, check the paragraph with id=theme which runs a script found 
inside scripts.js.  For more detail about stylesheet switching, wee the 
original articlce which describes the technique on A List Apart.


http://www.alistapart.com/stories/alternate/

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How to move content area to the top of this floated layout?

2005-09-09 Thread Bob Easton

Scott Blanchard wrote:

Is it possible to change the order of this float layout so that the content
area comes before the sidebars??? Without resorting to absolute positioning?

!DOCTYPE html ... lots of code snipped


Well, with just a little AP.
Float content left, but establish a left marign wide enough to hold the 
left sidebar and its gutter. Next float the right sidebar (float left 
against content).  Lastly, AP the left sidebar in the margin of content. 
 The thing to be careful of is that content needs to be vertically 
longer than left sidebar.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] navbar problem

2005-09-09 Thread Bob Easton

Scot Schlinger wrote:

Hi all,

I have a navbar that I wish to change the background color and drop the 
bottom border when the given page is active. I have done this but when I 
make those small changes to the last list item (link) in the navbar, the 
text that is below the navbar is mis-aligned in ff 1.0.6 win but appears the 
way I would like it in ie 6.x (I am sure ie is showing it incorrectly even 
though that is what I want).


page without changes: http://www.rell.com/tst/index.html
page with changes: http://www.rell.com/tst/index1.html

... remainder snipped


Try adding clear:both; to #subnav to clear the floats used in #navlist.
--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] MAC OSX problem with background image in hyperlink

2005-09-07 Thread Bob Easton

Antony Tennant wrote:
...  
There is a design requirement to have an arrow at the left of a link. I have tried to do this using css to add a background image to the link rather than having an image hard coded before each link.
 
I have encountered a problem as illustrated at http://www31.brinkster.com/atennant/mac_arrow.html

(ignore the banner stuff as this is a free hosting site)
 
On a Mac OSX IE, additional arrows are shown when the link wraps on to additional lines.
 
I have been able to avoid this happening if I use list items li however I dont want to be placing single list items in different areas of the page. I could put a browser hack in the css so I dont have an arrow on Macs, again I would like to avoid this if possible
 


Two solutions:
1) hide from MAC IE (radpidly declining market share) with this hack:
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html

2) code the image into the html (yes I know, you want to avoid this)

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Footer woes--charity website

2005-09-07 Thread Bob Easton

Lorin Rivers wrote:
I've tried a few things suggested on the wiki, but none seem to work  in 
my case.


I want a footer. I want to have variable-length content.

...


You are learning the first thing you need to know about absolutely 
positioned content.  AP content consumes no space.  It is taken out of 
the flow.  That is, other objects nearby don't know that AP content 
exists, where it begins, where it ends.  Think of AP content as floating 
on another layer on top of everything else.


The easiest fix I can recomment is removing AP from #frametop and 
#framemain.  Establish their position by setting margin-left wide enough 
to accommodate #navbar.  Then #footer will fall underneath.  The code 
below should do it, but I have not actually tested it.


div#frametop
{
margin-left: 240px;
height: 117px;
width: 554px;
background-image: url(/images/content-top.gif);
background-repeat: no-repeat;
/*border: thick solid green;*/
}

div#framemain
{
margin-left: 240px;
/*bottom: 10px;*/
margin-bottom: -30px;
padding-bottom: -30px;
width: 554px;
background-image: url(/images/framecenter.gif);
background-repeat: repeat-y;
/*padding: 0 60px 0 20px;*/
/*border: thick solid pink;*/
}
--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] A 100% horizontal navigation bar

2005-09-05 Thread Bob Easton

Choan C. Gálvez wrote:

Check 
http://dizque.lacalabaza.net/temp/full-width-navigation-bar-with-css.html. 
I think this is what you're looking for.




Which proves Bob's second postulate.  All I need to do is say something 
is hard to do and someone (often Choan) will show us a very easy way to 
do it!  The explanation is real easy and is in the declaration for LI.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] page footer sliding between text

2005-09-03 Thread Bob Easton

Graham Reeds wrote:
I'm having a spot of bother with my CSS.  It seemed fairly straight 
forward but nothing I have tried has sorted it.  I'm fairly certain that 
it is easily fixable but I haven't found a way and it is beginning to 
annoy me.  I've checked the last couple of months but the high volume on 
the list makes it nigh impossible to see if someone has had a similar 
problem to mine.


The problem: I have header with two columns below it followed by a 
footer.  Fairly standard.


There is a possibility that the two content columns can be larger than 
the other so I have wrapped them both up in a container div, floated one 
left, the other right with the footer beneath outside the containing div 
like so:


#header { ...stuff... }
#content { width: 100%; }
#container1 { width: 470px; float: right; }
#container2 { width: 130px; float: left; }
#footer { width: 100%; }

However the footer div slides up between the two containers when it 
should be positioned directly beneath the content.


I've tried setting the position and stuff but nothing gets it lined up - 
I am missing a certain combination of rules but don't know what?


Any ideas?


Add clear:both; to #footer. That will force it to clear the floats above 
it and sit beneath them.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] photo gallery broken in ie

2005-09-03 Thread Bob Easton

rashantha de silva wrote:

hello

does anyone know why this does not work in ie

http://www.cssplay.co.uk/menu/gallery.html



Works OK on IE 6.0 and IE 5.5 on Win XP Pro.

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] 3-col layout auto-expanding DIV?

2005-09-02 Thread Bob Easton

Edward Sanderson wrote:

Hi,
I've made a 3-col site for a client and am having problems with the  
middle column not accommodating it's content.


The site is full-width with fixed width side columns and a flexible  
middle (http://eh0647.empetushosting.net/dataspring/test.asp). It's  
based on Paul O'Brien's template (http://www.pmob.co.uk/temp/ 
3colfixedtest_explained.htm) with some extra DIVs to apply a min- width 
to the page.


Everything seemed to be working really well until the client threw a  
really wide table in the centre column - and then in IE(win) that  
column dropped down to below the side columns. In every other browser  
I've tested the content just overflows the right-hand column, which  is 
not ideal either.


I've been through every three column layout on the WIKI, but I can  only 
find advice to avoid wide elements, but no solutions to the  problem. ...


Yes, the usual advice is to avoid putting 10 pounds of stuff into a 5 
pound bag.  There's another solution: use a stretchable bag.


Your layout is unique from the point of view that there are no explicit 
width constraints on the center column.  Most 3 col layouts have some 
sort of implicit or explixit width constraints.  (I know from starting 
the 3col page in the WIKI.)  So, where is the next constraint that can 
limit width?  It's in the #ieWidth declaration which has width:100%. 
That declaration is doing more than setting min-width.  It is also 
setting max width at 100% of the viewport.  Your solution needs to 
expand beyond the viewport for certain pages, doesn't it?


What happens if you comment out that one line?

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Best IR technique ?

2005-08-31 Thread Bob Easton

Guillaume wrote:



Hi all,

could someone advise the best/safest Image Replacement (IR) technique to 
use: cross browser friendly, screen reader accessible.

...


We did some testing of various techniques over on Access Matters. (1) 
Best is debateable, as each of the techniques has strengths and 
weaknesses.


(1) 
http://www.access-matters.com/2005/05/08/quiz-114-image-replacement-techniques/


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Accessibility and font sizing

2005-08-31 Thread Bob Easton

Scott Glasgow wrote:

...
This brings up a question I have been wondering about. What is the 
consensus

(if there is a consensus :-) on the best way to provide resizable
(accessible) text while still permitting reasonably consistent layout
without torturous CSS? Font-size keywords? Relative sizes? ...


Extreme caution: there be tigers here.

Search the CSS-Discuss archives (1) and you will find numerous flame 
wars on the font sizing issue.  To avoid repeating same, there's a good 
bit of reference material in our WIKI (2)(3).


Several methods of using relative sizes work very well and are described 
at the places mentioned in the WIKI.  One recent technique, which I just 
added to the WIKI (3), is Joe Clark's ZOOM technique which offers 
multiple style sheets and a preferencer setting mechanism (4).


(1) http://css-discuss.incutio.com/?page=SearchCssDiscussList
(2) http://css-discuss.incutio.com/
(3) http://css-discuss.incutio.com/?page=FontSize
(4) http://www.alistapart.com/articles/lowvision
--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 5.5 problem

2005-08-30 Thread Bob Easton

Michael Wiggin wrote:

Hi,
I've tried to find the solution myself with no luck.  I have a 
design that plays well with IE6, IE Mac5.2, Firefox(Mac  PC), Safari, 
and Opera(Mac) but breaks in IE 5.5.  The problem is the section just 
below a styled ul.  I have a feeling that I may be missing something 
obvious.  The page is at http://www.mikewiggin.com/resume.html and the 
css is at http://www.mikewiggin.com/bubbles.css




How does it break?  Looks the same in IE 5.5 as in IE6 and FF on WIN XP Pro.



PS:  I new to this.

Hmmm?  The resume claims HTML 6 yrs, CSS 4 yrs.

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Is this an IE rendering error ?

2005-08-30 Thread Bob Easton

Tom Steenhuysen wrote:
I have 2 strange things going on in trying to design a fluid 3 and 4 
column :


1) the two columns in the middle are both 50% wide - but when you change 
the width of IE [drag the edge], then there seems to be an intermittent 
1-pixel difference which drops the second column below the first column.


2) when you slowly drag IE's side edge, then there appear gaps in the 
background images [under the H3 headings] - but when you move your mouse 
over it, the background come back.


LINK= http://samp.ivosite.com


The first is a rounding error caused by IE not knowing how to divide a 
space into even 50% portions when the space is an odd number of pixels 
wide.  Change one of those values to 49% and it will be solved.


The second *might* be the guilloitne bug. See: 
http://www.positioniseverything.net/explorer/guillotine.html


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] simple problem - difficult solution

2005-08-30 Thread Bob Easton

Ron Adams wrote:

I have 2 divs on a page, and the top one is an unknown size, the bottom
one must fill the rest of the space to the bottom of the browser window.
How do I do this with CSS?

A simplyfied example below.


You can't.  Divs expand to the height of their content (plus padding and 
margins), and no further.  To fill a space, you need to put something of 
that height inside the div, or set the div to that explicit height.  If 
you don't know the height, find a JavaScript script to do it for you. 
Our WIKI has examples:

http://css-discuss.incutio.com/

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Image float

2005-08-28 Thread Bob Easton

t94xr.net.nz webmaster wrote:

Whats an easy way to align an image in the centre of a 150px div?


img {margin-left:auto; margin-right:auto;}
IE 5.5 or lower does not obey


Just a quick question.
Reply offlist.

If you presume we will answer, we presume you will come back here to 
find the answer.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Flag position

2005-08-28 Thread Bob Easton

Angus at InfoForce Services wrote:
I am at a loss why the france flag is appearing behind the USA flag and 
not on the left margin. Help please?


HTML: http://choroideremia.org/index.php

CSS: http://choroideremia.org/css/crf_css1.css

Angus MacKinnon


Angus,
In Firefox and in IE, both flages appear on the left edge, sitting one 
above the other.  You have two problems with the DIV they are in.  The 
DIV has an ID of lock assigned, but the CSS shows lock as a class. 
The easiest change is to the HTML.  Make that DIV read:


div class=lock

Second problem:  The CSS has a typo for the second declaration for 
lock.  It says .ock.  The leading l is missing.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [layout] 2 column

2005-08-28 Thread Bob Easton

R.H. Fan wrote:

Hey guys,

I recently delved a little into css based layouts instead of those messy 
tables. 

So with some help of some tutorials i created a pretty basic layout, except 
using my own values instead. But when showed in our most fav bug browser aka 
IE, the damn left menu just... dissapears! 

here is the link: 


http://e.domaindlx.com/lowenf/css/index.htm



You don't need the 1 point smith manoeuvre.  Simply add 
position:relative to #leftnav.  I would also change left:1em; to either 
margin-left or padding:left.  left by itself is normally used for 
absolute positioning, and not with floats.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Closing a Clear

2005-08-10 Thread Bob Easton
On 8/10/05, Hershel Robinson [EMAIL PROTECTED] wrote:
 http://www.mishpachaw.com/eng-featuresLarge.php?w=fiction
 
 I have tried a few different methods to fix this page in FF, but nothing
 seems to work--the lists of the magazine features extends below the red
 box--I want them of course to be within the box.

Looks like the classic failure to contain floats.  Two remedies are common:

http://www.complexspiral.com/publications/containing-floats/
http://www.positioniseverything.net/easyclearing.html

-- 
Bob Easton
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Sidenotes v Footnotes

2005-07-29 Thread Bob Easton
John Gruber has an article at Daring Fireball which shows another way 
of doing footnotes that has very simple markup and includes a return 
link that is both attractive and convenient.


http://daringfireball.net/2005/07/footnotes

I took a look at the accessibility of the techinhque here:
http://www.access-matters.com/2005/07/23/daring-fireball-footnotes/

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] First Post ;)

2005-07-17 Thread Bob Easton

William Bennett wrote:
Hi everyone, I've never actually joined a mailing list. We'll see how it 
goes.. 



I had a question and was wondering if anyone knew some suggestions. I'm 
looking to make a contact page and I wanna do it all in CSS. Do you guys 
know some links for Forms and CSS besides 
http://jeffhowden.com/code/css/forms/


Cameron Adams has a very good article about forms which are not only 
well styled, but have good accessibility characteristics. Be sure to 
study the companion layout templates.


http://www.themaninblue.com/writing/perspective/2004/03/24/?styles=

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] font family?

2005-07-16 Thread Bob Easton

designer wrote:


I was 'brought up' to believe that, when specifying fonts, one should 
quote a family such as 'Verdana, Arial, Sans Serif'.  This means, of 
course, that if a user doesn't have Verdana, the page will select the 
next available font on his/her system.


However, when I validate CSS, it tells me that I should only do this as 
a last resort,  So my questions are:  'what is the first resort' these 
days? What is the standards way? What do you guys do?




Follow your instincts. Specify as many fonts as you think are needed to 
satisfy your audience.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE absolute positioning problem

2005-07-16 Thread Bob Easton

Shashank Tripathi wrote:
Hi, 


I have a problem with a centered DIV that I want to position
absolutely, at the top of my page.

The code is here -- http://sniptools.com/test.htm -- and I have
prominently commented the problem DIV inside the code. This is the DIV
that shows up in stark red. IE shows it way off the page despite these
settings:

div style=background: #f00; position: absolute; width: 808px;
margin: 0px auto; top: 24px; 

It shows up fine in Opera and FF, but looks like IE has problems with
auto margins or absolute positionings? Appreciate any ideas or
pointers.



You have an absolutely positioned element with an explicitly stated 
vertical position (top:24px) but only an implicitly stated horizontal 
position.  Since the element appears in the source after main-body which 
is flated left and is 570px wide  and the misplaced element is 570px 
from the left edge (do you have a pixel ruler?), one can only surmise 
that IE is using that 570px as the relative left edge for the absolute 
position.


Try adding clear:both to the style.  Better yet, move it above main-body 
in the source.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Text Positioning

2005-07-15 Thread Bob Easton

Shaun Saxon wrote:

How do I get a p or h1 element to display the same distance from the top
of cells and/or divs in both IE and Firefox?

On this page http://www.uflib.ufl.edu/docs/ in particular, I want each
browser to begin the paragraph the same distance below the banner image.
(text in a table cell)

I'm also having the same problem on a page with no image at all. IE wants to
display text much lower on the page--even with a padding attribute set. 



Every browser applies default margins to various elements.  What you are 
probably seeing is slight variations with these defaults.  The way to 
gain control is strip all the defaults and set your own. Like this:


http://leftjustified.net/journal/2004/10/19/global-ws-reset/

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] using of DIVs

2005-07-15 Thread Bob Easton

Sean Montgomery wrote:

I use divs and spans over h1, h2 h3 p etc.  ...

I don't see anywhere where it says that I should use a heading tag
instead of a div for a heading.  Granted I did not spend hours looking
but I did take a look.


Try looking here:
http://www.w3.org/TR/html401/struct/global.html#edef-H1

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] how to achieve text indentation without p tags?

2005-07-13 Thread Bob Easton

victor NOAGBODJI wrote:

Hi all,
I'm trying to figure this all this afternoon, it seems like text-indent works 
only with  tags that are displayed as block and not with others.
I'm trying to have something like this:

Name:  Phone:   
 Address:



Yes, the spec says text-indent applies to block level elements.
http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Your example looks like a data table, and therefore best implemented 
using a table, not CSS.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] extra space around a table inside a div

2005-07-13 Thread Bob Easton

Anthony Morales wrote:

Bob,
I've created a clean workpage and that shows that weird layout (I've  
tested Firefox and Safari on Mac 10.4 so far).


http://anthonymorales.com/test.html
The padding on .rbox is producing the space. To get the table to fill 
the div:

set .rbox padding:0;
set .rbox table margin:0;

BTW, put all the style in the head of the document, not in the body.

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Strange float drop

2005-07-11 Thread Bob Easton

Leigh Baker-Foley wrote:

Hello again all,

Same source XHTMLL: http://8.3.8.136/
Same source CSS: http://8.3.8.136/style/ief001.css
All still validating.

This time I muddled through several hours of hair ripping before writing for
your help, just in case. :D

I'm having a seemingly unfixable float-drop problem on fixed width floats in
IE Mac.

...
Rule #1 about dropped floats.  Drpos are ALWAYS due to something being 
too wide to fit in the space available.  Add up all the widths, padding, 
and margins.  Then, make understand browser deficiencies (next 
paragraph) and you'll find not enough space.


From a very quick look, you have not made accommodations for IE's 
broken box model.  IE on the MAC, and IE 5.x on Windows, calculates 
widths differently than standardsw compliant browsers. There are many 
ways to handle the problem:

http://css-discuss.incutio.com/?page=BoxModelHack

BTW, please don't include source code when you've already included a 
URL.  The list is about 6000 people and that's a lot of bloated messages 
to send.


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Using non-standard Fonts

2005-07-09 Thread Bob Easton

Felix Miata wrote:

Ian Skinner wrote:
 


I just installed a couple of unusual fonts that I want to use for a very 
specific reason.  I realize that most users would not have these fonts, but in 
this certain case, the users will have the fonts.


 


Anyway I installed the following font files with the windows font widget: 
InvArial.ttf and Revarial.ttf.  But when I tried to use the following HTML, the 
alternate fonts did not display.  Is there something else I should be using for 
the font names?


 


p style=font-family: Arial;Fonts/p
p style=font-family: Revarial;Fonts/p
p style=font-family: InvArial;Fonts/p



I've never run across those two, but I suspect that those ttf files are
like most others, in that the font filename is not the same as the
font-family name. Open the control panel font folder, then open each
font, and for your style use the name it shows there, probably something
like revised arial or inverse arial or somesuch.

IIRC, after installing new fonts, you'll need to restart your browser
and/or your OS for it to find them.


And after you find the names that work, be sure to put alternatives in 
the style declaration for people who don't have those fonts.


.special-font {font-family: inverse arial, Arial, helvetica, Sans-Serif; }
--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vertical Text for Castle Hotel Menu (Italy)

2005-07-09 Thread Bob Easton

Thomas Hall wrote:

Ok, so world traveler that I am I walk into this hotel to finish their
website (http://design.tmhdesign.com/meran) for them and I find a lovely
young girl at the reception using MS Word to type the menu for the evening
in 3 languages – English, German, and Italian. I ask her if she does that
every night and if the menu items repeat themselves. She answers yes to
both. I suggest a database solution whereas menu items could be categorized
and then selected, printed, and/or displayed online. Great idea she says,
but then I was left scratching my head. Getting the data into the database
is a cake walk for me, but figuring out how to print the menu is another
ball game so to speak. The menu is printed on a standard 8 ½ x 11 piece of
paper, but the paper is turned sideways, so as you are holding it, the width
is 11 the height is 8.5. Ok, so can I somehow use CSS to they can open a web
page and print it so it can fold neatly in half and display the wine list on
one half, the menu on the other. If so, how would I do this? If anyone would
help, I would be s grateful. 



Thomas M. Hall



Small hint: Screen resolutions are 96px/in, which is why we try to 
layout web pages with 740px of print width.  740px = 7.7 inches which 
centers nicely on 8.5 inches.  Now, layout the page for 960px by 740px 
and it will fit neatly on 11 x 8.5


--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Fixed and Float

2005-07-07 Thread Bob Easton

Craig Snyder wrote:

Hi List Members ::
 
Any particular reason NOT to assign both position: fixed AND float to a div?  
 


Yes. They mean two completely different things. Some basic tutorials 
might help.


See: http://www.westciv.com/style_master/house/index.html
or: http://www.w3schools.com/css/default.asp

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Too many floats?

2005-07-07 Thread Bob Easton

[EMAIL PROTECTED] wrote:

Hey.

I am floating multimple elements on my home page:
http://www.odscompanies.com/
...

Any ideas?


There is only one reason floats drop. Something is too wide for the 
available space. In this case, when the window narrows to the extent 
that myODSlogin and myODSregister can't sit side by side HPmembers 
drops. In FF it's slightly different, with myODSregister sitting below 
ODSlogin, but floated right. There's some clearing subtlety there that I 
can't untangle.


Advice: don't float myODSregister. Let it sit below the login form.

Element relationships would probably work much better is everything was 
floated left.  On large screens, the myODS box can float a long distance 
away from the center column, leaving an ugly gap.





--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [ADMIN: Caution] Another font sizing question

2005-07-03 Thread Bob Easton

D Ross wrote:
I've been sizing fonts by specifying 100.01% on the body (the .01%  
helps safari and maybe IE for those wondering). I've been seeing,  quite 
frequently, people specifying body font size as 76%. Any  advantages or 
disadvantages to this besides probably not having to  specify basic font 
sizes such as p and li that would normally be  about 76%?


Font sizing questions like this come up on this list from time to time 
and all too frequently turn into heated discussions.  The territory has 
been covered many times wiht plenty of answers to be found in our WIKI 
(1) and the archives (2).


Please use those resources, and let's avoid yet another flame war.
(1) http://css-discuss.incutio.com/
(2) http://css-discuss.incutio.com/?page=SearchCssDiscussList

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] visibility for screenreaders

2005-07-03 Thread Bob Easton

Uwe Kaiser wrote:

Hi list,

On a page I use hovering to display additional informations.

AFAIK almost all screen readers do not read a text, that is
declared as display:none, and only one or two are reading
visibility:hidden.

Is there a way to say a screen reader to read non-visual text?

Today's screen readers ignore both display:none and visibility:hidden. 
The only way they will speak text is to be able to find it.  There are 
several methods that work well. (1)
See my WIKI article about screen readers (2).  I will be revising the 
results information on that page shortly as a result of more extensive 
testing on my accessibility blog (3).


(1) 
http://www.access-matters.com/2005/04/03/quiz-241-on-being-heard-but-not-seen/

(2) http://css-discuss.incutio.com/?page=ScreenreaderVisibility
(3) http://access-matters.com

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Problems with simplebits background cheat

2005-06-26 Thread Bob Easton

Purplegenie Design{web+print} wrote:

...

#divPagebody should be automatically stretched to the height of the 
longest floated column (shouldn't it?) and the background ought to 
stretch all the way down to the footer (oughtn't it?).


I have the nagging suspicion that I'm overlooking something terribly 
obvious.




Clearing floats correctly is important in all browsers. Here are two 
helpful articles:


http://www.complexspiral.com/publications/containing-floats/
http://www.positioniseverything.net/easyclearing.html

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] why width:100% in nested div corner technique

2005-06-22 Thread Bob Easton

Elly wrote:
I'm using a rounded corners technique of nested divs, based on the  
redmelon demo at:

http://redmelon.net/tstme/4corners/ (thanks!).

My demo is here (css embedded):
http://echozone.com/private/corners/

I have not been able to figure out why - width: 100% - commented out  in 
my demo, is used for those divs containing the images. I've  searched 
for what I assumed was a browser bug fix + found nothing.


Without the - width: 100% - this is tested successfully on Mac:  Safari, 
FireFox, Moz, IE 5. - Win IE6, IE5.5, IE5.01, FireFox, Opera.


Can anyone tell me why I would want to add that - width: 100% - ?


Douglas (remelon) included an email address directly on the page you 
referenced.  Why not ask him why he included the 100%?  Whenever 
possible, go to the source, especially when he makes it so easy.


The rest of us would be guessing (albeit experienced quessing).

--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Metallic website

2005-06-21 Thread Bob Easton

Greg Morphis wrote:

I thought I had the image attached?
Here's a link: http://www.worldindisorder.com/background.gif



- Original Message -
A friend of mine would like to see his site look like the attached..
The header is easy becase its a solid color, heh, but can someone help
with the metallic look of it? Is it possible?



Use two thin images as background images tiled horizontally.
The upper one is a gradient fill from gray to white.  The footer is two 
gradients coming together.


The only thing CSS related in this question/answer is the style applied 
to each container.


.main {background: url(main-gradient.gif) repeat x;}
.footer {background: url(fotter-gradient.gif) repeat x;}
--
Bob Easton
Accessibility Matters: http://access-matters.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


  1   2   >