[WSG] IE: Suckerfish Popping "Under"
I've been working on this thing and I'm kind of stumped. I've tried Google to no avail. Any help on any of these points would be appreciated I'm using a Suckerfish-derived menu system for a new design, and I'm having the following problems in IE: 1) Menu's pop "under" all other content. A z-index value fixed FF, but IE is still problematic. 2) Menu's pop "under" each other, so if accessibility causes the text size to increase in IE, the menu break a line. The line break is fine, but the lower menu will always appear above the upper menu. 3) It appears that IE stops tracking mouse movement outside the containing div. Get about two options down the menu and it will retract again. And, on a totally separate note: 4) What do you guys think of the two background images (play with the buttons). I'd be interested to hear which you like more. I'm at an impasse. Files are here: Page: http://www.solvepoint.com/design/newEIQ/ CSS: http://www.solvepoint.com/design/newEIQ/css/eiq-screen.css IE CSS: http://www.solvepoint.com/design/newEIQ/css/eiq-screen-ie.css JS (simulating :hover in IE): http://www.solvepoint.com/design/newEIQ/js/menu.js Thanks a lot for any help you can provide, -Nate -- *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Longhorn & Avalon - seismic shift for web standards?
Isn't it funny that we were having these kinds of discussions about Netscape in '96? "Why design for anything other than Netscape?" We are finally getting standards that aren't tied to a particular browser implementation/build and we have to ask ourselves whether we want to use them? Give me a break...Coding for a particular browser is to doom the longevity of your design. The web is constantly in flux. Only third-party enforced specs will provide a reasonable foundation (enter W3C). -Nate ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
Laura, I understand that HTML certainly can be interpreted on other mediums. You don't think it caters to one medium over another? -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
>> I may not be hip with the kind of basic design/marketing resources you frequent. I'd be particularly mindful of "marketing" resources, as they're clearly not an impartial or authoritive source of information on what the web was meant to be and what HTML should be used for... You weren't following my reasoning. I wasn't saying that the marketing sites are a source for what HTML should be used for. I was claiming that I think they describe the interaction between presentation and content well - that there is a point where those layers cannot be separated and the presentation becomes part of the content. This was in context to how X/HTML is different from the written form of a speech, in that hearing the presenter deliver the speech (i.e. the presentation) feeds into the content. I'm just not sure that the delivery of information is as cut and dry as we're trying to make it...and if it's not that cut and dry, one has to ask whether the model implemented in X/HTML is truly universal. -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
We're starting to get pretty far out there. We'll have to see if any of these hopes come to fruition (which is my response to PODcasting or Talkr - we'll see if it's a lasting impact or a passing fad). >> Why would people with perfect vision, who have since early childhood relied on their capacity to see, be more likely to switch to an audio only browser? Yeah, that's my point. The web was built primarily to be seen and clicked on. Can X/HTML be used for other things? Sure. Is it best suited towards other things? I'm not so sure. It seems to be rooted in vision-presentation. >> How is a website different from the example above of notes to a speaker? Because when you go to a speech or a public reading, you go to hear the delivery as well as the information delivered. The most popular speeches that I'm aware of (I'm an American, so Dr. King's "I have a dream..." and Lincoln's "Gettysburg Address" come to mind) are popular not only for their content, but also for their delivery. We see a similar thing on the web. There comes a point where the line between content and presentation becomes blurred - they aren't always clear-cut. Actually, any web design/marketing 101 resource will tell you that. X/HTML seems better tailored to presenting the content visually than anything else. Again, we'll see what the future gives us. Thanks for the stimulating conversation. I have enjoyed it. -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
Ok, real quick. :-) >> and aren't derivations of bold and italics but the otherway around... Yes, my fault. I should have been more careful. >> In speech you do the same with intonation. If diferent people say the same thing in diferent languages or even in the same, it sounds diferent, but in means of structure you will still notice the emphasis, sometimes even without knowing the language. In speech, I would say we do a similar thing...not the same. There are rules for italics (refering to a particular thing, like a book or a word) that don't refer to any verbal usage. You wouldn't want screen readers to put emphasis there (i.e. "Because it is a verb, /run/ has a past, present, and future tense."). Yet we choose two elements, EM and STRONG that come from written forms instead of INF1 through INF5 for inflection values. Sure we can mimic inflection for EM and STRONG, but that doesn't change their origin or primary intention. I mean, think about it, we have whole tags devoted to tables and images - purely visual content. What purely auditory elements do we have (auditory descriptors of visual data don't count)? >> You are mixing DATA, CONTENT, STRUCTURE and VISUALIZATION. I'm not aware of all these differences...what's the difference between data and content? Aren't they the same? The closest thing I could find is the difference between data and information (http://dictionary.reference.com/help/faq/language/d/data-info.html), and if that's what you meant, I'd be interested to hear how you'd differenciate between the two in an X/HTML document. I can't think of a difference, but that certainly doesn't mean that there isn't one. Thanks for your thoughts! -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Martin Heiden wrote: Nathan, Am Dienstag, 12. Juli 2005 um 14:04:09 haben Sie geschrieben: Similarly, strong and emphasized elements are derivations of bold and italicized type, respectively. If you think about listening to a speech verses reading a speech, the oral form gives much less meaning to these "structural" elements (sometimes no meaning at all). I do not follow your argumentation. and aren't derivations of bold and italics but the otherway around. bold and italics are visual expressions of emphasis. In speech you do the same with intonation. If diferent people say the same thing in diferent languages or even in the same, it sounds diferent, but in means of structure you will still notice the emphasis, sometimes even without knowing the language. If you separate structure and visual expression, you've got much more chances to express exactly what you want. Yo can choose to express as orange text and as red instead of just being bound to italics and bold. And a screenreader can still distinguish between normal and strong emphasis. Maybe someday you'll be able to instruct even the screenreader how you want to express this structure in aural way. I would lump X/HTML in with that group of "inherently visual documents." And someone will say, "But it's data recorded electronically, not printed on a page," to which I would reply, "Data is data, whether stored in ink or in memory." A hard drive can contain 00010111, but whose to say whether that's a character or part of an Elvis mp3? The meaningfulness of data is largely in how it is interpreted, and the primary interpretation of X/HTML is visual. Screen readers can interpret websites orally just as audio books can interpret books orally. It doesn't change the idea that the primary intent was visual. You are mixing DATA, CONTENT, STRUCTURE and VISUALIZATION. These are different layers of the product that you see on your monitor or hear from your speakers. If you mix the compontents you loose flexibilty. If you store a book as DATA on a harddrive expressed as STRUCTUREd CONTENT - maybe technical as xml (or xhtml) - you can transform the same STRUCTURE with it's CONTENT to a visual representation (like a webpage) or using a screenreader to aural media (voice/mp3). You only have to change the VISUALIZATION. And I think that's huge a benefit. and are much more meaningful than or because they don't loose their meaning when transformed to different media. Martin. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
Patrick, Thanks for your ideas. I'll be considering them more fully, but I did want to respond with some initial thoughts/feelings: >> Actually, I always saw paragraphs as one single thought or topic. Once you go on to another thought, you're starting a new paragraph. Yes, the name derives from the printed world ("graph" is the clue here), but the more abstract concept is not bound to print or the visual world. I agree in that paragraphs contain single thoughts/topics, but do you think of someone speaking "in paragraphs?" I generally constrain that to written word, but perhaps that is not accurate. >> But all of that is irrelevant, IMHO, because the markup unequivocally defines what is a paragraph, heading, etc. There's no inferring of structure as in listening/transcribing speech. The structure can be defined in the markup in a way that it can't be in print (where you have to usual visual representations) or speech (where you use pauses, inflections, etc). Right (and, "sort of" - see below)! I'm saying the structure itself is best-suited for (and derived from) a literary document, that in its very nature a visual context is assumed (reading/looking). If this were not the case, we wouldn't have to go to extra lengths to make pages "accessible" for non-visual users. The fact that we have to add parameters and extra data for non-visual users should show us that the underlying framework is tailored to visual users. Tape a 30 second conversation between a husband and a wife, and there are no "headers" or "pages". It's a different ball game. >> How do you explain the fact that blind users can quite happily understand the structure of semantic XHTML documents? If it's so inherently visual, they should be at a complete loss. However, *because* the structure is agnostic in regards to how it's output (visually, aurally, whatever), that's not the case. That's easy: they need a tool to take what a browser would give them and instead provide the information to them in a format more meaningful to them. Unless you're willing to argue that a web browser is simply one of many tools (instead of the primary and intended tool) for viewing X/HTML information, this seems semi-obvious. If the structure was truly agnostic and unbiased towards visual presentation, you'd have people with perfect vision who would rather browse the web with a screen reader. The idea that screen readers are for people who have hindered vision seems to point to a bias towards the visual presentation of X/HTML if available. Accessibility, in my understanding (and I freely admit this could be a flawed understanding) is all about providing access to people without the ability to use a full-blown GUI, point-and-click web interface (whether due to disabilities or equipment [PDAs]). Note that W3C defines accessibility as meeting the needs of users who don't (negative) have something that the typical desktop user has: http://www.w3.org/TR/WAI-WEBCONTENT/#Introduction (AListApart says similar things: http://www.alistapart.com/articles/wiwa/). Accessibility doesn't seem to be about giving users a choice of interpretation as much as it is trying to give everyone the best usability experience possible - it doesn't say those experiences are equal or unbiased. >> That's like saying "a speech, lecture or public reading has a primary visual intent". Ahh, but that's different. In those cases written language is serving the spoken, acting as notes. That's why we practice speeches and public readings. We want to communicate information that isn't in the written form via inflection, pause, and volume emphasis. All I'm getting at is that we seem to have changed our thinking about a web that hasn't changed in nature, and it seems to be on the verge of counter-productive. Sure, I want all people to be able to benefit from the sites I build, but the idea that X/HTML lends itself to auditory users as much as it lends itself to visual users I don't find very convincing. Let me know if you have any other thoughts! I've got to get to work. :-) -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
>> Of course, one could argue that books, articles, any piece of print is inherently a visual document. Therefore it makes sense that it needs a visual hint to present structure. It's one of the only ways (combined with things like layout etc) that can infer some sort of hierarchy and structure to a document. Should this purely visual solution be applied on the web, where the markup itself can provide the structure? Absolutely. Many structural elements for the web have their origins in visual (i.e. written) communication. Paragraph elements derive their existence chiefly from visual cues. You can try to "speak" a paragraph structure by adding a pause or changing ideas, but a concrete paragraph can only be seen, not heard. Similarly, strong and emphasized elements are derivations of bold and italicized type, respectively. If you think about listening to a speech verses reading a speech, the oral form gives much less meaning to these "structural" elements (sometimes no meaning at all). A linguistics professor of mine once noted that there are very distinct differences between written language and spoken language - they are not the same animal. Three people could hear somebody speak a sentence, and come up with three different grammatically-correct representations of what they heard. Conversely (and I think this is even more prevalent), three people can speak the exact same sentence with three different styles of annunciation, and all be true to grammar. Yet in the same realm of language (oral to oral, written to written), the results would be much more accurate. Sometimes it can seem like this separation of structure from presentation is an attempt to extract data from language (language being the expression of data). If that's the case, we'll see how it goes, but I would think that the web (just like any other medium) has barriers and assumed guidelines. If we strive for too much separation, we might start entering the realm of meaninglessness. I would lump X/HTML in with that group of "inherently visual documents." And someone will say, "But it's data recorded electronically, not printed on a page," to which I would reply, "Data is data, whether stored in ink or in memory." A hard drive can contain 00010111, but whose to say whether that's a character or part of an Elvis mp3? The meaningfulness of data is largely in how it is interpreted, and the primary interpretation of X/HTML is visual. Screen readers can interpret websites orally just as audio books can interpret books orally. It doesn't change the idea that the primary intent was visual. Anyway, that's what I think. Hopefully I won't be accused of "bloviating". -Nate P.S. If XHTML 2.0 wants to replace HR with a more meaningful tag name, that's fine. I'm just saying that I think we need the functionality of that kind of element. *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
>> I believe it was renamed from because (like ) it is not necessarily horizontal. Oh, that's an interesting point. I hadn't considered that implication. -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
Can you 'xplain what that means? Maybe I missed your point. Seems like bloviating. "Bloviating," huh? I learned a new word today. :-) My point is a simple one. I mean that if we look outside of the web where horizontal rules are applied (which is probably the HR tag's origin), we see that they have relevance to content. Therefore, if we want to easily portray that content (books, articles, journals, etc.) on the web, something like the HR tag is needed, otherwise we loose some document portability. Let me know if I can clarify further, -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] HR - Presentation or Structure?
I think the presentation/structure dichotomy is a bit misleading...let's talk about presentation/content (the "structure" of a page makes me think of its presentation rather than the content that the presentation is presenting). And I'll just throw this out there: Does anyone know how screen readers handle HR's? The use I see for HR is not presentational, par se, but rather to separate large amounts of content and make it more readable. It is the web's equivalent to a novel's line of asterisks, used to communicate a break in plot, location, or time, and is therefore part of the content just like paragraphs are. A border fails to complete this purpose for two reasons: (1) A border must be associated with a container element. Thus, in order to logically break apart large parts of text, the text cannot be contained in the "same flow" within one container. One might say that you could easily add a border and appropriate margin to even something as simple as a paragraph tag, but that ignores the use specified above. If I have a chapter or a report, the horizontal rule is a characteristic of that larger unit, not the last paragraph that occurs before the break. (2) A border will vanish should the style/application change. The reason I asked about screen readers is that an HR used correctly is part of the content. It dictates how that content should be subdivided and interpreted. Think of what horizontal rules accomplish in books, journals, magazines, and other text-oriented atmospheres. Is it presentation? Sure. Just like paragraph breaks (or even commas and periods) are presentation - they provide a basic building block for readable content, and are so basic that they become a part of the content. Deliver that content to a website, a publication, or an oral presentation, and in each circumstance the break should have an effect to that delivery, whether it's a visual line or a pause in delivery to communicate a division to listeners. Now, having said this I realize that W3C does not agree in the strictest sense: "The HR element causes a horizontal rule to be *rendered by visual* user agents." (http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.3) However, I think if we look at the larger use of horizontal rules in other mediums, we'll see that there's still a place for them on the web, especially if we want a web that can store content from those other mediums. What are your thoughts? Did I convince you? ;-) -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Gunlaug Sørtun wrote: Kenny Graham wrote: Am I alone in feeling that should be depreciated in favor of CSS borders? Especially with in the XHTML 2.0 drafts, what semantic or even structural value does have? Every argument for its retention that I've heard so far has been presentation related. Well, I only use for non-CSS browsers / software (hidden from graphical browsers), so I find it to be a handy element for dividing content at times. Adds a little structure... Borders and other types of separators are fine, so those are preferred for presentational use in graphical browsers. If the future brings better solutions, then I'll probably use those instead - once the browsers have caught up. regards Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] sprites to the right of me
Ted, Is text involved at all in this link? If so, I would suggest using 100% and adding transparent pixels to the right of the image to "bump" it away from anything on that side. Remember, text sizes can change with browser/user preferences, so if you assign a background to be 999px from the left, if the font is scaled it will overlay the background image. Hope that helps, Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Drake, Ted C. wrote: Hi lea Thanks, I hadn't tried the 100% before. I remember seeing it ages ago. It's a large sprite and I like to leave plenty of white space between icons to avoid a stray icon showing up where it shouldn't. Hopefully, I can mix 100% with a pixel measurement to go down 999px. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lea de Groot Sent: Monday, July 11, 2005 2:24 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] sprites to the right of me On Mon, 11 Jul 2005 14:11:39 -0700, Drake, Ted C. wrote: .spritely {background: url(bg-icons.png) no-repeat -35px -999px; padding-left:65px; min-height:15px; } However, we'd like this particular link to have the background image on the right side of the text. As far as I know, the first number: -35, is for the left position. How would I say sit on the right side? If I pull the image out of the sprite, I could say ... no-repeat right top;... If you use padding-right you will leave a gap on the right hand side for the image to sit in. If you use background-position of 100% (x-axis) it should push the image all the way to the right. ie rather than -35px -999px, use 100% something. (Not sure #2 is 100% correct as I am answering quickly, but it should give you a pointer on what to experiment with) See: http://www.w3schools.com/css/pr_background-position.asp HIH! Lea ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] sprites to the right of me
Don't use pixel values, use percentages or keywords: .spritely { background: transparent url("bg-icons.png") no-repeat right center; padding-right: 65px; min-height: 15px; } Hope that helps, Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Drake, Ted C. wrote: Sometimes, it seems like I can practically code sprite background images in my sleep. But I have a problem when I want to place a sprite-ed background image to the right of an object. For instance, this is the css to place an image to the left of a link's text. .spritely {background: url(bg-icons.png) no-repeat -35px -999px; padding-left:65px; min-height:15px; } However, we'd like this particular link to have the background image on the right side of the text. As far as I know, the first number: -35, is for the left position. How would I say sit on the right side? If I pull the image out of the sprite, I could say ... no-repeat right top;... At the same time, what if I wanted something to sit at the bottom of a div or fieldset and it was in a sprite? Any suggestions? Ted ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Getting in a muddle
In that case, perhaps using an EM size would be more effective than a percentage. It would still be resizable for accessibility, but it might not throw 5.5 for a loop... -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> designer wrote: Well that certainly works Ingo - thank you! Bob Ingo Chao wrote: designer schrieb: www.gwelanmor-internet.co.uk/typotest.html and there you will see the effect working fine in IE6, FF1.0, Opera etc. But IE5.5, although it gets the colour right, h6:first-letter doesn't pick up the increase in size for the first letter. havent looked to deep in it, but h6:first-letter { ... font-size: 436%; /* feeds IE55*/ fo\nt-size: 218% /* the rest */; } seems to be a start. looks like as if 5.5 does not know with respect to which size it should calculate, but you'll have to test it. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Element Jump (IE) and Full Width Problems
Hey guys, I'm trying to build a header for a new design. Page: http://www.solvepoint.com/design/sp4.2/ CSS: http://www.solvepoint.com/design/sp4.2/css/sp-screen.css IE CSS: http://www.solvepoint.com/design/sp4.2/css/sp-screen-ie.css The navigation is based on Suckerfish: http://www.alistapart.com/articles/dropdowns/ I'm experiencing two problems: 1) (IE ONLY) When the page loads, the menu items are in the upper-left corner of the screen until used the first time, then they jump into place. I thought they needed "layout" and so assigned height attributes to all items involved. Unfortunately that didn't work. 2) I can't seem to get #pageContainer to stretch to 100%. I've assigned "min-height: 100%" to the html and body elements. I don't know what else it will take. Additionally: 3) Suckerfish floats all of its items to get the inline appearance. Currently I have to use non-floated content ("Other Content") to get FireFox to display the background image on the containing DIV. Is there anyway to display a background image behind floated elements? Thanks for any help, Nate -- *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] image height and width question which is better CSS or inline
A few thoughts: 1) If you were to use CSS to specify size for the image, I don't think you'd want to use a class, unless it was one of many images that fits that style (i.e. a photo gallery thumbnail where 10-20 instances might appear on one page). If you're just talking about one image, an ID would be more properly suited. 2) The goal of CSS is to separate content and the presentation of that content. The benefit of CSS is that if you would update the image you could change one easy-to-find definition in the style sheet instead of hunting through HTML tag soup. 3) Unless you are resizing the image on the fly (the image is 300x200 and you want to display it at 150x100 - not a best practice anyway), you lose nothing if you specify a style to a browser that can't interpret. The image will, by default, display at 100%. The only reason I see for specifying height and width attributes in the IMG tag is if you are not displaying the image at 100% and are expecting hits from browsers that wouldn't recognize that basic style (Netscape 3?). 4) Specifying height and width on images by default was a trend made popular in the late 90's, where slow-to-render table-based layouts were used (which relied heavily on images "pushing" the cells around to the correct size/location) and everyone was using dialup access. The problem was that the small placeholder used by the browser would shift content around when the image was loaded at its proper size. With today's Internet, where a large client base is using broadband and developers are utilizing near-instantaneous CSS-positioned elements, there might not be much of a need to specify the image dimensions. I'm not sure it's necessary in most cases. No matter where you define the height/width, that is one more step you'd have to take if you ever updated the image in the future with one that isn't the same dimensions. Hope that helps, Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Bruce Gilbert wrote: I have a question about which is the better way to approach adding a height width to an image for accessibilty/standards. or and in the CSS have: .thisimage{ height:25px; width:45px; } or is either one o.k? TIA ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Siteproblem... IE off course
What "big problems" are there in IE? I'm looking at it in IE6 and the only difference I see from FF 1.04 is the box in the center labeled "Testartikkel" starts in green 1/2 down the box instead of the whole height (I'm an English-only speaker though, so I feel kinda lost when I look at the site anyway). Are there other differences occurring? -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Gunlaug Sørtun wrote: Siteman DA - Bent Inge wrote: Page: http://modulvegger.prosjektweb.net Sheet: http://modulvegger.prosjektweb.net/sitestyle.css Looks right in Firefox and Opera, but I've got big problems with the intended look in IE. No surprise there... :-) You'll have to play with the 'hasLayout' property and 3px margin-jog in IE/win. Something like: .groenn { background: #3c0 url(a000.gif) no-repeat 0 0; _height: 0; /* hasLayout trigger */ _margin-right: -3px; /* corr jog */ _margin-left: -3px; /* corr jog */ } ...is the closest IE6 can get with that layout. Similar solutions (hacks) may be needed elsewhere in that page, but I don't have time to look further into it. regards Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Strange IE behavious that doesn't make sense
Oh, that IS interesting! And very helpful. Thanks for sharing! -Nate Ingo Chao wrote: Nathan Rutman schrieb: >> Whenever a background is disappearing, try to give layout to the parent of the element via the Holly hack. What does that mean? You want to give a height:0 to the parent element? I don't get it... Holly Bergevin's hack is described in detail here: http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0 The intention of this hack is not to give whatever height to the container, but to let the block gain "layout". "Layout" can only be described roughly as a IE-Win proprietary undocumented concept to establish a rectangular rendering entity that is responsible for drawing its own content. Explorer's "dimensional" bugs are related to the presence or absence of "layout": http://www.positioniseverything.net/explorer.html Note: I don't know if this hack fixes the bug in tee's page, it does on a local simplified copy, though. You mentioned the dependence on some characters more or less, and I can confirm this. Sometimes these characters more or less shift the wrapping of the content just by some microns, i.e. lines do not end with italicised content, or the wrapping content next to a float leaves a single line blank near to the last "bottom line" of the float, and so on. Or a tight fitting of the related containers induces more problems like duplicated last characters. Would be interesting to see your minimalized bug test page. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Strange IE behavious that doesn't make sense
>> Whenever a background is disappearing, try to give layout to the parent of the element via the Holly hack. What does that mean? You want to give a height:0 to the parent element? I don't get it... -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Ingo Chao wrote: tee schrieb: Here is the url: http://clients.lotusseeds.com/dojoprocedures.html Another page that is using the #preamble is 'Karate overview'. There should have a fist image next to 'Dojo' and 'Karate overview', but it's not there in PC IE 5.5/6. Sense? We still speak of IE, don't we? Whenever a background is disappearing, try to give layout to the parent of the element via the Holly hack. /* \*/ * html #preamble, * html #supportingText, * html #explanation, * html #furtherExplanation, * html #schools {_height:0; } /* */ Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Accessible Flash?
Rachel, See question #6 on WSG's own "Ten Questions for Russ Weakley". He addresses that very issue: http://webstandardsgroup.org/features/russ-weakley.cfm#flash Hope that helps, -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> Rachel Radford wrote: Hi I'm wondering if anyone is able to give me any pointers of creating an accessible flash movie? I have this site: http://www.thesurveycompany.com which I am aiming to change to an accessible flash movie and insert in the page using flash satay. I've read articles on how to make the flash movie accessible (http://www.macromedia.com/resources/accessibility/) and I would like to have the buttons in the flash movie come into the tab-order. I've tried what it says in the article on that page, but it's not tabbing onto the buttons. Has anyone done something similar before and able to give any pointers?? Is there anything else that should be considered when looking into making flash accessible? Thanks! Rachel ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Strange IE behavious that doesn't make sense
Tee, I had a similar error when creating external link images utilizing a background image. In my case, the background image being ignored was on a link that preceded a comma. Once removing the comma the background image showed. Now, that doesn't make any sense to me, but I would try changing your text to see if you can get the image to appear. If so, then at least we know it's the same problem (meaning, it's not a solution, but it might help diagnose the problem). Hope that helps, -Nate *Nathan Rutman* ([EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>) Corporate Communications Designer *Solvepoint Corporation* 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com <http://www.solvepoint.com> tee wrote: I have a group of h3 that shares the same background image. #preamble h3, #supportingText h3, #explanation h3, #furtherExplanation h3, #footnote h3 { font: normal 1.2em Georgia, "Times New Roman", Times, serif; color: #573900; margin-left: 165px; padding: 35px 0 15px 40px; background: url(images/fist.jpg) no-repeat 0px 30px; } The #preamble h3 background image not showing up in PC IE but the rest of the h3 are ok. This is all very strange, I can't find what I did wrong. Here is the url: http://clients.lotusseeds.com/dojoprocedures.html Another page that is using the #preamble is 'Karate overview'. There should have a fist image next to 'Dojo' and 'Karate overview', but it's not there in PC IE 5.5/6. Regards, Tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] more definition list lovin' - the lh tag.
Looks like it's in the HTML 3.0 draft: http://www.w3.org/MarkUp/html3/deflists.html You're right - no mention of it in 4.01, although both IE and FF support it. I wonder why they got rid of it. -Nate Nathan Rutman ([EMAIL PROTECTED]) Corporate Communications Designer Solvepoint Corporation 882 South Matlack Street, Suite 110 West Chester, PA 19382 800.388.1850 x1208 484.356.0990 (fax) www.solvepoint.com Joseph Lindsay wrote: Hi Ted, can you give me the URL where you found that? As far as I can tell from the HTML 4.01 DTD (i'm happy to me corrected) the element must contain 1 or mor or elements, and can't contain any other elements (although the can have inline elements and can have block and inline elements). I can't find any reference to a element in the current specs. On 7/7/05, Drake, Ted C. <[EMAIL PROTECTED]> wrote: Just when I thought I couldn't love the definition list any more, I looked at the w3.org definition of the definition list and came across this: The opening list tag must be . It is followed by an optional list header (caption) and then by term names () and definitions (). For example: List Header Term 1This is the definition of the first term. Term 2This is the definition of the second term. which could be rendered as: List Header Term 1 This is the definition of the first term. Term 2 This is the definition of the second term. Holey headers, batman! We can put a list header on our definition list? How cool is that?!? Has anyone seen a site that uses this? Andy Clarke uses the definition lists in forms, http://www.stuffandnonsense.co.uk/archives/e-commerce_definition_lists.html . This would be a great way to markup a set of radio buttons and use the header to define the group of buttons. One of these days, I'm just gonna have to sit down and read the entire specs. Ted www.tdrake.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **