Re: [css-d] style sheets and page weight
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
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)
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
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
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?
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
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
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
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
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
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
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
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
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
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
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
[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
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
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?
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
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
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
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
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
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
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
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
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?
[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?
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
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
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
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%;
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
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
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
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
{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
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
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
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
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
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
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
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
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
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
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
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
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
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
[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
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
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?
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
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
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?
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
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
[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
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
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
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
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
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?
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
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
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
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
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
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
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?
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 ?
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
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
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 ?
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
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
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
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
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
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
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 ;)
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?
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
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
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
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?
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
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
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
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)
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
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?
[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
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
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
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
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
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/