Re: [css-d] I've got the IE blues...
I forgot to say, I've still got the problem with what I think is the IE double margin problem which I can't seem to solve. It shows itself in Win IE 5.1,5.5 and 6, but not 7. See Browsershots: http://browsershots.org/website/http://catnaps.org/latest/saturday.html Does anybody know what I've done wrong? Regards JL On 29/07/07, John Lockerbie [EMAIL PROTECTED] wrote: On 29/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: David, Thank you for the comments. I should have said it seems to be fine on Mac/Opera, as it does on Safari and Firefox, it's the Windows environments I've no access to. I'd not spotted the font size problem as I'm new to coding. This is my third attempt to redesign my site - see the problem in http://catnaps.org/islamic/islaurb.html - in order to reduce page lengths. JL The comments I made regarding Opera are when I veiwed it on a mac: Version 9.21 Build 3678 Platform MacOS X System 10.4.9 If page height is an issue could you split the pages or use js to open and close division sections. With regard to fonts, I am referring more to IE's inability to scale fonts when set in pixels, /regardless of page height,/ unless the user goes through the drill of putting the browser in accessiblity mode with the ignore font-sizes specified box checked. One way to avoid this is to set percent at user default (100%) on the body, and then use percent on individual selectors throughout the style sheet as needed (line-height is best specified as a raw number). For example: body {font: 100%/1.4 arial, helvetica, sans-serif;} h1 {font-size: 180%;} #footer p {font-size: 80%; line-height: 1.2;} Best, ~d -- http://chelseacreekstudio.com/ David, I looked at the page on Opera Version: 9.22 Build: 3687 MacOS X System: 10.4.10 I work on Safari Version 2.0.4 (419.3) and check on Firefox 2.0.0.5. I don't have access to a Windows environment except at my local library where they've got the screens in the most bizarre arrangements you've ever seen and don't know how to change them. What I'm attempting to do is split the pages into a number of smaller pages, these being set out in the top and bottom menus - 'Menu for al-Salata...' - and it's that which is causing me the problems. I like the idea of using js to open divisions, but thought that might give visitors problems. 50% of my visitors use WinIE6, 25% WinIE7, 15% Firefox and the rest a variety, so I'm really concerned to get the IE6 sorted out. I take your point about the font scaling issues and spent some time researching Zeldman et al to find a consensus. There isn't one. But I do worry about accessibility and will see what I can do about the fonts. I may sit in a darkened room and try to think the paging problem through again and see if I can find a simpler system. Anyhow, a lot to think about, With kind regards John __ 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] I've got the IE blues...
On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: I forgot to say, I've still got the problem with what I think is the IE double margin problem which I can't seem to solve. It shows itself in Win IE 5.1,5.5 and 6, but not 7. See Browsershots: http://browsershots.org/website/http://catnaps.org/latest/saturday.html Does anybody know what I've done wrong? Regards JL This is a mystery. You did not provide a url with this re-post. Using the url you provided yesterday [1] shows the page (s) rendering properly in IE7 through 5.01 (on XP) with no signs of the float drop seen in your screen capture. The page is rendering (from your question yesterday) as intended in win/Opera but not mac/Opera. Note that you have a series of markup validation errors within a list around line 1482. [1] http://catnaps.org/islamic/islaurb.html Best, ~dL PS Fwiw, top-posting is making it impossible for anyone to follow this thread-- write below (rather than above) those you reply to on the list Apologies for the top posting. I'll check out the listing error. The address for the problem float drop which occurs on Win IE 5.1,5.5 and 6 but not 7, is: http://catnaps.org/latest/saturday.html with css file: http://catnaps.org/latest/latest.css With kind regards JL __ 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] I've got the IE blues...
John Lockerbie wrote: On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: I forgot to say, I've still got the problem with what I think is the IE double margin problem which I can't seem to solve. It shows itself in Win IE 5.1,5.5 and 6, but not 7. See Browsershots: http://browsershots.org/website/http://catnaps.org/latest/saturday.html Does anybody know what I've done wrong? Regards JL The address for the problem float drop which occurs on Win IE 5.1,5.5 and 6 but not 7, is: http://catnaps.org/latest/saturday.html with css file: http://catnaps.org/latest/latest.css With kind regards JL John, If you can cope with not having cross-browser pixel perfection, the correction on a local file (without hacking) is to change the margin in #sidebar to read: margin: 10px 0 10px 5px; Others on the list may offer a better alternative. Best, ~dL -- http://chelseacreekstudio.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] I've got the IE blues...
On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: I forgot to say, I've still got the problem with what I think is the IE double margin problem which I can't seem to solve. It shows itself in Win IE 5.1,5.5 and 6, but not 7. See Browsershots: http://browsershots.org/website/http://catnaps.org/latest/saturday.html Does anybody know what I've done wrong? Regards JL The address for the problem float drop which occurs on Win IE 5.1,5.5 and 6 but not 7, is: http://catnaps.org/latest/saturday.html with css file: http://catnaps.org/latest/latest.css With kind regards JL John, If you can cope with not having cross-browser pixel perfection, the correction on a local file (without hacking) is to change the margin in #sidebar to read: margin: 10px 0 10px 5px; Others on the list may offer a better alternative. Best, ~dL -- http://chelseacreekstudio.com/ David, I'll have a look at that suggestion though I would prefer to get a more symmetrically arrangement if at all possible. With kind regards JL __ 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] I've got the IE blues...
I prefer top-posting as well... scrolling down constantly is a pain... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, July 30, 2007 7:32 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] I've got the IE blues... John Lockerbie wrote: PS Fwiw, top-posting is making it impossible for anyone to follow this thread-- write below (rather than above) those you reply to on the list That fad is your personal preference. Many of us dislike scrolling down through long quotes to see whether the current posting has any content or is of interest. Many of us prefer so-called top-posting or interleaved posting. But I wouldn't presume to force either upon you. Bruce __ 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-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] I've got the IE blues...
John Lockerbie wrote: On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: On 30/07/07, David Laakso [EMAIL PROTECTED] wrote: John Lockerbie wrote: I forgot to say, I've still got the problem with what I think is the IE double margin problem which I can't seem to solve. It shows itself in Win IE 5.1,5.5 and 6, but not 7. See Browsershots: http://browsershots.org/website/http://catnaps.org/latest/saturday.html Does anybody know what I've done wrong? Regards JL The address for the problem float drop which occurs on Win IE 5.1,5.5 and 6 but not 7, is: http://catnaps.org/latest/saturday.html with css file: http://catnaps.org/latest/latest.css With kind regards JL John, If you can cope with not having cross-browser pixel perfection, the correction on a local file (without hacking) is to change the margin in #sidebar to read: margin: 10px 0 10px 5px; Others on the list may offer a better alternative. Best, ~dL -- http://chelseacreekstudio.com/ David, I'll have a look at that suggestion though I would prefer to get a more symmetrically arrangement if at all possible. With kind regards JL John, I experimented a little and have it closer in compliant browsers as well as IE7 through IE5.01 (did not check mac/ie5.2). It may not pass a micrometer test for cross browser pixel perfection but it is far better than it was. Note that the file is now in quirks for IE6 and down, and that in 5,5 and 5.01 the page is now centered. You'll want to validate. And I don't remember all that I changed. You'll need compare my styles with yours. The uri is: http://www.chelseacreekstudio.com/ca/cssd/arch.html Best, ~dL -- http://chelseacreekstudio.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] I've got the IE blues...
David, Thank you very much for your time and effort. I'll take a close look at what you've done and see if I can then amend my site to suit. Incidentally, the site was always supposed to be centred. I've been trying to re-rationalise what I'm doing and simplify it but seem to be getting lost with all the different methods I'm trying. Isn't css fun...? With kind regards JL John, You are welcome and I hope it works out. And, yes CSS is fun (particularly when you can find answers in the list archives that have not been messed up by folks who top post). Best, ~dL -- http://chelseacreekstudio.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] I've got the IE blues...
Morning Bruce You wrote John Lockerbie wrote: PS Fwiw, top-posting is making it impossible for anyone to follow this thread-- write below (rather than above) those you reply to on the list That fad is your personal preference. Many of us dislike scrolling down through long quotes to see whether the current posting has any content or is of interest. Many of us prefer so-called top-posting or interleaved posting. But I wouldn't presume to force either upon you. Bruce Not a fad and not someone's personal preference. The following is from the list policies [1] Please note the second point. a.. Trim your replies. If you have more quotation than original text, think about cutting down on the quoted stuff. The list members can look at the message to which you responded, or check the archive. Prune that quoted text with ruthless abandon. Everyone else will thank you for it, especially the list admin(s). Don't forget, thankful list admins are less hasty with the unsubscribe button. a.. The list admin(s) will scowl heavily in the direction of any Jeopardy-style quotations-- ** that is, putting your answer before the quoted question to which you're responding ** -- but won't actually unsubscribe you for doing it. Unless you keep doing it without trimming down your quoted text (see above). (emphasis added) [1] http://www.css-discuss.org/policies.html It might be worthwhile for list members to review them. After all, when we joined the list, we *all* agreed to abide by them.. Best to all Jim Nannery www.redfernenterprises.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] font-size in body not inherited
On 7/29/07, Philippe Wittenbergh [EMAIL PROTECTED] wrote: That document is in Quirksmode. And the p are descendants of a table In that mode (also known as backwards compatibility mode), inheritance does not go _through_ table: table resets the font- size to 1em. If you use a DocType [1] that triggers Standards Mode, then the inheritance will work. [1] at a minimum: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN Right you are. Thank you. I'll make validation my next priority. Mike -- Michael P. Soulier [EMAIL PROTECTED] Any intelligent fool can make things bigger and more complex... It takes a touch of genius - and a lot of courage to move in the opposite direction. --Albert Einstein __ 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] Expandable div's with rounded corners
On Mon, 30 Jul 2007 02:39:08 +0100, Aaron Gray wrote: I have a three column example with expandable center column :- http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html Is there any way to add modern rounded style corners to this ? I can see how to do it to the fixed width div's but not the header and center div's. Many thanks in advance, You may get some ideas here: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Great, thanks alot that looks like it will do the job nicely. Aaron __ 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] IE 7 link bug?
Hello all, A strange oddity here When you scroll down on http://www.cwwebs.net/bc2007/ medical_negligence.html to the list (in content area) where it shows the list beginning with “cerebral palsy” and click on the link, then hit the back button in IE7 browser, then the next list item will be highlighted red as if you had just visited it instead of the link you actually clicked. It doesn't happen in IE 6 and any other browser. Any ideas and/or fixes? Main CSS file: http://www.cwwebs.net/bc2007/css/styles.css Thanks! Kevin __ 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] Expandable div's with rounded corners
On Mon, 30 Jul 2007 02:39:08 +0100, Aaron Gray wrote: I have a three column example with expandable center column :- http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html Is there any way to add modern rounded style corners to this ? You may get some ideas here: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Can anyone solve this one :- http://www.aarongray.org/Test/CSS/ThreeColumnRoundedCorners.html On IE 6 the corners on the center div are not endering in the correct places. Looks and works fine on IE7 and FF. Many thanks in advance, Aaron __ 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] Expandable div's with rounded corners
On Mon, 30 Jul 2007 02:39:08 +0100, Aaron Gray wrote: I have a three column example with expandable center column :- http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html Is there any way to add modern rounded style corners to this ? You may get some ideas here: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Can anyone solve this one :- http://www.aarongray.org/Test/CSS/ThreeColumnRoundedCorners.html On IE 6 the corners on the center div are not endering in the correct places. Looks and works fine on IE7 and FF. Many thanks in advance, Aaron __ 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] collapsing vertical margins
- Original Message From: Gunlaug Sørtun [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, July 29, 2007 7:09:14 PM Subject: Re: [css-d] collapsing vertical margins (definitely! I can create a bigger and more complex mess _with_ CSS, than anyone could do before CSS... :-) ) The humour helps! ; - ) I've also found (sigh) that IE6 suddenly ignores paragraph margin-right when that paragraph is absolutely positioned (it respects all other margins, however). What is THAT all about?? One of IE6' many weak spots, and a good reason not to use A:P as a fix. A:P is useful for other purposes. In your case I would reduce the styles/source code to something like... http://www.gunlaug.no/tos/alien/test_07_5080.html regards Georg Thank-you for taking the time to do this, Georg -- I really appreciate it! I've studied your code, and have saved it for future reference. Your comments show that you've used a number of specific hacks/workarounds (eg, the body's text-align: center for IE, the overflow: hidden used to [i think] subdue the 'hasLayout' in IE, etc). I'd like to find explanations of both the hacks and the problems they undo, so that I can understand the principles, rather than simply imitate the code. However, I'm new at all of this, and don't understand many of the references and terminology I encounter along the way (eg, http://www.satzansatz.de/cssd/onhavinglayout.html, which Alan so kindly provided). I've been studying Eric Meyer's CSS-Definitive Guide for three months now, but he doesn't even mention the hasLayout problem. (One would think that a detailed explanation of absolute positioning - which he furnishes - should include the rather important disclaimer that nothing else will work when using it in IE! Some tried-and-true hacks/workaround to employ so that one can actually use the absolute positioning he details would also seem fitting.) Any suggestions as to where a beginner like me can find understandable explanations for the hacks and workarounds used for IE and the problems they address? Thanks again! - Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ 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] Expandable div's with rounded corners
At 2:39 AM +0100 7/30/07, Aaron Gray wrote: I have a three column example with expandable center column :- http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html Is there any way to add modern rounded style corners to this ? I can see how to do it to the fixed width div's but not the header and center div's. Many thanks in advance, Aaron Aaron: You might want to consider this: http://sperling.com/examples/box/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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] text-transform
Hi Guys, I have a select drop down filled with color codes such as PINK/BLUE etc... I want them to show up as Pink/Blue in the database that fills this list, they are stored in all CAPS, and are pulled directly with no formatting. I applied the text-transform of capitalize to the element, but it doesn't seem to have any effect. It seems like it can only capitalize from lowercase, and won't lowercase all but the first letter. Before I go server-side and lcase() my array, I'm wondering if theres a better way with CSS. I thought about something like: #myselect { text-transform: lowercase; } #myselect { text-transform: capitalize; } which will first lowercase all the items, and then capitalize the words. but this doesn't seem to work... it still displays in full CAPS. Any css ideas (cross browser (so none of those :after techniques)) before i go into the back end system? Thanks! __ 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] Expandable div's with rounded corners
At 2:39 AM +0100 7/30/07, Aaron Gray wrote: I have a three column example with expandable center column :- http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html Is there any way to add modern rounded style corners to this ? I can see how to do it to the fixed width div's but not the header and center div's. Many thanks in advance, Aaron Aaron: You might want to consider this: http://sperling.com/examples/box/ Tedd, I will have a look at it, thanks, Aaron __ 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] effects of hasLayout (on one very discouraged student of CSS)
- Original Message From: Michael Leibson [EMAIL PROTECTED] To: Alan Gresley [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, July 29, 2007 3:21:08 PM Subject: collapsing vertical margins Michael Leibson wrote: . . . IE6 suddenly ignores paragraph margin-right when that paragraph is absolutely positioned (it respects all other margins, however). What is THAT all about?? Alan Gresley responded: . . . Since you have a width set for your container, it has hasLayout (for IE only), which causes the adjoining margins not to collapse. . . . . . Remember hasLayout only effects IE and when an elements gains hasLayout all types of undesired effects are seen, please see http://www.satzansatz.de/cssd/onhavinglayout.html Reread this several times over a few weeks and all will eventually sink in. Hi again, Alan (and anyone else interested in this topic); I've been trying to understand the satzansatz article, as well as other articles to which it refers. One of these is the article by Markus Mielke, of MS, HasLayout Overview, at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp. Among other things, that article seems to say that once a CSS property triggers IE's hasLayout, the affected block element is given a new 'block formatting context', which I take to mean that -- in terms of some parameters, like dimensions -- it no longer refers to those of its parent, but to those of some previous ancestor (eg, body, rather than containing div). If so, this might be the explanation why the margins of my absolutely positioned p didn't operate in relation to its containing div, but instead extended past that parent. Am I on the right track?? If I am, then it would seem to me that the most direct workaround/hack would be to somehow hide the p's {position: absolute;} and the WIDTH, and every other CSS-provoked hasLayout trigger from IE, but not from all other browsers -- yet still somehow convey those directives to IE in a 'less offensive' manner. Am I still headed in the right direction? If so, could you (or anyone else interested in this topic) direct me to a site that not only gives such a hack, but also explains it? Thanks, in advance, for any insights you'd care to share! - Michael Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ 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] collapsing vertical margins
(definitely! I can create a bigger and more complex mess _with_ CSS, than anyone could do before CSS... :-) ) The humour helps! ; - ) Sometimes humor is all we can throw at weak and buggy browsers. The fact remains though: we can be much more creative with CSS than without it - even in IE/win. http://www.gunlaug.no/tos/alien/test_07_5080.html I've studied your code, and have saved it for future reference. Your comments show that you've used a number of specific hacks/workarounds (eg, the body's text-align: center for IE, the overflow: hidden used to [i think] subdue the 'hasLayout' in IE, etc). I'd like to find explanations of both the hacks and the problems they undo, so that I can understand the principles, rather than simply imitate the code. I agree 100%. Copying without understanding how things work, is a recipe for failure. The functionality of 'overflow: hidden' I use is described here... http://www.w3.org/TR/CSS21/visuren.html#block-formatting ... and an understanding of how 'Block formatting contexts' works in standard compliant browsers will help in understanding how IE's non-standard 'Layout' works. However, I'm new at all of this, and don't understand many of the references and terminology I encounter along the way (eg, http://www.satzansatz.de/cssd/onhavinglayout.html, which Alan so kindly provided). That's the only somewhat correct and complete article about IE's 'hasLayout' bug you can find today, but designed bugs like that are always hard to describe in simple terms. That's true even for one who have a clear understanding of a particular bug in a particular browser, and can use that knowledge forwards and backwards and full circle. I know how hard such simplification is, since I'm one of the authors behind that 'hasLayout' article. I've been studying Eric Meyer's CSS-Definitive Guide for three months now, but he doesn't even mention the hasLayout problem. (One would think that a detailed explanation of absolute positioning - which he furnishes - should include the rather important disclaimer that nothing else will work when using it in IE! Some tried-and-true hacks/workaround to employ so that one can actually use the absolute positioning he details would also seem fitting.) Haven't read the mentioned book (and probably never will), but I guess IE's Layout bug wasn't very well known/understood when Eric wrote it. Also: I don't think a disclaimer would be of much use, and it would have to be conditioned. IMO: the easiest workaround for problems with absolute positioning, is not to use A:P to lay out major parts of anything but very simple pages. Absolute positioning is inherently inflexible because A:P elements are taken out of the flow, thus A:P is best reserved for shuffling minor document-parts around once the main parts are under control with some other layout method. I still base most layouts on this method... http://www.alistapart.com/articles/negativemargins/ ...and add A:P and other methods on top of it when needed. Any suggestions as to where a beginner like me can find understandable explanations for the hacks and workarounds used for IE and the problems they address? Look for CSS support first... http://www.webdevout.net/browser-support-css?IE6=onIE7=onFX2=onOP9=onKN3_5=onSF2=onuas=CUSTOM ...so at least you can check what to expect across browser-land. IE6 and 7 are well documented. No such list can ever be complete though, because some weaknesses/bugs will only show up for certain source-code/CSS combinations. Next step should be to develop your own set of methods that you know will work in all major non-IE browsers, and not give in to IE's bugs and weaknesses. IE can almost always be beaten into submission once all other browsers are working well. People here on [css-d] can help you find the right workarounds for IE as you go along, and let you know what to do in the rare cases when IE can't be fixed by CSS alone. Thirdly: create lots of test pages - subject them to all options you can find in any browser you can lay your hands on - and break your own pages before letting any user (visitor) get a chance at breaking them. All web designs can be broken one way or another, but a good design should be able to take quite a bit without major failures. Such an exercise will also help when it comes to understanding how visitors _may_ use their browsers, and you should know more about all major browsers than most visitors do if you want to create somewhat robust and reliable designs for/in those browsers. regards Georg -- http://www.gunlaug.no __ 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] text-transform
SosCpdGMail wrote: Hello Brian Sorry, but I can't see if your question is how to retrieve uppercase text from database or apply pink/blue color to your selects. Rafael, Thanks, but I know how to do this and all the DB query behind it. :) The issue is that the functions I'm using to generate the selections are used elsewhere, and need the caps, so I'm trying to just style them appropriately on this one element before I go into the functions and make a case conditional for what page it's being called from. My question was how to make it DISPLAY with CSS, if possible, in CamelCase. __ 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] font problem?
Good afternoon list, I just encountered a strange phenomena (at least to me): resizing the text in Fireworks and Moz, breaks up my navigation (around increasing to 200% and up), while in Opera it holds up to 1000% and in IE up to extra big. I tried setting the general font rule to 100% but that didn't solve it, tried setting the width of the #navcontainer to 9.5 ems but to no avail... What am i overlooking here? http://www.dzinelabs.com/projects/MPT/Pages/index.php http://www.dzinelabs.com/projects/MPT/Styles/MP.css -- Best regards, Luc Powered by The Bat! version 3.99.3 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. My mother used to say: the older you get, the better you get -unless you're a banana. - Rose, The Golden Girls. __ 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] font problem?
Luc wrote: Good afternoon list, I just encountered a strange phenomena (at least to me): resizing the text in Fireworks and Moz, breaks up my navigation (around increasing to 200% and up), while in Opera it holds up to 1000% and in IE up to extra big. I tried setting the general font rule to 100% but that didn't solve it, tried setting the width of the #navcontainer to 9.5 ems but to no avail... What am i overlooking here? http://www.dzinelabs.com/projects/MPT/Pages/index.php http://www.dzinelabs.com/projects/MPT/Styles/MP.css I have no idea what you are overlooking. Except maybe Opera handles stuff different. And something movable (type) on top of something static (an image) is problematic (except maybe in Opera, sometimes). Did not try it, but... try re-setting to 100% on the body, reducing the font-size on the nav (and repeating the image on the nav y-axis)? body { font : 100% Verdana, Geneva, Arial, Helvetica, sans-serif; --- :: re-set from 76% to 100% ... } #navcontainer li { font-size: 80%; ---:: declare background: url(../Images/navbackground.gif) repeat-y 0 0.1em; ---:: declare repeat-y instead of no-repeat ... } Best, ~dL -- http://chelseacreekstudio.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] font problem?
Good afternoon list, I just encountered a strange phenomena (at least to me): resizing the text in Fireworks and Moz, breaks up my navigation (around increasing to 200% and up), while in Opera it holds up to 1000% and in IE up to extra big. I tried setting the general font rule to 100% but that didn't solve it, tried setting the width of the #navcontainer to 9.5 ems but to no avail... What am i overlooking here? http://www.dzinelabs.com/projects/MPT/Pages/index.php http://www.dzinelabs.com/projects/MPT/Styles/MP.css -- Best regards, Luc Powered by The Bat! version 3.99.3 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. My mother used to say: the older you get, the better you get -unless you're a banana. - Rose, The Golden Girls. __ 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] Same code different results
I have a container setup for placing orders, as seen in the following link. http://precisemessenger.com/private/orderbox.html Notice line 1. has both radio buttons on the same line. This is what I am looking for. Unfortunately when I implement this container into my page, extra space is added and the radio buttons are on two lines. Here is a link to see what I mean http://precisemessenger.com/private/placeorder.html Please help me find what I am doing wrong. Thank you, Kevin __ 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] Same code different results
Text-align and margin-left are different for #orderhere. Is this intentional? David -=- From: jana coyle Sent: Mon 7/30/2007 10:40 PM To: css-d@lists.css-discuss.org Subject: [css-d] Same code different results I have a container setup for placing orders, as seen in the following link. http://precisemessenger.com/private/orderbox.html Notice line 1. has both radio buttons on the same line. This is what I am looking for. Unfortunately when I implement this container into my page, extra space is added and the radio buttons are on two lines. Here is a link to see what I mean http://precisemessenger.com/private/placeorder.html Please help me find what I am doing wrong. Thank you, Kevin __ 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-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] font problem?
On Jul 31, 2007, at 10:19 AM, Luc wrote: resizing the text in Fireworks and Moz, breaks up my navigation (around increasing to 200% and up), while in Opera it holds up to 1000% and in IE up to extra big. I tried setting the general font rule to 100% but that didn't solve it, tried setting the width of the #navcontainer to 9.5 ems but to no avail... What am i overlooking here? http://www.dzinelabs.com/projects/MPT/Pages/index.php In what sense is it breaking ? I didn't see any difference between WebKit and Gecko. You have a fixed width container (pixels), the side navigation column is also a fixed-width (pixels) box. When you zoom in, the box change size in Gecko and Webkit. Opera uses a *page* zoom and scales everything, whereas Gecko and Safari have a *text* zoom, and only increase/decrease the size of the text. If you set the width of your boxes in em, then they'll scale along with the text. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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/