Re: [css-d] CSS depending on JS (was: Pure CSS drop-down menus aren't *good*)
On 16/10/2007, Kathy Wheeler [EMAIL PROTECTED] wrote: I seem to recall that at one stage certain versions of Netscape/ Mozilla would not render CSS at all if Javascript was disabled. I have no idea whether that is still the case with some browsers? Netscape 4.x supported JSSS, which lost out to CSS. JSSS depended on JS so it didn't work if JS was disabled. I gather that the CSS support in NS4.x was emulation layer on top of JSSS, which is one reason it was so broken (and didn't work without JS support). As far as I know, no other browser implemented JSSS or suffered from the same dependency. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check
Hi David and Elle, I've made some changes and it's behaving much better, can I impose upon you again to re-look and let me know how it looks to you? URL http://www.abilityincorporated.org.au/index.php Also David you said: seems a bit peculiar that the navigation and copyright seem to be more important than the site's primary content It wasn't supposed to, I'm not sure what happened or why it looked that way when you viewed the page??? Many thanks for all the help. 8-) Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check-- vicki stebbins
Vicki Stebbins wrote: I've made some changes and it's behaving much better, can I impose upon you again to re-look and let me know how it looks to you? URL http://www.abilityincorporated.org.au/index.php Vicki It is behaving much better and no longer dropping the float in IE6.0 in a narrow window. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6: div with image in it doesn't get narrower when I make the browser window smaller
Hello, plaese take a look at the following link: http://www.digitale-bibliothek.de/Downloads/CSS-Test/blog.htm http://www.digitale-bibliothek.de/Downloads/CSS-Test/style.css In the middle column there are several blog entries. The second entry (Zeno Food) contains a larger image. If I narrow the browser window, the blog entries widths get adjustet. But from a certain width on the second blog entry's width doesn't get smaller any more. In Firefox or IE7 the entry becomes smaller and the image is cropped. How can I achieve that in IE6 as well? Best regards, Christian Kirchhoff Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS drop-down menus aren't *good*
Alan Gresley wrote: Christian Heilmann wrote: Here is the assumption this article made: a drop down menu should work regardless of input device and stay on the screen when completely expanded without causing scrollbars and thus becoming impossible to reach the last items. Anything wrong with that? Let's see an application of common sense and find a CSS only menu that works with a keyboard and stays on-screen even if there is not enough space for it to show more to the left or the bottom. Hi everyone I have been following this thread with particular interest but staying in the background while it bounded in and out of holy war territory. Keyboard Accessibility with CSS is possible by using the :focus pseudo selector but at this time, only Firefox and Mozilla (maybe any Netscape compliant) fully support the :focus property. Opera has a slight problem with focus and grabbing the submenus. What I do find frequently on this list is request for help with CSS menus that have far to many links in them, micro text or little boxes to hover in. You cannot simply grab some CSS from here, and from there, then add this bit of JS etc and make it all work. Is this indeed why CSS menus are described as *bad* Having developed a CSS menu that does all of what Christian has stated accessibility wise. Now all we can do is wait for other browser vendors to catch up and if not, add whatever JS is needed to help the other browsers out with focus. In my demo, I find the vertical version much easier to use. http://css-class.com/articles/ursidae/bears5popupv-kbaccess.htm 1. Use the tab key to access all list items, observing how the submenus open when a parent anchor is in focus. 2. Notice the added use of the :after selector to add additional guidance. 3. Select any link (pressing enter) and go to a test page and then use the Alt+left arrow key together to return to the previous page with the same menu item still in focus. The normal hover functioning of the menu works in most browsers. Any test with the Khtml or Webkit browser engines would be appreciated. Regarding full accessibility at this point in time, I say that this menu is currently one of the best when javascript is enabled. http://www.tjkdesign.com/articles/new_drop_down/default.asp Hmm, in Konqueror 3.5.7 on Linux, with scripting enabled, the horizontal menu seems to work ONCE. Put mouse pointer over a tab, the horizontal menu changes to match. Put mouse pointer over a diferent tab, and nothing happens - we still have the horizontal menu of the first tab the mouse pointer was over. So if hover is supposed to be triggering something, it's not working here. Tabbing moves the active link box along, but when it hits Menus (for instance), no horizontal or other menu appears. After pressing tab seven times, the active box moves to the Articles: A-D item and seems to be stuck there (continued tabbing doesn't move the box anywhere). With the active box on Article: A-D, I pressed Enter and got the A-D horizontal menu. Pressing Alt-Left Arrow brought me back to the page with the active box on the A-D tab, but the horizontal menu for Menus showing. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari and Firefox division
I've got a situation where firefox (2.0.0.7) and Safari (2.0.4), both Mac, are displaying a particular margin differently. Is there any kind of hack to deliver CSS code specifically to one browser of the other? Thanks -- Rick Lecoat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari and Firefox division
On Oct 17, 2007, at 8:11 PM, Rick Lecoat wrote: I've got a situation where firefox (2.0.0.7) and Safari (2.0.4), both Mac, are displaying a particular margin differently. Is there any kind of hack to deliver CSS code specifically to one browser of the other? There was a thread a few days ago about a similar request (but for Opera). The same gotchas apply. http://archivist.incutio.com/viewlist/css-discuss/93262 Which browser/version is correct in your case ? A test-case illustrating the issue might be helpful. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari and Firefox division
On 17/10/07 (12:57) Philippe said: Which browser/version is correct in your case ? A test-case illustrating the issue might be helpful. Philippe Thanks for the response, Philippe; In the end I worked around the problem -- seemed a better solution than hacking the CSS with breakable filters. The css only needed to apply within a certain div, whilst 'the problem' fell outside that div. So being more specific with my selectors resolved it. That said, I will refer to the thread you mentioned, and thanks for pointing me there. -- Rick Lecoat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Generated content and non‐compliant br owsers
On 2007-10-17, Kenny wrote: I am inserting much content into elements using the 'content' property and the '::before' and '::after' pseudo‐elements. The inserted content is mostly punctuation and other content important to the document presentation. If it's important for understanding the content, then it should be in the content, not the CSS, so IE won't be a problem. If it's not important for understanding the content, then IE will gracefully degrade. However, if you have some reason for putting important content (punctuation counts) in :before and :after's, javascript is your only option for IE. I though HTML should be all about *actual content*, and CSS the presentation of that content? The generated content—headline star, quotation marks, quotation dash, list blocks, end of article glyph—is mostly presentation. Have a look at http://thewebdesignjournal.com/articles/one-two—testing-testing/ (mind the em-dash in the URL) in a recent release of Opera. Should I rather include those characters in the HTML? -- Daniel Aleksandersen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] reserved words as properties?
Hi all,
Just ran into this while working on an automotive tab. The grafic for
it is called auto.gif
#topnav a#tn_auto {
background: url(/grafx/auto.gif) no-repeat 0 0;
}
My editor highlighted auto.gif in the background url, due to auto
being a reserved word.
It seems to work in my browser no problem, but i'm wondering if anyone
has some insight or seeing this cause a problem with something down the
line.
Thanks
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to think about designing for resizing?
Hello, This is my first post, a short intro: b. in South Africa, 37, background engineering, working as atmospheric science researcher in Tokyo, interests in LaTeX, web design, and document archiving and long-term compatibility. Using Debian and Ubuntu GNU/linux for work and at home. I've been trying to improve my own webpage design (header, 3 columns, footer) to cater for gecko, khtml and IE6/7 rendering engines. Mostly done, and problems of margins/padding and use of extra DIVs understood. I've done some Googling and searches of some months of d-css archives but came up short on the following topic (not sure what to search for, tried resize, block, font, CSS): What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? At some point, all the fine examples I've found (e.g., http://www.ground.cz/luci/css/my3cols.html) break down and text extrudes from a block or starts to enter an adjacent block. This even occurs with the css-d website. What I'd like, I think, is an expanded viewport (virtual, i.e., larger than the actual screen) with---scroll bars activated---as the block elements all expand to cater for the extra needed space as the font size is increased. So I'm curious if there is some tactic that is accepted, or whether CSS2/3 cannot provide any guarantees once certain constraints are not kept. Best regards, Gernot Hassenpflug __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Test in IE 6 and IE 7 please
Hello all! As I have no PC by hand right now, it would be nice to get feedback what are the problems in IE for this site: http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css Thanks in advance Georg http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
Gernot Hassenpflug wrote: Hello, This is my first post, a short intro: b. in South Africa, 37, background engineering, working as atmospheric science researcher in Tokyo, interests in LaTeX, web design, and document archiving and long-term compatibility. Using Debian and Ubuntu GNU/linux for work and at home. I've been trying to improve my own webpage design (header, 3 columns, footer) to cater for gecko, khtml and IE6/7 rendering engines. Mostly done, and problems of margins/padding and use of extra DIVs understood. I've done some Googling and searches of some months of d-css archives but came up short on the following topic (not sure what to search for, tried resize, block, font, CSS): What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? At some point, all the fine examples I've found (e.g., http://www.ground.cz/luci/css/my3cols.html) break down and text extrudes from a block or starts to enter an adjacent block. This even occurs with the css-d website. What I'd like, I think, is an expanded viewport (virtual, i.e., larger than the actual screen) with---scroll bars activated---as the block elements all expand to cater for the extra needed space as the font size is increased. So I'm curious if there is some tactic that is accepted, or whether CSS2/3 cannot provide any guarantees once certain constraints are not kept. As far as I understand, this cannot be achieved (being 100% safe) because browsers have problems dealing with this resizing, so the proportions are lost and you get what you already saw --but it seems all major browsers will have native zooming once Fx 3 comes out, since Opera and now IE 7 already have it. Now, what you're looking for is a solid layout using relative units (em, ex, %, etc.) instead of absolute units (px, pt, etc.). Both 'em' and 'ex' are relative to the font size, so the bigger the font the bigger (in pixels) they are. Another thing, I guess the sites you mentioned that get broken have a safe margin for font resizing where the layout stays well-formed, am I right? This is usually the case, if not, the site could have a couple of issues. A downside of this method is that you can't have pixel-perfect layouts, and you must use images intelligently. Some people set the images size in relative units too to get a better scaling effect, just like zooming. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] reserved words as properties?
On 17 Oct 2007, at 14:32, Brian Cummiskey wrote:
Just ran into this while working on an automotive tab. The
grafic for
it is called auto.gif
#topnav a#tn_auto {
background: url(/grafx/auto.gif) no-repeat 0 0;
}
My editor highlighted auto.gif in the background url, due to auto
being a reserved word.
It seems to work in my browser no problem, but i'm wondering if anyone
has some insight or seeing this cause a problem with something down
the
line.
It's a bug in your editor; even IE doesn't have _that_ degree of a
problem parsing CSS.
Assuming your editor isn't so cheeky as to auto-correct it (pun
inevitable, I'm afraid) to something else, it won't be a problem.
Regards,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test in IE 6 and IE 7 please
Georg Portenkirchner wrote: Hello all! As I have no PC by hand right now, it would be nice to get feedback what are the problems in IE for this site: http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css Georg, I've taken screenshots in WindowsVistaIE7 and XP/IE6/7 of your site. Browsercam should have them avail within 30 mins of this mail (or so). HTH, ~Ray http://www.browsercam.com/public.aspx?proj_id=385146 -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS drop-down menus aren't *good*
Alan Gresley wrote: I have been following this thread with particular interest but staying in the background while it bounded in and out of holy war territory. Keyboard Accessibility with CSS is possible by using the :focus pseudo selector but at this time, only Firefox and Mozilla (maybe any Netscape compliant) fully support the :focus property. Opera has a slight problem with focus and grabbing the submenus. What I do find frequently on this list is request for help with CSS menus that have far to many links in them, micro text or little boxes to hover in. You cannot simply grab some CSS from here, and from there, then add this bit of JS etc and make it all work. Is this indeed why CSS menus are described as *bad* Having developed a CSS menu that does all of what Christian has stated accessibility wise. Now all we can do is wait for other browser vendors to catch up and if not, add whatever JS is needed to help the other browsers out with focus. In my demo, I find the vertical version much easier to use. http://css-class.com/articles/ursidae/bears5popupv-kbaccess.htm 1. Use the tab key to access all list items, observing how the submenus open when a parent anchor is in focus. Quoting Thierry Koblentz (a famous name :) But what about keyboard users? One example I've seen in this thread is not accessible to keyboard users and the other forces these users to go through every single item in the menu :-( If you're talking about menus with many items, this doesn't look like the best option, at least not without the JS behavior found in the menu Thierry himself (and many others, Georg included) points out http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/ I was going to use the same approach you just used, but after seeing that menu I changed my mind. It does become a problem when JS is disabled, but I guess we can combine both techniques and come out with something better. That's what I will be trying (some day for sure). 2. Notice the added use of the :after selector to add additional guidance. 3. Select any link (pressing enter) and go to a test page and then use the Alt+left arrow key together to return to the previous page with the same menu item still in focus. The normal hover functioning of the menu works in most browsers. Any test with the Khtml or Webkit browser engines would be appreciated. Regarding full accessibility at this point in time, I say that this menu is currently one of the best when javascript is enabled. http://www.tjkdesign.com/articles/new_drop_down/default.asp Interesting, looks just like the one found at http://www.alistapart.com/d/hybrid/hybrid-4.html from the article at http://www.alistapart.com/articles/hybrid/ but with accessibility improvements. What has been overlook in this thread is that maybe some users who can only access a page with a keyboard are using Firefox or similar browsers already. We as web designers can help with this public awareness of such browsers. Kind Regards, Alan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] reserved words as properties?
Nick Fitzsimons wrote: It's a bug in your editor; even IE doesn't have _that_ degree of a problem parsing CSS. Thanks Nick. I'm using (a surely out-dated version of) Edit Plus. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
On 10/17/07, Rafael [EMAIL PROTECTED] wrote: Gernot Hassenpflug wrote: I've been trying to improve my own webpage design (header, 3 columns, footer) to cater for gecko, khtml and IE6/7 rendering /../ What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? /../ What I'd like, I think, is an expanded viewport (virtual, i.e., larger than the actual screen) with---scroll bars activated---as the block elements all expand to cater for the extra needed space as the font size is increased. /../ As far as I understand, this cannot be achieved (being 100% safe) because browsers have problems dealing with this resizing, so the proportions are lost and you get what you already saw --but it seems all major browsers will have native zooming once Fx 3 comes out, since Opera and now IE 7 already have it. Thanks for the informative reply Rafael, that gives me some much-needed perspective. I just had a 2-hour SkyPE conversation with a colleague about IE7 (he uses) vs. IE6 (me) and khtml and gecko rendering (also me), exchanging video clips of sites as we worked, and showing off the IE7 zoom. Very impressive indeed. I haven't updated Opera but will do so. That makes web designer's goals a little simpler than before, I suppose. Now, what you're looking for is a solid layout using relative units (em, ex, %, etc.) instead of absolute units (px, pt, etc.). Both 'em' and 'ex' are relative to the font size, so the bigger the font the bigger (in pixels) they are. Another thing, I guess the sites you mentioned that get broken have a safe margin for font resizing where the layout stays well-formed, am I right? This is usually the case, if not, the site could have a couple of issues. Yes, you are surely correct about the safe margin, my site had that too. It is better than nothing! I take the point about relative units, but for lining up margins/padding I haven't managed to get rid of all absolute units, for reasons you point out below. A downside of this method is that you can't have pixel-perfect layouts, and you must use images intelligently. Some people set the images size in relative units too to get a better scaling effect, just like zooming. Right, I didn't think about this possibility. Thanks a lot once again. Gernot __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problem
Still working out a few problems with a new site. I've posted a couple of questions to the list with great results. Now, the client is insisting that a Contact button be placed so that it straddles a couple of borders. If the layout was left aligned, I could position it absolutely but the design is centre aligned. This version shows the Contact button inside the borders: http://www.grandconnections.com/buttercup/index.htm http://www.grandconnections.com/buttercup/index.htm This version shows the Contact button where the client has specified: http://www.grandconnections.com/buttercup/index_button.htm If anyone has a solution that will make the client happy, it would be greatly appreciated. Kathryn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS drop-down menus aren't *good*
On 10/16/07, Alan Gresley [EMAIL PROTECTED] wrote: The normal hover functioning of the menu works in most browsers. Any test with the Khtml or Webkit browser engines would be appreciated. Regarding full accessibility at this point in time, I say that this menu is currently one of the best when javascript is enabled. In Firefox 2.0.0.7 (Windows): when tabbbing, only the currently selected item is visible--the sub-menu(s) containing the selected item are not displayed. Also, if an item has been tabbed to, and then the mouse if moved over the menu, the last tabbed-to item remains displayed. In both Safari 3.0.3 (Windows) and Opera 9.23 (Windows), tabbing doesn't seem to work. Mousing over works fine, however. :Dan Dorman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test in IE 6 and IE 7 please
Apologies to all for the multi-post. seems my mail server hiccuped at just the wrong moment -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problem
Well, the good news is that a margin seems to work just fine, so if
you add 'id=contact' to that image, and the next CSS it should be
positioned more or less where you want it...
#contact {
margin-right: 10px;
margin-top: -10px;
}
Now the bad news... yes, IE. There is a problem with the stacking
order, so the contact image is cropped in IE. I recall a similar issue
not much time ago, so you can dig in the archive and see if that helps.
Search for 'stacking order', 'z-index' or something like that --or ask
Georg Sørtun directly ;)
P.S. It seems you're using the same images I used on the test. I
suggest you to clean the flower image, it's stands out too much when
loading the page the first time (since there are bright pixels in the
top of it, and dark ones in its bottom --no pun intended).
Kathryn Crutcher wrote:
Still working out a few problems with a new site. I've posted a couple of
questions to the list with great results. Now, the client is insisting that
a Contact button be placed so that it straddles a couple of borders. If the
layout was left aligned, I could position it absolutely but the design is
centre aligned.
This version shows the Contact button inside the borders:
http://www.grandconnections.com/buttercup/index.htm
http://www.grandconnections.com/buttercup/index.htm
This version shows the Contact button where the client has specified:
http://www.grandconnections.com/buttercup/index_button.htm
If anyone has a solution that will make the client happy, it would be
greatly appreciated.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test in IE 6 and IE 7 please
Thank you everybody who sent me screenshots. After some changes finally the site seems to work in Safari, Firefox and Opera on a Mac. But Internet Explorer (6 and 7) still gives me headaches. Maybe someone has a hint for me? Thank you! http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css Am 17.10.2007 um 15:53 schrieb Georg Portenkirchner: Hello all! As I have no PC by hand right now, it would be nice to get feedback what are the problems in IE for this site: http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css Thanks in advance Georg http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
Gernot Hassenpflug wrote: What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? At some point, all the fine examples I've found (e.g., http://www.ground.cz/luci/css/my3cols.html) break down and text extrudes from a block or starts to enter an adjacent block. This even occurs with the css-d website. So I'm curious if there is some tactic that is accepted, or whether CSS2/3 cannot provide any guarantees once certain constraints are not kept. Gernot Hassenpflug One way of coping with trying to get a layout to work in any and all screen window widths, is to set min/max width on the outermost container and provide your favorite workaround for IE6 which does not support min/max width. Obviously in a 3 column layout one needs to be conscious of very long words, fixed width elements, and images that may break the layout or cause float drop in IE with or without font-scaling. Negative margin based float layouts are less susceptible to these problems: and, work around methods are available for some adverse situations, particularly those frequently encountered in IE6.0. As an aside, I'd be wary of placing any faith in IE7's zoom toy-- unlike Opera, IE's zoom tinker-toy is just more of their flawed let's pretend to make-believe this is really a compliant browser PR. Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
Gernot Hassenpflug wrote: [...] exchanging video clips of sites as we worked, and showing off the IE7 zoom. Very impressive indeed. I haven't updated Opera but will do so. Not sure if this is what you mean, but... unless you have a really old version of Opera, it already has the zooming feature, they were the first ones to bring it out. Just use the mouse wheel keeping Ctrl pressed or change to the author view (not sure about the name) and using the zoom drop-down. [···] [...] Some people set the images size in relative units too to get a better scaling effect, just like zooming. Right, I didn't think about this possibility. Thanks a lot once again. Gernot Me neither, so I was a little disappointed of myself when I learned about it in this very list :) Regards. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
Rafael wrote: [...] Some people set the images size in relative units too to get a better scaling effect, just like zooming. Right, I didn't think about this possibility. Thanks a lot once again. Gernot Me neither, so I was a little disappointed of myself when I learned about it in this very list :) To refresh a bit: be aware that image-scaling in browsers is pretty unreliable... http://www.gunlaug.no/contents/wd_additions_23.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu and float problems
On 10/16/07, Lyn Williams [EMAIL PROTECTED] wrote: The first being a drop down menu I have developed won't display the appropriate links. I seems the the drop down works but the links won't appear. the second problem is I'm trying to float six different div elements side to side but after the fourth element the next two clears to the bottom of the page. You can see the page here: http://www.irn2000.com/public/ (dropdown = the Information tab) It works fine in Opera, so I'm assuming you are viewing in IE. (The menu doesn't drop down at all in my IE6 but that is probably because I have javascript locked down rather tight in IE *). Anyway, when content is invisible in IE, it is usually a problem with HasLayout. Visit www.satzansatz.de/cssd/onhavinglayout.html to gain insight and solutions. * This raises the point that to make your page both accessible and search-engine friendly, the tab information should link to a landing page which has conventional links to all the menu items. For the floats, the content of your first item is longer than the defined height of the float (because its heading text takes two lines). Therefore the items in the second row move left until they bump into the bottom corner of item 1, leaving a spare item to go on a third row. This isn't happening in other browsers, because they will position the image over the overlong text instead (IE treats height as min-height, others correctly treat it as absolute and default to overflow:visible). Not only that, the entire design of the panels is extremely fragile. In no browser does the white text sit in the middle of the bottom bar for me - you might have encountered my minimum font settings. Which results in a very broken page. You need to have the coloured bars as backgrounds to the relevant elements. Putting text of various colours over a single image background will never work reliably. Oh, and your design seems to assume that everyone has white window backgrounds. We don't. So if your design requires a white background you need to declare it. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] table cell size problem.
I dont have too much experience in tables so I guess I am missing something. please see my well Plate Map below. My table is where the black border starts. http://www.sandygonzales.com/cpc/user_controls.php My table is set to a width of 374px and height of 207px with border collapsing turned on. My table for the most part looks how I want, but one problem. Each cell is supposed to be the exact width of 14px wide and 12px high. There is a border of 1px being collapsed between the cells. The cells should be adding up perfectly.. There are 25 x 16 cells.. So for width there are 25(cells) x 14(px) = 350px. 350px + 24px(each cell border to the right of itself which does not include the last one because it collapsed) = 374px. And for height there are 16(cells) x 12(px) = 192px. 192px + 15px(each cell border to the bottom of itself which does not include the last one because it collapsed) = 207px. I put some javascript in for testing.. if you click on one of the red squares it shows you the client width and height. Each cell should be 14px by 12px instead they are 13 x 11 in the middle, 14x 11 on the side, 13x 10 on the bottom..and then IE is even different from those. I tried turning on table-layout: fixed and using column widths but the numbers were still wrong? If you're still reading this.. please help point me in the right direction! Thanks so much! Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 - preserving image-ratio and simulation max-width for images
1: Has anyone ever been able to design their way around IE6 faulty preservation of height/width ratio for images scaled with only one dimension - 'width: some value' ? This is a first load and reload problem with large images on somewhat slow connections, as IE6 corrects its errant ways if we shake it a bit - resize the browser-window. Needing a 'max-width' workaround for images in that old browser, this problem obviously is a show-stopper. 2: The 'max-width' scaling itself causes wild flickering when window is sized wider but still below full size, as I haven't found a way to extract an image's real dimensions and use that as part of the expression to smoothen things out. This means the image will size up to full size, 'auto', and then be sized down again to 'max-width' by the expression when window is widened - causing flickering. Test page... http://www.gunlaug.no/tos/moa_19g.html ...which obviously has so large images that they can only be viewed full size on browser-windows wider than 1300px. The relevant problems appear on any window-size though. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Odd Safari display problem...
Check out the navigation and RSS link on the top right part of this page: http://www.scienceprogress.org/ Everything lines up fine in Firefox and IE-Win, but in Safari, the RSS icon drops below the navigation stuff and floats to the left... Any idea why? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE - border around image erroneously displaying
http://www.ddiv.com/clients/voa/final_builds/chinese_news.html
The problem area is on the right hand side, where the Tabbed navigation items
are. The two buttons are orange and grey, side by side. They are appearing
irregularly in Win 2000/XP on IE6.0 and IE5.5 with a blue border on either edge
(as an image would that is linked without border=0 or border:none used). I'm
wondering if it is the class buttonsAlignRight that is causing this
misbehavior? I'm also thinking this is not a good way to code this, but I had
trouble since these buttons MUST fall along the same line as the tabs. I would
greatly appreciate a guidance to correcting this small issue.
The HTML code is:
div class=buttonsAlignRight
a href=# class=noTabimg src=images/chinese_news/orange_button.gif
alt= width=30 height=15 border=0 //a
a href=# class=noTabimg src=images/chinese_news/grey_button.gif alt=
width=30 height=15 border=0 //a
/div
The CSS is #
tabsContainerChinese a.noTab:link, #tabsContainerChinese a.noTab:visited:hover,
#tabsContainerChinese a.noTab:hover {
text-decoration: none;
margin:0;
padding:0 2px 0 2px;
border:none!important;
background:none!important;
display:inline;
background-color: #333ee6;
}
.buttonsAlignRight {
float:right;
}
Anne Shroeder
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd Safari display problem...
Matt wrote: Check out the navigation and RSS link on the top right part of this page: http://www.scienceprogress.org/ Everything lines up fine in Firefox and IE-Win, but in Safari, the RSS icon drops below the navigation stuff and floats to the left... Any idea why? Mac OS X 10.4.10 Hmm. I see no difference in relative rendering among Safari/3.0.3, Mac/Opera/9.23, and Mac/Firefox/2.0.0.7. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd Safari display problem...
On 18/10/2007, at 10:18 AM, David Laakso wrote: Matt wrote: Check out the navigation and RSS link on the top right part of this page: http://www.scienceprogress.org/ Everything lines up fine in Firefox and IE-Win, but in Safari, the RSS icon drops below the navigation stuff and floats to the left... Any idea why? Mac OS X 10.4.10 Hmm. I see no difference in relative rendering among Safari/3.0.3, Mac/Opera/9.23, and Mac/Firefox/2.0.0.7. Safari 2.0.4 on OS X v10.4.10 here, and the RSS icon stays on the line with the other links in the navigation for me.__ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd Safari display problem...
On Oct 18, 2007, at 6:21 AM, Matt wrote: Check out the navigation and RSS link on the top right part of this page: http://www.scienceprogress.org/ Everything lines up fine in Firefox and IE-Win, but in Safari, the RSS icon drops below the navigation stuff and floats to the left... Safari 2.04, Safari 3.0beta and latest WebKit builds all display the same here. OS X 10.4.10. Which version of Safari are testing ? Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE - border around image erroneously displaying
Anne E . Shroeder wrote:
http://www.ddiv.com/clients/voa/final_builds/chinese_news.html
The problem area is on the right hand side, where the Tabbed
navigation items are. The two buttons are orange and grey, side by
side. They are appearing irregularly in Win 2000/XP on IE6.0 and
IE5.5 with a blue border on either edge (as an image would that is
linked without border=0 or border:none used). I'm wondering if it
is the class buttonsAlignRight that is causing this misbehavior?
I'm also thinking this is not a good way to code this, but I had
trouble since these buttons MUST fall along the same line as the
tabs. I would greatly appreciate a guidance to correcting this small
issue.
It is basically that IE6 and older can't sort out a selector like this...
#tabsContainerChinese a.noTab:visited:hover
...while at the same time seeing the link as visited so this won't apply...
#tabsContainerChinese a.noTab:link
...so IE6 adds the padding only on :hover.
The old ignore !important in same rule bug/hack for IE6 then kicks in,
and gives you 2px of 'background-color : #333ee6;' on each side of the
image. That sure looks like a blue border on :hover.
Cleaning it up to the following...
#tabsContainerChinese a.noTab:link,
#tabsContainerChinese a.noTab:visited,
#tabsContainerChinese a.noTab:hover {
text-decoration : none;
margin : 0;
padding : 0 2px 0 2px;
border : none !important;
background : none !important;
/* display: inline;
background-color: #333ee6; */
}
...will make IE6 behave just fine.
The styles I've commented out can be deleted completely.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
