Re: [css-d] IE6 and down issue
Donna Jones wrote: http://www.westendwebs.net/pulse-ie-issue/picks.html Adding/changing to... #content {margin: 0; float: right;} #insidewrapper {width: 100%; overflow: hidden;} * html #insidewrapper {overflow: visible;} ...will extend pixel-perfection into the IE6 down world. 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] Nested @import in IE
On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote: Hi all, Has anyone ever experienced a problem with having style applied in IE when '@import's have been nested 4 levels deep? I've just tried to do this, and can't view the styles which are at the deepest level of nesting in IE6. Firefox works fine. I tried clearing my cache, but to no avail. Thanks (I hope!) Zoe Yes, it is a problem~ I have a test page for it, but havent found a way around it, other than of course importing what I can on the same level. http://aenonfiredesign.com/sandbox/importlevels/ -clint -- iron sharpens iron __ 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] Nested @import in IE
cFA wrote: On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote: Hi all, Has anyone ever experienced a problem with having style applied in IE when '@import's have been nested 4 levels deep? I've just tried to do this, and can't view the styles which are at the deepest level of nesting in IE6. Firefox works fine. I tried clearing my cache, but to no avail. Thanks (I hope!) Zoe Yes, it is a problem~ I have a test page for it, but havent found a way around it, other than of course importing what I can on the same level. http://aenonfiredesign.com/sandbox/importlevels/ -clint With this testcase, IE7 shows the same problem. Plus a pretty long FOUC. - added it to the wiki. Ingo -- http://www.satzansatz.de/css.html __ 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] Comments on a summary of what happens in Quirks Mode?
I have tried to summarize the effects of Quirks Mode, since the summaries and notes that I found were rather limited. Would someone like to comment on what's missing? What happens in Quirks Mode? http://www.cs.tut.fi/~jkorpela/quirks-mode.html -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ 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] research on styling links
Hi, In my experience, and from advice on this list, I have typically found that, with complicated designs where you have several types of link design designs (background images and colors, borders, etc), including navigational links with complex dropdown hierarchies, that your best bet is to define all the properties of the link pseudo class -- in order to get it to work correctly with IE 6. Thus, for every section in my stylesheet where I style the link, I use a:link, a:visited, a:hover, a:active if I want those links to behave differently in each case. Even if my a:link and a:visited are the same, I define them. And, I define them in that order, the old LoVe HA mnemonic. I'm doing research on a problem we're having with links showing up in different font sizes. The CSS someone else wrote for the links relies either on the font size defined in the selector or on the font-size defined by a. E.g., selector a {font-size: 12px;}. From my experience, the erratic font size, happening in IE 6 only, is because the links for each selector haven't been defined as above. The visited links are displaying in smaller font size, inheriting the font size of the selector containing them. Sometimes this goes away, only to reappear five minutes later. I haven't had time to fully experiment with the behavior and nail it down. I've found the typical resources on the problem with IE and some places where the LoVeHA mnemonic is mentioned. (list of links below). Are there any other good resources for documenting this in the company WIKI? Of course, on that note, I could be all washed up, so please correct me if I'm wrong about the above. Most of the material I've found is dated (in Internet time). Also, I did a search on the list archives and the wiki but struck out or got so many false positives that I gave up. thanks for your help. Links: http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes http://antone.geckotribe.com/alpha-gecko/2005/01/12/how-to-avoid-using-classes-in-too-many-places/ http://class.thefactoryfactory.com/docs/interm_css_selectors.html http://www.ericmeyeroncss.com/bonus/proj04-excerpt.html http://locusoptimus.com/css-trickery/ie7-hover-bug.php http://css-discuss.incutio.com/?page=IE7 http://carpe.ambiprospect.com/buttons/links.htm Kelley (who apologizes for odd typos. It's early and I'm typing in a hotel room that's dark while my partner sleeps. :) __ 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] How to remove usemap link borders with css ?
Hello I need to do a quick fix on a tables based site before I move it to css format and unfortunately when I did that there are link borders on several of the table cells that have usemaps links in them. I tried to add link styles to eliminate them but the borders still appear in firefox and internet explorer. However, In Safari and camino the site shows up correctly. Is there another style class or property tag that i should be using to make the image map borders disappear ? Here is the site page http://cozyandbright.com/index7.html and here are the styles I am trying to use to eliminate the borders in firefox style type=text/css !-- a:link img { text-decoration: none; border:0; border:none; } a:visited img { color: #3366FF; border:0; border:none; } a:hover img{ text-decoration: none; border:0; border:none; } .style1 {font-size: 9px} -- /style Thank you, Suisun __ 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] Semi-transparent PNGs as background images in IE6 - documentation wanted
Hello, Yesterday I talked to a web developer who passed me a technique for using semi-transparent PNGs as background images even in IE6 and lower. The technique works, up to a point. See my test page at http://www.quirksmode.org/css/png/png.html . I already had a private conversation with someone who knows this technique and drew my attention to a few bugs (can't use CSS height; links/form fields may become unclickable unless they have a z-index). Before continuing my investigation, though, I'd like to know whether this technique has already been described. Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Despite several Google searches I didn't find a real explanation/description, although several articles described several aspects of this solution. If there turns out to be no full description (including bugs) available, I'll have to write my own. Since I don't have too much time right now, I'm hoping that someone can point me to a description so that I can continue my real work. Thanks, -- --- ppk, freelance web developer http://www.quirksmode.org/ -- __ 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] Please ignore: How to remove usemap link borders with css ?
please ignore my previous message. I have figured out what was happening with the image borders. just needed to add border=0 Thank you in advance, Suisun On Apr 13, 2007, at 7:09 AM, Susan T (cocomomi) wrote: Hello I need to do a quick fix on a tables based site before I move it to css format and unfortunately when I did that there are link borders on several of the table cells that have usemaps links in them. I tried to add link styles to eliminate them but the borders still appear in firefox and internet explorer. However, In Safari and camino the site shows up correctly. Is there another style class or property tag that i should be using to make the image map borders disappear ? Here is the site page http://cozyandbright.com/index7.html and here are the styles I am trying to use to eliminate the borders in firefox style type=text/css !-- a:link img { text-decoration: none; border:0; border:none; } a:visited img { color: #3366FF; border:0; border:none; } a:hover img{ text-decoration: none; border:0; border:none; } .style1 {font-size: 9px} -- /style Thank you, Suisun __ 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] IE6 and down issue
http://www.westendwebs.net/pulse-ie-issue/picks.html Adding/changing to... #content {margin: 0; float: right;} #insidewrapper {width: 100%; overflow: hidden;} * html #insidewrapper {overflow: visible;} ...will extend pixel-perfection into the IE6 down world. Georg: Thank you! My inclination is to fall at your feet and worship you, good thing you're on the other side of the world. and truly, i would contain myself if i, perchance, did meet you in person, but please know my gratitude and admiration is wide and deep. (now that's not over the top is it?) Cheers Donna -- Donna Jones Portland, Maine 207 772 0266 www.westendwebs.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] Please ignore: How to remove usemap link borders with css ?
On 13 Apr 2007, at 12:44, Susan T (cocomomi) wrote: please ignore my previous message. I have figured out what was happening with the image borders. just needed to add border=0 This CSS rule should do the same thing: img {border:0;} And takes up far less file size than adding that attribute to all images. Seems to work in FF 2.0/Mac as well. Your previous selectors aren't working because technically speaking the image maps aren't links, so: a img {} doesn't select the right images. __ 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] Semi-transparent PNGs as background images in IE6 - documentation wanted
Peter! You'll probably already know this page: http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp The element to which this filter shall be applied must have layout.[1] The filter will not create an background-image. The filter image lies behind the background, so you have to set the background-color to transparent and disable the original background-image too. Ingo has also made some affords to document this property: http://www.satzansatz.de/cssd/tmp/alphatransparency.html Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? There is a htc for img-Tags. http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html This may be of interest too: http://www.pi-phi.de/t3v4/55.html (german) But I don't know an unobstrusive JS solution that automagically corrects the behaviour of IE =6. Maybe Dean Edwards has something like that in his IE7 scripts? Ingo's doc is probably the most complete. I hope you'll have some time to extend that ;-) regards, Martin [1] http://www.satzansatz.de/cssd/onhavinglayoutrev07-20061019.html on Friday, April 13, 2007 at 13:15 Peter-Paul Koch wrote: Hello, Yesterday I talked to a web developer who passed me a technique for using semi-transparent PNGs as background images even in IE6 and lower. The technique works, up to a point. See my test page at http://www.quirksmode.org/css/png/png.html . I already had a private conversation with someone who knows this technique and drew my attention to a few bugs (can't use CSS height; links/form fields may become unclickable unless they have a z-index). Before continuing my investigation, though, I'd like to know whether this technique has already been described. Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Despite several Google searches I didn't find a real explanation/description, although several articles described several aspects of this solution. If there turns out to be no full description (including bugs) available, I'll have to write my own. Since I don't have too much time right now, I'm hoping that someone can point me to a description so that I can continue my real work. 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] Semi-transparent PNGs as background images in IE6 - documentation wanted
Peter-Paul Koch wrote: Hello, Yesterday I talked to a web developer who passed me a technique for using semi-transparent PNGs as background images even in IE6 and lower. The technique works, up to a point. See my test page at http://www.quirksmode.org/css/png/png.html . I already had a private conversation with someone who knows this technique and drew my attention to a few bugs (can't use CSS height; links/form fields may become unclickable unless they have a z-index). But when the box with the filter is positioned absolutely or relatively, the fix is more complicated [1]. Before continuing my investigation, though, I'd like to know whether this technique has already been described. Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Maybe [2]. It would be nice to have a script that allows for tiling backgrounds, as suggested by Paul [3]. You most probably have already looked into the IE7 code by Dean [4], this links to another behavior [5] Ingo [1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html [2] http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ [3] http://archivist.incutio.com/viewlist/css-discuss/86620 [4] http://dean.edwards.name/IE7/notes/#PNG [5] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
Does anybody have any ideas what is happening here? This is really driving me crazy trying to figure this out as it does not seem to fit with any of the usual IE 'features'. Thanks -- Jeff From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Thursday, April 12, 2007 9:57 AM To: [EMAIL PROTECTED] Subject: IE 6 Float Issue Well, IE 6 is at it again for me. I have a layout from a client that is pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing issues. I have broken it down to the most basic issue which is one block being floated to the left and the main column having a left margin equal to the floated block width plus one, which should cause there to be a 1px gap between the two. The following code works just fine in IE 7 and FireFox, but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall apart. Can anybody offer any suggestions here? style type=text/css #block1 { float: left; height: 175px; width: 179px; } #block2 { height: 175px; margin-left: 180px; } /style div id=block1 style=background-color: #00c;Block 1/div div id=block2 style=background-color: #00c;Block 2/div Thanks -- Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
Could be the IE double-margin bug? Try adding display:inline to the floated element... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
No, I tried that one earlier and did it again just to make sure. Even with the 'display: inline' added to the floated box, the margin in between the two boxes is still 4px instead of 1px. Thanks -- Jeff From: Dave Goodchild [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 8:40 AM To: Jeff Chastain Cc: [EMAIL PROTECTED] Subject: Re: [css-d] IE 6 Float Issue Could be the IE double-margin bug? Try adding display:inline to the floated element... __ 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] menu troubles
I have a problem that I've run into before and my company had to outsource it to a CSS Guru (Sandra Clark). While I truly appreciated her help the last time, I want to work through this myself. I have a page with a navigation menu across the top with a single level dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is that the dropdown from the main navigation menu appears under the side navigation menu. In firefox it works correctly. This project is very time-sensitive so I'm trying to work through this as quickly as possible. The page url is http://cfas2.cfwebtools.com/index.cfm?objectid=E6D20202-9027-F64A-799622C32F C8C158. I'm fairly decent with CSS but when it comes to more advanced issues like this I'm still a noob. Can anyone help me out? Thanks! PS. I didn't post any code because there's a lot of it. If you need any of it, please let me know and I'll supply it. _ Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 __ 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] menu troubles
I don't see a left sidebarIE7 and Firefox __ 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] menu troubles
Jake, on Friday, April 13, 2007 at 16:25 Jake Churchill wrote: I have a page with a navigation menu across the top with a single level dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is that the dropdown from the main navigation menu appears under the side navigation menu. In firefox it works correctly. This project is very time-sensitive so I'm trying to work through this as quickly as possible. Try to set a z-index on #header. I can't test it now, but it'll probably work. More on z-index an IE here: http://www.aplus.co.yu/lab/z-pos/ regards Martin __ 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] FIXED: menu troubles
I believe I have this fixed. Thank you for the reference to http://www.aplus.co.yu/lab/z-pos/. I relatively positioned the #header and provided a z-index and it seems to work now. _ Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -Original Message- From: Martin Heiden [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 9:43 AM To: Jake Churchill; [EMAIL PROTECTED] Subject: Re: [css-d] menu troubles Jake, on Friday, April 13, 2007 at 16:25 Jake Churchill wrote: I have a page with a navigation menu across the top with a single level dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is that the dropdown from the main navigation menu appears under the side navigation menu. In firefox it works correctly. This project is very time-sensitive so I'm trying to work through this as quickly as possible. Try to set a z-index on #header. I can't test it now, but it'll probably work. More on z-index an IE here: http://www.aplus.co.yu/lab/z-pos/ regards Martin __ 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] Nested @import in IE
Thanks guys! It's good to know that it's not me, but IE who has the problem. Cheers, Zoe -Original Message- From: Ingo Chao [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 3:34 AM To: cFA Cc: Zoe ASHER; [EMAIL PROTECTED] Subject: Re: [css-d] Nested @import in IE cFA wrote: On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote: Hi all, Has anyone ever experienced a problem with having style applied in IE when '@import's have been nested 4 levels deep? I've just tried to do this, and can't view the styles which are at the deepest level of nesting in IE6. Firefox works fine. I tried clearing my cache, but to no avail. Thanks (I hope!) Zoe Yes, it is a problem~ I have a test page for it, but havent found a way around it, other than of course importing what I can on the same level. http://aenonfiredesign.com/sandbox/importlevels/ -clint With this testcase, IE7 shows the same problem. Plus a pretty long FOUC. - added it to the wiki. Ingo -- http://www.satzansatz.de/css.html __ 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] research on styling links
Kelley Greenman wrote: I'm doing research on a problem we're having with links showing up in different font sizes. The CSS someone else wrote for the links relies either on the font size defined in the selector or on the font-size defined by a. E.g., selector a {font-size: 12px;}. From my experience, the erratic font size, happening in IE 6 only, is because the links for each selector haven't been defined as above. The visited links are displaying in smaller font size, inheriting the font size of the selector containing them. Sometimes this goes away, only to reappear five minutes later. I haven't had time to fully experiment with the behavior and nail it down. I've found the typical resources on the problem with IE and some places where the LoVeHA mnemonic is mentioned. (list of links below). Are there any other good resources for documenting this in the company WIKI? Of course, on that note, I could be all washed up, so please correct me if I'm wrong about the above. Well, we have no way of correcting you without seeing the page. :-) You can correct yourself, however. Does your proposed fix work? If so, you're not all washed up. If not, then you are. ;-) FWIW, I've never seen the need to specify each link pseudo-class separately. Of course, I've never seen the need to specify font sizes on the a element either -- the body and heading elements get font sizes, and occasionally a footer or sidebar div, but that's it. I've found that declaring font sizes on paragraphs, links, list items, etc, just causes undue complication and problems. Post a URL to your page and we can give you some help. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Any CSS GURUs?
I'm looking to hire an insanely smart css wizard who can hack theri way into doing almost anything with css. __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote: Does anybody have any ideas what is happening here? This is really driving me crazy trying to figure this out as it does not seem to fit with any of the usual IE 'features'. Thanks -- Jeff From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Thursday, April 12, 2007 9:57 AM To: [EMAIL PROTECTED] Subject: IE 6 Float Issue Well, IE 6 is at it again for me. I have a layout from a client that is pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing issues. I have broken it down to the most basic issue which is one block being floated to the left and the main column having a left margin equal to the floated block width plus one, which should cause there to be a 1px gap between the two. The following code works just fine in IE 7 and FireFox, but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall apart. Can anybody offer any suggestions here? style type=text/css #block1 { float: left; height: 175px; width: 179px; } #block2 { height: 175px; margin-left: 180px; } /style div id=block1 style=background-color: #00c;Block 1/div div id=block2 style=background-color: #00c;Block 2/div Thanks -- Jeff what about just floating the second block right instead of having the margin. unless i am missing the point on this? Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
Well, what I have ended up doing is floating everything left. The example here is part of the page that is just 2 columns (the header), but below that is a three column layout. If I float everything left, giving all blocks a defined width, everything appears to work. As this is a fixed width layout, I can go with defining widths for each block. Not the cleanest thing in the world, but it appears to be working. Thanks -- Jeff From: jeffrey morin [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 11:08 AM To: Jeff Chastain Cc: [EMAIL PROTECTED] Subject: Re: [css-d] IE 6 Float Issue On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote: Does anybody have any ideas what is happening here? This is really driving me crazy trying to figure this out as it does not seem to fit with any of the usual IE 'features'. Thanks -- Jeff From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Thursday, April 12, 2007 9:57 AM To: [EMAIL PROTECTED] Subject: IE 6 Float Issue Well, IE 6 is at it again for me. I have a layout from a client that is pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing issues. I have broken it down to the most basic issue which is one block being floated to the left and the main column having a left margin equal to the floated block width plus one, which should cause there to be a 1px gap between the two. The following code works just fine in IE 7 and FireFox, but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall apart. Can anybody offer any suggestions here? style type=text/css #block1 { float: left; height: 175px; width: 179px; } #block2 { height: 175px; margin-left: 180px; } /style div id=block1 style=background-color: #00c;Block 1/div div id=block2 style=background-color: #00c;Block 2/div Thanks -- Jeff what about just floating the second block right instead of having the margin. unless i am missing the point on this? Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
Jeff Chastain wrote: No, I tried that one earlier and did it again just to make sure. Even with the 'display: inline' added to the floated box, the margin in between the two boxes is still 4px instead of 1px. Sounds like you have moved the '3px jog bug'[1] onto a non-floated container, in which case you'll have to subtract 3px from a side-margin - in IE6 (and below) only. regards Georg [1]http://www.positioniseverything.net/explorer/threepxtest.html -- 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] Any CSS GURUs?
Morning Gigaboy20 You wrote I'm looking to hire an insanely smart css wizard who can hack theri way into doing almost anything with css. You might want to review the list policies [1], especially the section that says: No solicitations of employment or requests for applications. There are job boards, Web sites, mailing lists, and other venues for helping stimulate your local economy. Check them out. A gentle reminder to all [1] http://www.css-discuss.org/policies.html Jim Nannery www.beebar.net __ 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] Nested @import in IE
Ingo Chao wrote: cFA wrote: On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote: Has anyone ever experienced a problem with having style applied in IE when '@import's have been nested 4 levels deep? I've just tried to do this, and can't view the styles which are at the deepest level of nesting in IE6. Firefox works fine. Yes, it is a problem~ I have a test page for it, but havent found a way around it, other than of course importing what I can on the same level. http://aenonfiredesign.com/sandbox/importlevels/ With this testcase, IE7 shows the same problem. Plus a pretty long FOUC. I didn't see any FOUC, but I can confirm that the bug still exists in IE 7. It would be helpful, however, if we weren't comparing black to gray, but, say, black to yellow, or something more obvious. Otherwise, a very nice testcase, Clint. a different Zoe (not used to that...) -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
Jeff Chastain wrote: Well, what I have ended up doing is floating everything left. The example here is part of the page that is just 2 columns (the header), but below that is a three column layout. If I float everything left, giving all blocks a defined width, everything appears to work. As this is a fixed width layout, I can go with defining widths for each block. Not the cleanest thing in the world, but it appears to be working. Why do you think isn't this clean? Floating all blocks is a perfectly acceptable way of making columnar layouts, and no more messy than floating one block and assigning another one a side margin. As you've found, floating all blocks is usually the most reliable way, not just because you avoid the 3-Pixel Bug and other bugs, but also because you set up new block formatting contexts for each column, which is usually what is desired. If this works for your layout, great -- use it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Nested @import in IE
I didn't see any FOUC, but I can confirm that the bug still exists in IE 7. It would be helpful, however, if we weren't comparing black to gray, but, say, black to yellow, or something more obvious. Otherwise, a very nice testcase, Clint. a different Zoe (not used to that...) -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu Good suggestion Zoe, its now orange :) -clint -- iron sharpens iron __ 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] TOC for Image Gallery using Ordered List CSS
Afternoon, Have been playing around with creating a TOC for an image gallery by placing the anchors and h2-headlines inside an ordered list... as in: (ol (li (h2 (a. Used CSS to place the thumbnail images into the background of the individual list items -- and again to place a transparent png file in the background of the anchors to create a rollover highlight effect. http://richmondesign.com/fsm_portfolio/index.php http://richmondesign.com/_stylesheets/base.css What I would really like to do is to take the text inside the anchor and force it to drop below the background image (with appropriate padding), but it doesn't look like there is a way to 'grab onto' just the text and do that without adverse side effects. Is this possible? I suppose I could put the transparent png into the xhtml code inside the link (as opposed to background via CSS) and push the text down below, but I prefer the simplicity of referencing the transparent png just once in the style sheet. Something of a minor tangent... is it possible to construct a transparent png that would de-saturate the image below to create a BW effect? Thanks for all your help! -iE . ibn Ezra mailto: [EMAIL PROTECTED] . __ 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] TOC for Image Gallery using Ordered List CSS
Well, I think you can put the text itself inside a span tag set to display:block and give it padding on top to force it below the images. Teressa Graphic Web Designer Opactive *-Original Message- *From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On *Behalf Of ibn Ezra *Sent: Friday, April 13, 2007 12:01 PM *To: CSS Discussion Group *Subject: [css-d] TOC for Image Gallery using Ordered List CSS * *Afternoon, *Have been playing around with creating a TOC for an image gallery by *placing the anchors and h2-headlines inside an ordered list... as in: *(ol (li (h2 (a. Used CSS to place the thumbnail images into the *background of the individual list items -- and again to place a *transparent png file in the background of the anchors to create a *rollover highlight effect. * __ 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] TOC for Image Gallery using Ordered List CSS
Thanks... that moves the text down nicely. Funny that your solution never crossed of my mind! The only drawback is that it creates a large (invisible) link area beneath each image which could potentially compete with content in a different layout (a second row of gallery images for example). Here's the result: http://richmondesign.com/fsm_portfolio/index2.php Thanks again, -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 15:32 PM, nat parker wrote: ibn Ezra wrote: What I would really like to do is to take the text inside the anchor and force it to drop below the background image (with appropriate padding), but it doesn't look like there is a way to 'grab onto' just the text and do that without adverse side effects. Is this possible? If I understand what you are trying to do, you could just add padding-top to: #content #portfolios li a { display: block; height: 91px; width: 147px; background: transparent url(../_images/vellum.png) repeat; padding-top: 95px; } nat __ 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] TOC for Image Gallery using Ordered List CSS
ibn Ezra wrote: Thanks... that moves the text down nicely. Funny that your solution never crossed of my mind! The only drawback is that it creates a large (invisible) link area beneath each image which could potentially compete with content in a different layout (a second row of gallery images for example). Try removing the height from #content #portfolios li a. This seems to work under Firebug in FF. I'm not sure what this will do to IE. IE has the same large area under the images, so hopefully removing the height won't cause problems. Lori Here's the result: http://richmondesign.com/fsm_portfolio/index2.php Thanks again, -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 15:32 PM, nat parker wrote: ibn Ezra wrote: What I would really like to do is to take the text inside the anchor and force it to drop below the background image (with appropriate padding), but it doesn't look like there is a way to 'grab onto' just the text and do that without adverse side effects. Is this possible? If I understand what you are trying to do, you could just add padding-top to: #content #portfolios li a { display: block; height: 91px; width: 147px; background: transparent url(../_images/vellum.png) repeat; padding-top: 95px; } nat __ 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] Arguing with IE6
Thank you so much for the help. The nav and the body all work fine now. I'm going to have to play some with the hover thing though. But again, thank you very very much. :-) Kelley On 4/12/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Kelley Minars wrote: Hello everyone. This is my first post, so I hope it goes alright. Just fine... welcome. http://tinyurl.com/yusyz6 which looks perfectly fine in Firefox, Opera, Safari, and IE7. However, when you look at it in IE6 it kills almost the entire navigation and messes up the middle content and the footer. Yes, IE6 has a few bugs... :-) I'm just not sure where to start. Probably easiest to start by ditching the entire IE specific stylesheet, as it's mostly a repetition of the regular one. IE is weak and buggy, but it'll pick up what it can make any use of from the regular stylesheet, and will only need a few corrections here and there. #menu h2 a {position: relative;} ...will make the main part of the menu appear right. IE6 can't hover anything but links, so you'll need something like the 'whatever:hover' to make IE6 reveal those drop-downs. http://www.xs4all.nl/~peterned/csshover.html * html #contentcenter {overflow-x: hidden;} ...will keep IE6' 'auto-expansion' bug under control. body {margin: 0;} ...is necessary for correct line-up. That's the basic fixes for IE6 - once the IE specific stylesheet is gone. 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/
[css-d] Problems with IE 6 7
Posted this once and it bounced. Trying again. I have been asked to look over this site and offer some suggestions regarding its problems. Along with my own suggestions, I thought I would consult the CSS Brain Trust to see what wisdom you can offer. Your input is greatly appreciated. Main index - http://www.cvm.uiuc.edu/cvm/ Index style sheet - http://www.cvm.uiuc.edu/cvm/styles/main.css Horizontal navigation - http://www.cvm.uiuc.edu/cvm/styles/menu.css Here is a synopsis of the site owner's view of the issues: The site is still under construction - there is quite a bit of tweaking to do. The major problems we are having in IE7 is that the feature box - (right hand side image and lists of news) jumps as the browser window is resized. This doesn't happen in Firefox. Also, the U of I College of Vet Med banner wants to jump to the left hand side of the window when the browser is resized. Finally, in IE7, in the sub-menu level (of the top horizontal navigation), some of the secondary text links wrap instead of staying in a straight line. They did not mention that the site falls apart in IE6. -Tim __ 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/ -- * Tim Offenstein - Web Specialist - CITES - AHS - 244-2700 * A cheerful heart is a good medicine Proverbs 17:22 NRSV __ 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] TOC for Image Gallery using Ordered List CSS
Very nice... thanks! So much to learn; never realised that span tags could be enclosed within the anchor tags. Could be very handy for quite a few future experiments! domo arigato! -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 16:09 PM, Teressa Terry wrote: Well, I think you can put the text itself inside a span tag set to display:block and give it padding on top to force it below the images. Teressa Graphic Web Designer Opactive __ 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] 3 column displays incorrectly in IE6
Hi, The page below displays incorrectly in IE6. I've been trying to get the middle column to line up horizontally with the thumbnail images in the left column. You can see how it should look in Firefox or in FF on a Mac for that matter. Any help would be greatly appreciated. Page: http://tang.skidmore.edu/oex/contexts/authors/bach.htm CSS: http://tang.skidmore.edu/oex/contexts/ie.css Thanks, Alp1776 __ 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] TOC for Image Gallery using Ordered List CSS
Works great with the latest versions of IE, Firefox, Safari and Opera and without additional mark-up! Don't have IE 6 handy to see what happens (already know the transparent png rollover won't work). http://richmondesign.com/fsm_portfolio/index4.php toda raba! -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 16:21 PM, Lori Lay wrote: ibn Ezra wrote: Thanks... that moves the text down nicely. Funny that your solution never crossed of my mind! The only drawback is that it creates a large (invisible) link area beneath each image which could potentially compete with content in a different layout (a second row of gallery images for example). Try removing the height from #content #portfolios li a. This seems to work under Firebug in FF. I'm not sure what this will do to IE. IE has the same large area under the images, so hopefully removing the height won't cause problems. Lori Here's the result: http://richmondesign.com/fsm_portfolio/index2.php Thanks again, -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 15:32 PM, nat parker wrote: ibn Ezra wrote: What I would really like to do is to take the text inside the anchor and force it to drop below the background image (with appropriate padding), but it doesn't look like there is a way to 'grab onto' just the text and do that without adverse side effects. Is this possible? If I understand what you are trying to do, you could just add padding-top to: #content #portfolios li a { display: block; height: 91px; width: 147px; background: transparent url(../_images/vellum.png) repeat; padding-top: 95px; } nat _ _ 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/ __ 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] TOC for Image Gallery using Ordered List CSS
ibn Ezra wrote: Works great with the latest versions of IE, Firefox, Safari and Opera and without additional mark-up! Don't have IE 6 handy to see what happens (already know the transparent png rollover won't work). http://richmondesign.com/fsm_portfolio/index4.php toda raba! -iE . ibn Ezra mailto: [EMAIL PROTECTED] . Looks ok in IE 6 too. The images look like they do in FF when you hover over them, which I think is what you expected. The only problem is with the main title. In IE the PNG isn't working so the title looks jagged. You should be able to use browsershots to see what it looks like in IE 6. http://browsershots.org/ Lori PS What does toda raba mean? I know what domo arigato means, but that's the extent of my Japanese :-) On Apr 13, 2007, at 16:21 PM, Lori Lay wrote: ibn Ezra wrote: Thanks... that moves the text down nicely. Funny that your solution never crossed of my mind! The only drawback is that it creates a large (invisible) link area beneath each image which could potentially compete with content in a different layout (a second row of gallery images for example). Try removing the height from #content #portfolios li a. This seems to work under Firebug in FF. I'm not sure what this will do to IE. IE has the same large area under the images, so hopefully removing the height won't cause problems. Lori Here's the result: http://richmondesign.com/fsm_portfolio/index2.php Thanks again, -iE . ibn Ezra mailto: [EMAIL PROTECTED] . On Apr 13, 2007, at 15:32 PM, nat parker wrote: ibn Ezra wrote: What I would really like to do is to take the text inside the anchor and force it to drop below the background image (with appropriate padding), but it doesn't look like there is a way to 'grab onto' just the text and do that without adverse side effects. Is this possible? If I understand what you are trying to do, you could just add padding-top to: #content #portfolios li a { display: block; height: 91px; width: 147px; background: transparent url(../_images/vellum.png) repeat; padding-top: 95px; } nat __ 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/ __ 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] Comments on a summary of what happens in Quirks Mode?
Jukka K. Korpela wrote: I have tried to summarize the effects of Quirks Mode, since the summaries and notes that I found were rather limited. Would someone like to comment on what's missing? What happens in Quirks Mode? http://www.cs.tut.fi/~jkorpela/quirks-mode.html Speaking of IE7, and according to Microsoft [1] there is a long list of bug fixing and new features only available in standards mode. Nothing outside the things you already mentioned, but you could add something more, like support for child selectors, correct support for !important, ... In theory they wanted IE7 in quirks mode to behave exactly as IE6 in quirks mode (including /all/ bugs), to avoid any maintenance problems for quirks mode pages. This is almost true, even if I've found small discrepancies (fixes that have slipped through in quirks mode, at least partially.) Two small comments on your page: 1) About 'Vertical alignment of images', I believe you should add: if they are the only content of the enclosing block, since in presence of text the alignment is always 'baseline'. 2) About 'Default horizontal padding for a floated image', I believe it is 3px not 2px. Bruno [1] http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx __ 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] Stop me before I add content!! - A browser check, an advice check - General Testing
Hi all. http://www.3pointdesign.com/ http://www.3pointdesign.com/styles/one.css This is eventually going to be the home of my new site. After months of redesigning and changing my mind I have got something that I am happy with. Before I start adding too much content, could people please give me as much feedback as possible with regards to browser testing, things to be aware of etc. Kind regards, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 __ 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] Checking your proposed site
On 13 Apr 2007, at 23:44, Jim Chaffin wrote: First the pros: 1. Interesting method for drop down menus! Enlarging text size doesn't destroy them! I got this system from Project 7 having spent ages learning lots of different techniques. Because someone else has written the css a lot of trial and error still goes into it to customize. 2. Like the subtle colors! Thanks. - I may have just destroyed that with the flash animation so far (going to slow it down - don't worry) http://www.3pointdesign.com/ Now the 'Cons': 1. I think margin values in #wrapper {width: 800px; height: 600px; margin: 10px auto; are causing my horizontal scrolling issues when the window is set to 800 x 600. What are the scrolling issues like? Can you recommend anything to fix this? I thought that these margin properties were standard ways of centering a page. Maybe I could add padding to the body, but I have not seen that before - and then all descendents will get messed up unless I specifically tell them not to. 2. FF ( v. 2.0.0.2, Mac ) doesn't quite line up the rounded corner blocks with their shaded 'brothers' to their right. Seems each row gets further out of alignment. Yeh, they're not aligned properly in Safari either. I might look into this but I wasn't initially intending to have the containers on the left to be a fixed size. I think for visual sense that I should now - so my guess is probably something to with borders or class values. Question: Is there an advantage of using javascript to load some CSS? I only saw your new styles because I specifically allow current-domain scripts, otherwise, all other js is blocked. The reason is because the menu is from project 7. - If only I could write css like that! LOL. I am concerned though with people having java switched off, but having researched a little the percentages were quite high in favor of them being on. Also I am mucking around (a tiny bit) with 'scriptaculous' -it probably won't lead to anything but that uses java too. Personal: Not fond of Flash, but to each his own, at least yours is not wasting too much vertical space! ;-) However, after allowing it to display, I'm wondering if your planning on some animation. If not you could use a simple jpeg/gif/png... The beginning of the animation is already in place i.e. colour changes. I am not a keen fan of flash either, believe it or not, but for my market, it seems to be quite generic to have some in there. I am so pleased that you recognised that it is not complete overkill! Hope you 'content' is as good as your CSS! ;-) LOL. I am sure you are referring to that of project 7 - but i'll take the compliment anyway! Yeh, check back in a week's time and I should have quite a lot more up there. Thanks Jim, Kind regards, Chris J. Chaffin -- I planted some birdseed. A bird came up. Now I don't know what to feed it. __ 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] Stop me before I add content!! - A browser check, an advice check - General Testing
In IE7 Firefox, the first row of boxes lines up, but the bottom two rows don't. Not sure if you wanted them all to line up. Your rounded corners box where the navigation is just shows white and not your background diagonal image. JOanne __ 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] Semi-transparent PNGs as background images in IE6
Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft .AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Apologies if I'm wrong, but I'm pretty sure I read about this a while back on alistapart.com Have a look at http://www.alistapart.com/articles/pngopacity/ and see if it describes the same thing. Hope this helps :) -- Roger Gordon --- www.rogergordon.net +27 (0)76 306 4578 --- One mouse click donates 1.5 cups of food to poor people worldwide (free of charge). Click below. http://www.thehungersite.com/clickToGive/home.faces?siteId=1 __ 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] Horizontal navigation. Unwanted space between list padding reaching out of container.
On Fri, 13 Apr 2007 02:53:39 +0100, Christopher Blake wrote: http://www.3pointdesign.com/index2.html http://www.3pointdesign.com/styles/one.css Hi all, I am trying to clear the space between the buttons. I also don't like the way the padding is going above the ul. It would be great if you could help me. Hi Chris, I don't see any styles for the navigation in your CSS at all. ?? Cordially, David -- __ 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] Problems with IE 6 7
On Fri, 13 Apr 2007 15:24:41 -0500, Tim Offenstein wrote: I have been asked to look over this site and offer some suggestions regarding its problems. Along with my own suggestions, I thought I would consult the CSS Brain Trust to see what wisdom you can offer. Your input is greatly appreciated. Main index - http://www.cvm.uiuc.edu/cvm/ Index style sheet - http://www.cvm.uiuc.edu/cvm/styles/main.css Horizontal navigation - http://www.cvm.uiuc.edu/cvm/styles/menu.css [...] Hi Tim, I see several problems in Opera and Firefox too: - My Win xp laptop is set to 120 DPI - a common factory setting for hi-def screens. This makes text larger in Opera, as well as for IE unless you use pixels. In any case, your visitors can change text size using various browser options. All these situations break the page, one way or another. - The drop-down menu is unusable for keyboard users. - Drop-downs break to two lines when text is larger. Links on the second line are unreachable. - There are many links on the page that do not look like links. I found them by tabbing through them :) - Heights in pixels won't reliably contain text. - I did not try resizing the window, but I don't think many visitors spend much time doing that. I suggest you make up reduced cases of each problem area and post them to the list with a description of the problem you are having. You may well find that a reduced case will reveal the solution anyway, so it's a worthwhile effort. This is just my opinion, not intended to discourage you. Cordially, David -- __ 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] Stop me before I add content!! - A browser check, an advice check - General Testing
On Fri, 13 Apr 2007 22:09:34 +0100, Christopher Blake wrote: Hi all. http://www.3pointdesign.com/ http://www.3pointdesign.com/styles/one.css This is eventually going to be the home of my new site. After months of redesigning and changing my mind I have got something that I am happy with. Before I start adding too much content, could people please give me as much feedback as possible with regards to browser testing, things to be aware of etc. Interesting concept. I usually start out with content, mark it up sensibly first, then add styles after. Still - the first impression is nice. I suggest you use a valid method of including Flash, rather than the deprecated EMBED[1]. It may help with IE 7, too. The footer text @ 9px is tiny on my laptop - equal to 5 points on a printed page. If I increase text size, the welcome message bursts out of its box. You may like to use a spell checker once you have meaningful content. (I know I can't get away without one.) [1] http://blog.deconcept.com/swfobject/ Cordially, David -- __ 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/