Re: [css-d] Transparent Rows
On 19/02/2009, at 1:02 PM, Bill Brown wrote: background: rgba(153,153,153,0.5); Ooooh ... rgba ... I like it. How well supported is the a (alpha)? KathyW. __ css-discuss [cs...@lists.css-discuss.org] 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] Transparent Rows
Kathy Wheeler wrote: On 19/02/2009, at 1:02 PM, Bill Brown wrote: background: rgba(153,153,153,0.5); Ooooh ... rgba ... I like it. How well supported is the a (alpha)? http://css-tricks.com/rgba-browser-support/ -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.com -- __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Using margin on paragraph wrapped around block
Hi, I'm trying to get some text to appear shifted to the right, which works unless it's being wrapped around a block on the left. See: http://killingcupid.co.uk/blog2.php Obviously because it's wrapping, margins and padding don't get used until they finally reach the text from where the non-floated container actually starts. So basically I want non-titles to appear further right than the title. Floating the paragraph actually does this, but then it no longer wraps. Does anyone know how I can achieve this effect? Thanks Thom __ css-discuss [cs...@lists.css-discuss.org] 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] Superscript issues
HI Joseph, You wrote: Why do you use a span with a class when you already have the html tags for them? Can't you just tell the sup and sub tags to look the way you wish with css instead of making new classes? They are already there, and they seem more semantic (maybe not, kinda like b and i, I guess ). Is there something I'm missing? At the time I set things up with span and class I was disgusted with trying to use the sup and sub tags. No matter what I tried, the html tags persisted in giving me increased line heights so that my text which had some lines without superscripts or subscripts and some with looked pretty weird. Perhaps there is a good way to tame the tags but I didn't find it; once I wrote the sp and sb classed into my style sheet they worked quite nicely and I never looked back. -- Regards, Gene Falck gfa...@merr.com __ css-discuss [cs...@lists.css-discuss.org] 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] Superscript issues
Gene Falck wrote: You wrote: Why do you use a span with a class when you already have the html tags for them? Can't you just tell the sup and sub tags to look the way you wish with css instead of making new classes? They are already there, and they seem more semantic (maybe not, kinda like b and i, I guess ). Is there something I'm missing? At the time I set things up with span and class I was disgusted with trying to use the sup and sub tags. No matter what I tried, the html tags persisted in giving me increased line heights so that my text which had some lines without superscripts or subscripts and some with looked pretty weird. Perhaps there is a good way to tame the tags but I didn't find it; once I wrote the sp and sb classed into my style sheet they worked quite nicely and I never looked back. Actually, the argument can be and *has been* made that sup and sub mix presentation with style in much the same way as the aforementioned b and i pair (and others). I go back and forth on this one. I don't work very frequently with mathematics, but I do know there is quite a bit of difference between 10 to the 5th power (10^5) and 105. While sup and sub are given default styles by browsers, they *do* also have a contextual meaning not conveyed by a span tag. On the other hand, I can see how they could be problematic to style attractively. Just thought that for once I'd toss out some ambivalence instead of stirring up another CSS Overlords thread. ;-) -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.com -- __ css-discuss [cs...@lists.css-discuss.org] 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] Using margin on paragraph wrapped around block
From: Thom Brown thombr...@gmail.com See: http://killingcupid.co.uk/blog2.php So basically I want non-titles to appear further right than the title. Floating the paragraph actually does this, but then it no longer wraps. Hi Thom, A very simple option is to apply extra right margin on the image [1] and apply a negative left margin on the headings you want 'outdented'. That should be very quick to test to see if it's going along the right route for your needs. [1] compare this approach with applying left margin on the copy which, as you point out appears *behind* the image - Bobby __ css-discuss [cs...@lists.css-discuss.org] 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] Using margin on paragraph wrapped around block
2009/2/19 Bobby Jack bobbykj...@yahoo.co.uk From: Thom Brown thombr...@gmail.com See: http://killingcupid.co.uk/blog2.php So basically I want non-titles to appear further right than the title. Floating the paragraph actually does this, but then it no longer wraps. Hi Thom, A very simple option is to apply extra right margin on the image [1] and apply a negative left margin on the headings you want 'outdented'. That should be very quick to test to see if it's going along the right route for your needs. That's a very good and elegant solution to the problem and works exactly how I want it to. I've now implemented your recommendation. I guess my explanation made sense then. Thanks for your help Bobby. Thom __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Text position in IE
Good Afternoon; Please take a look at http://www.edi-cp.com/newweb/products_ul_intro.php in FF and IE. The text on the left side is supposed to wrap around the picture and the divs on the right. It looks proper in FF, but in IE the text is shoved far down the page -- none of it is to the left of the picture. WHY? How do I fix this? Thanks. There are a few other things (search box location) wrong in IE, but I can probably work those out. Del __ css-discuss [cs...@lists.css-discuss.org] 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] New to List First question.
On Wed, 18 Feb 2009 23:28:03 +0100, Gunlaug Sørtun wrote: Kathy Wheeler wrote: [...] do you mean you *only* throw ie6, 5.5 and 5 into quirks mode? But * not* ie7, 8 or any other browser? And of so, what do you find the best way to do that please? How about this way... http://www.gunlaug.no/contents/wd_additions_16.html I do enjoy your articles, Georg. Just one thing more -- visitors coming to your website via Google's cache will see IE 6 in quirks mode anyway. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] What is this CSS?
Found this in one of the css files a co worker sent me with his design templete. What is it for? Anyone know? Is it legal? And what is with the * * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } __ css-discuss [cs...@lists.css-discuss.org] 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] What is this CSS?
On Thu, Feb 19, 2009 at 4:58 PM, Jack Timmons jorac...@gmail.com wrote: On Thu, Feb 19, 2009 at 4:51 PM, Sarah Atkinson sarah.atkin...@cookmedical.com wrote: Found this in one of the css files a co worker sent me with his design templete. What is it for? Anyone know? Is it legal? And what is with the * * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } That's a proprietary (and invalid, although it's considered ok in some circles if placed in a conditional comment stylesheet) statement. It sets the height equal to scrollHeight if it's larger than offsetHeight, otherwise sets it to offsetHeight. * selectes all elements, and can be used to target IE (since * html isn't valid). http://www.positioniseverything.net/articles/ie7-dehacker.html http://www.webdevout.net/css-hacks To clarify: * is valid (choses all elements) * html isn't. * html targets IE6 and below. I assume since he's using that it isn't in a conditional commented stylesheet (also since it has Facebook, and therefore is satanic, evil, gives bad karma, and causes you to be reborn as a work mule with osteoperosis and psoriasis ;) ). end copy/paste of my idiocy I'm horrible at responding back to the list instead of the OP. -- -Jack Timmons http://www.trotlc.com Twitter: @jorachim __ css-discuss [cs...@lists.css-discuss.org] 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] Can CSS compare the href to the URL and if they match, highlight the href?
On Wed, 18 Feb 2009 14:02:07 -0500, Sandy wrote: I am working on a site that uses menus that are includes. I have been wrestling with a way to highlight the link to the page you are on in the included menu. I have a way that works, but it's kind of labour intensive - every page needs a unique bit of style in the header. I'm hoping you guys can suggest something a bit more global. Here is the site and the related style sheets. http://www.cantoraccess.com http://www.cantoraccess.com/css/ca.css http://www.cantoraccess.com/css/menu.css http://www.cantoraccess.com/css/ie6-hacks.css http://www.cantoraccess.com/css/ie7-hacks.css [...] Is there a way to write the style so that it will work without putting a style unique to each page in the head of that page? Can CSS compare the href to the URL and if they match, highlight the href? If every body tag has a unique id and I add a matching id to the link to that page, could I somehow get the browsers to compare that? I believe there is a way to add code to SSI includes, IIRC. However, for a CSS solution, your last method is probably the easiest to implement. Give each link a unique ID or class, and put a similar ID or the same class on the BODY tag of each page. Example: HTML: body class=macros_1 li class=macros_1a href=macros_2008_resna_library_download.shtml ... li class=macros_2a href=macros_2006_csun_quadruple.shtml ... CSS body.macros_1 li.macros_1 a, body.macros_2 li.macros_2 a, body.macros... /* rest of the links */ { /* styling for your are here link */ } (You don't really need the tag name qualifier, as .macros_1 .macros_1 a will target the same link. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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] What is this CSS?
On Thu, Feb 19, 2009 at 5:22 PM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: It's facebox not facebook Sent from my iPhone On Feb 19, 2009, at 6:01 PM, Jack Timmons jorac...@gmail.com wrote: On Thu, Feb 19, 2009 at 4:51 PM, Sarah Atkinson sarah.atkin...@cookmedical.com sarah.atkin...@cookmedical.com wrote: Found this in one of the css files a co worker sent me with his design templete. What is it for? Anyone know? Is it legal? And what is with the * * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } To clarify: * is valid (choses all elements) * html isn't. * html targets IE6 and below. I assume since he's using that it isn't in a conditional commented stylesheet (also since it has Facebook, and therefore is satanic, evil, gives bad karma, and causes you to be reborn as a work mule with osteoperosis and psoriasis ;) ). Point still stands ;) In that case, though, you should put that statement in a conditional comment, if you can, and remove that ugly * html. I misspelled osteoporosis. I blame late work nights. -- -Jack Timmons http://www.trotlc.com Twitter: @jorachim __ css-discuss [cs...@lists.css-discuss.org] 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] New to List First question.
David Hucklesby wrote: On Wed, 18 Feb 2009 23:28:03 +0100, Gunlaug Sørtun wrote: http://www.gunlaug.no/contents/wd_additions_16.html I do enjoy your articles, Georg. Thanks :-) Just one thing more -- visitors coming to your website via Google's cache will see IE 6 in quirks mode anyway. ...and IE7, IE8 etc. In fact: all browsers revert to quirks mode rendering when documents are retrieved through Google's cache, AFAIK. It is all the Google markup above the doctype that's responsible. That's one reason why I make sure IE falls back to a simple and stable fixed-width quirks mode layout, since none of the regular CSS and various workarounds necessary to make IE6 and the other IE versions behave and appear as good browsers, will work then. You might say I have designed for the Google's cache enforced quirks mode too, in addition to all the other variables. OTOH: only IE needs doctype for mode-switching to get out of the IE5.5 equivalent quirks mode... http://www.gunlaug.no/contents/wd_additions_34.html ...while other browsers will render more or less the same regardless of mode for documents like mine, since I style in a mostly mode-independent way. I only add a doctype so I can check validity against the relevant (X)HTML standard, and for no other reason. Besides: HTML Tidy kindly adds the right doctype for me anyway, so I don't have to bother. It pays to know those browser modes, or moods, and I have never really understood why doctype was turned into a mode-switch in the first place... http://www.gunlaug.no/contents/wd_additions_25.html Result: 1 point for W3C web standards and mode-independent styling. 0 points for a whole bunch of best practices and reliance on mode-switching. Next victim: (X)HTML 5 ;-) regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] 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] What is this CSS?
On Feb 19, 2009, at 10:51 PM, Sarah Atkinson wrote: Found this in one of the css files a co worker sent me with his design templete. What is it for? Anyone know? Is it legal? And what is with the * * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } This is a CSS expression from the stylesheet included with the jQuery modal window plugin Facebox [1], which the template presumably employs. Its purpose is to allow the Facebox overlay background to extend to the full height of the page. * html is a CSS hack for IE6 [2]. Jonny [1] http://famspam.com/facebox [2] http://css-discuss.incutio.com/?page=StarHtmlHack __ css-discuss [cs...@lists.css-discuss.org] 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] before pseudo element and opera
On Wed, 18 Feb 2009 20:23:06 -0500, Scott Schumpert wrote: I am hoping that someone else has experienced this and has figured out some solution, but I just can't seem to... I'd like to put an rightwards arrow in front of a link and using the 2192 code it works fine in safari, firefox and my preview in my css helper. I even added the escaped hexadecimal code for the character entity. It just will not display in Opera (9.63) at all -- is this a bug or am I writing something wrong? It's not just this entity either, the :before won't display any text either. Oddly enough, the :after element works just fine. Is this a margin or padding problem? I know I'm not giving a lot of information, but I don't have a live example and I was just hoping someone has seen this behavior before. Without seeing your code, I can't comment. But as far as displaying Unicode characters like this, I have indeed seen similar behavior, even when using a Unicode entity directly in the HTML. Not all fonts have a full range of Unicode glyphs needed to display all characters. Partly it depends on the font stack you specify, partly on what fonts are available on the visitor's computer, and partly on what strategy a browser uses to substitute for a font that does not contain a particular glyph. Sadly, browsers seem to differ on the strategy they use, although I wouldn't say one was better than another - just different. Your best bet is to try to ensure that all fonts in your font stack contain the arrow character. This is not foolproof, as I found out, because the same named font does not necessarily contain an equal set of glyphs on all computers. I wish I had an answer, but my conclusion seems to be it depends. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Form in IE7 has no left margin
I have a site with a form on it and it displays correctly in IE6, FF3, Opera 9 on WIN, and FF3, Opera 9, Safari 3 on MAC. However, in IE7 WIN the form does not seem to have the 20px left padding as specified in the style sheet. Here's the link: http://www.banacreative.com/demo/waterline/comments.php Is there something about IE7 and padding that I should know about? TIA __ css-discuss [cs...@lists.css-discuss.org] 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] Text position in IE
Del Wegener wrote: http://www.edi-cp.com/newweb/products_ul_intro.php The text on the left side is supposed to wrap around the picture and the divs on the right. No divs on the right, only spans wrapped in paragraphs. Those paragraphs need to go, or they can replace the spans and take over their styling. A mix of markup and CSS modifications necessary to make IE7 and 6 play along, so here's the page... http://www.gunlaug.no/tos/alien/dw/test_09_0220.html ...and relevant stylesheet... http://www.gunlaug.no/tos/alien/dw/test_09_0220_files/style_ed.css ...so you can study the solution(s). regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] 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] What is this CSS?
Sarah Atkinson wrote: Found this in one of the css files a co worker sent me with his design templete. What is it for? Anyone know? Is it legal? And what is with the * * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } Its an IE expession, DHTML being feed to IE/6 and down-- no support for min/max width or height (many such variations available) depending on the specific need. They are usually hid from the w3c Validation Service by enclosing in a Conditional Comment. http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] Text position in IE
Del Wegener wrote: http://www.edi-cp.com/newweb/products_ul_intro.php The text on the left side is supposed to wrap around the picture and the divs on the right. A mix of markup and CSS modifications necessary to make IE7 and 6 play along, so here's the page... http://www.gunlaug.no/tos/alien/dw/test_09_0220.html ...and relevant stylesheet... http://www.gunlaug.no/tos/alien/dw/test_09_0220_files/style_ed.css ...so you can study the solution(s). regards Georg Thanks Georg. I decided that I really did want spans and not divs. I made the changes you suggested and of course everything worked perfectly! I then tried to find out what your css changes were all about. After much searching and reading I think I understand what they accomplish but I have no earthly idea of why they are needed. Nor do I see any way of figuring out what to do the next time. Some folks seem to advise using overflow-x:hidden all the time on columns. Why? Why did you show that to IE 6 and only? I am pretty sure that * html div#container is seen only by IE6 whereas *+html ... is seen only by IE7. Statements of the form /* IE6 */ are strictly comments to enhance readability by us mere mortals. Why on earth should I suspect that I need * html h1 { float:left; margin: 1em; 0;} ? Do I need such a hack everytime I use H1, H2, or any of the other head tags? Where can I read more about this stuff? Del __ css-discuss [cs...@lists.css-discuss.org] 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] Fixed header with html select
Thanks for your reply. I got a solution which was not perfect, at least, in my opinion. The page can only display about 25 rows, so I record the index of the row that should be visible, that means, the for loop does not set the visibility of select element, just records the index, and then, I set the rows with the index and (index - 1) to hidden, and the index + 1 to index + 40 to visible. Though it was a little unstable when I scroll the scrollbar very fast, it can work in a less perfect way. Anybody has better idea? Thanks. By the way, why MS IE 6.0 show the select box when I have already set the header to be fixed? Kevin Rodenhofer wrote: I'd say it's just too much for the browser. Is there no way you can paginate the data? zhangatva...@yahoo.co.jp wrote: Hi CSS-discuss list, I have read the css article for implementing fixed header in the following URL: http://www.imaputz.com/cssStuff/bigFourVersion.html And it also gives a solution for hiding the html select element. But when I did that following the instructions, there was a problem: The table has more than 400 rows, and when I scroll the scrollbar, the browser stopped working. While, when I decrement the rows count, 40, for example, the hiding operation works fine. Browser: Microsoft IE 6.0 OS: Microsoft Windows 2003 Server Thanks in advance. Vic Zhang -- Power up the Internet with Yahoo! Toolbar. http://pr.mail.yahoo.co.jp/toolbar/ __ css-discuss [cs...@lists.css-discuss.org] 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/ __ css-discuss [cs...@lists.css-discuss.org] 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/ -- View this message in context: http://n2.nabble.com/Fixed-header-with-html-select-tp2350808p2357580.html Sent from the css-discuss mailing list archive at Nabble.com. __ css-discuss [cs...@lists.css-discuss.org] 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/