Re: [css-d] page check :: ~dL [continued]
~davidLaakso wrote: ~davidLaakso wrote: ~davidLaakso wrote: [trimmed] Whoops. I discovered a horrendous error and took it down. Back to the drawing board. ~dL Oh, my. Such a mess. Better now I hope. A page check of this test page with whatever you're running is appreciated. But when push comes to shove it's all versions of ie she hopes to please. The directory is here http://www.chelseacreekstudio.com/ca/auto/. Hmm, now it gives me a listing of files in /ca/auto. I guess auto.html is the file to open? Yes, that looks like a web site. Looks good to me in FF. Thank you for bearing with me. Computers are such cooperative beings, it's sad to see them maliciously interfering ... ;-) -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] page check :: ~dL [continued]
Subject: Re: [css-d] page check :: ~dL [continued] ~davidLaakso wrote: ~davidLaakso wrote: [trimmed] Whoops. I discovered a horrendous error and took it down. Back to the drawing board. ~dL Oh, my. Such a mess. Better now I hope. A page check of this test page with whatever you're running is appreciated. But when push comes to shove it's all versions of ie she hopes to please. The directory is here http://www.chelseacreekstudio.com/ca/auto/. Thank you for bearing with me. Best, ~dL Looks cool to me on IE7 and IE6 Win XP Prof Nice one David Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.16.10/624 - Release Date: 12/01/2007 14:04 __ 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] using Tables
Hey, We are rewriting a complex PHP website, that should work with CSS, I would like to know, when it is ok to use tables and when it is rather to use CSS layout? Thanks Omri Omri Gonen CEO - TACT Internet Applications ___ Phone: 972-8-9361477 Mobile: 972-52-8981301 Fax: 972-8-9363308 Openhimer 7 Rechovot, Israel Keep in TACT http://www.tact.co.il __ 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] using Tables
Dear Omri: You can check out the W3C specs for the table tag to get the official explanation (http://www.w3.org/TR/html4/struct/tables.html). It is my experience that tables are only for data (collections of statistics, etc), whereas anything you are putting in a table simply for layout is a no-no (unless you are transitioning and using CSS only for styles, layout is a lot more difficult). You can put a calendar in a table since it is tabular data, but you do have to label it correctly. The major concern of tables is they are difficult for people with handicaps to read and the information is lost. If you can avoid a table with a cleaner method, I recommend doing so. If you are uncertain if it will cause problems, try reading your page on a cell phone or on a computer with JAWS. If you can't follow what is going on, your users won't either. ;-) -- In peace, Amy M Ostrom Web Interface Designer [EMAIL PROTECTED] http://www.tc.umn.edu/~aostrom/ For dangers untold and hardships unnumbered, I have fought my way to the castle beyond the goblin city to take back the child that you have stolen. For my will is as strong as yours, and my kingdom is as great. You have no power over me. -Labyrinth Omri Gonen wrote: Hey, We are rewriting a complex PHP website, that should work with CSS, I would like to know, when it is ok to use tables and when it is rather to use CSS layout? Thanks Omri Omri Gonen CEO - TACT Internet Applications ___ Phone: 972-8-9361477 Mobile: 972-52-8981301 Fax: 972-8-9363308 Openhimer 7 Rechovot, Israel Keep in TACT http://www.tact.co.il __ 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] using Tables
Thanks for the quick answer, we have a system that works with IE and does not work with FF (the css does not work properly) We have started to change the code but we are having a lot of problems adapting the code, is there a manual that can help us adjust the code for the 2 browsers? Thanks Omri -Original Message- From: Amy M Ostrom [mailto:[EMAIL PROTECTED] Sent: Saturday, January 13, 2007 3:39 PM To: Omri Gonen Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] using Tables Dear Omri: You can check out the W3C specs for the table tag to get the official explanation (http://www.w3.org/TR/html4/struct/tables.html). It is my experience that tables are only for data (collections of statistics, etc), whereas anything you are putting in a table simply for layout is a no-no (unless you are transitioning and using CSS only for styles, layout is a lot more difficult). You can put a calendar in a table since it is tabular data, but you do have to label it correctly. The major concern of tables is they are difficult for people with handicaps to read and the information is lost. If you can avoid a table with a cleaner method, I recommend doing so. If you are uncertain if it will cause problems, try reading your page on a cell phone or on a computer with JAWS. If you can't follow what is going on, your users won't either. ;-) -- In peace, Amy M Ostrom Web Interface Designer [EMAIL PROTECTED] http://www.tc.umn.edu/~aostrom/ For dangers untold and hardships unnumbered, I have fought my way to the castle beyond the goblin city to take back the child that you have stolen. For my will is as strong as yours, and my kingdom is as great. You have no power over me. -Labyrinth Omri Gonen wrote: Hey, We are rewriting a complex PHP website, that should work with CSS, I would like to know, when it is ok to use tables and when it is rather to use CSS layout? Thanks Omri Omri Gonen CEO - TACT Internet Applications ___ Phone: 972-8-9361477 Mobile: 972-52-8981301 Fax: 972-8-9363308 Openhimer 7 Rechovot, Israel Keep in TACT http://www.tact.co.il __ 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] using Tables
It is always a mistake to write for IE and then test in FF etc as FF/Opera etc are the more compliant browsers. Manual? Try this list and the rest of the web. Cascading Style Sheets (friendsofed,com) and anything by Eric Meyer are good places to start. If you also supply a URL we will be able to have a look. On the table question, tables should be used for their orginal purpose - the display of tabular data (although arguments continue to thrive over what that means in practice). Table layout compromises content semantics and increases download, rendering and maintenance times as well as making sites more inaccessible. CSS, used wisely, enforces a clean separation between content and presentation, allowing you to write lean, clean, efficient markup and style is as you wish rapidly. __ 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] page check :: ~dL [continued]
In Opera 9.10 there's a ~10px white gap between questions and the gray box (left column). The same space in FF 2.0.0.1, IE7, IE6 and Netscape is gray. In IE5.5 and IE6 the Chevrolet logo is not found. Also the contents of that gray box (Chevrolet Question?) is not centered like in the other browsers, as is that blue medal a bit further down in the column. PC WinXP Pro SP2. HTH, A. __ 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] min-height: which one does it right FF2 or IE7?
Please, see my test case: http://cim.szm.sk/min-height.html My question is: Which browser does it right, FF2 or IE7? -- Text of my test case: CSS 2.1 Specification: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') It seems to me, that the expression this element refers to the containing block (black border) not the generated box (orange background). Firefox2 applies min-height in both cases and does not require the generated box to be absolutely positioned. IE7 requires the generated box to be absolutely positioned. MSDN does not mention absolute positioning, but refers to the specification. MSDN: If the height of the containing block is not explicitly set, then the element has no minimum height and the minHeight property is interpreted as 0%. Opera9 ignores min-height in both cases. -- {U}()Cimo Michal Cizmazia __ 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] The endless search of the holy grail
So, it's about what the topic says: My search of the holy grail of css layouts ;) I am in search of a layout technique for the following situation: * 1, 2, and 3 columns must be possible (with as little as possible css modification to switch between them. ) * fixed-width sidebars, liquid middle column * the easy-clearing technique described on positioniseverything.net shall be usable (at least in the middle column) without breaking the layout * the columns have to have equal heights * footer across all three columns * source order would be very nice, but is not ultimately requird * it should work in all major browsers (IE6, FF 1.5 2, Safari, Opera 8+9, IE7) and be somehow viewable in Gen. 5 browsers. Gen. 4 support is not needed. * Some pages have anchors I read a lot about the different layout techniques, and I tried many of them for this setup. So far, I have not found *one* that fulfills all these requirements. Yes, I know that this setup is done with tables in 5 minutes. But hey, it has to be possible with CSS too, hasn't it? At the beginning, I used the A List Apart's Holy Grail layout [1]. However, whenever the easy clearing class is applied to some content in the middle column, it gets moved down below the sidebars, and I wasn't able to fix it (or to find a fix for this in the web). So, I switched the layout once more and then started using the One True Layout by positioniseverything.net. However, it is this bug with equal height columns [2], anchors and Gecko browsers that makes me search again. Now, I'm still thinking that there *has* to be working technique for the described setup. As I said, I read through many lists of CSS layouts, skimmed dozens of .css files, tried several, but none of them could fulfill all the requirements, which is a pitty somehow .. Does anyone here know of the perfect technique for these requirements? The One Link that solves my problems? regards, Frando P.S. All this is for a theme for the opensource CMS drupal that I currently develop [3], you can find a demo at [4]. I dropped the Holy Grail layout because of [5], and I'm looking for an alternative to One True Layout because of [6],. [1] http://alistapart.com/articles/holygrail [2] http://positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems [3] http://drupal.org/project/bluebreeze [4] http://xcite-online.de/drupal [5] http://drupal.org/node/91259 [6] http://drupal.org/node/106850 __ 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] min-height: which one does it right FF2 or IE7?
Michal Cizmazia wrote: http://cim.szm.sk/min-height.html My question is: Which browser does it right, FF2 or IE7? -- Text of my test case: CSS 2.1 Specification: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') It seems to me, that the expression this element refers to the containing block (black border) not the generated box (orange background). Hmmm, no, I think this element is the element having the min-height declaration, so in your case the orange one, not the containing block. That sentence in the spec is about the same as for the 'height' case, where there is also the following clarification: Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. According to my understanding this clarifies that absolutely positioned refers to the element having the [min-]height property, not to the containing block. So the Firefox behaviour that your test case shows seems somewhat incorrect to me. It seems related to the fact that your containing block has both top and bottom specified, and this is more or less equivalent to having a height specified. Indeed if you remove the bottom property and add some content to your contaning block (so that its height becomes dependent on this content), then _only_ the case with position:absolute on the orange box causes the orange box itself to stretch. Bruno __ 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] Centering images
Mark Lundquist wrote: On Jan 12, 2007, at 3:12 PM, david wrote: Diane Ross wrote: I don't know what I'm doing wrong. When I want to center an image I can only get it to work if I select div align=center. If I use a class .txtcenter, .center { text-align: center; } Or #test img { text-align: center; } the image does not center. Because an image is not text. Hmm, not quite... text-align affects images in exactly the same way as it affects text or any other inline element. My understanding is, no, text-align is only supposed to align text. The fact that IE6 also aligns images when you use it is wrong. But what would I know? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] using Tables
Amy M Ostrom wrote: If you are uncertain if it will cause problems, try reading your page on a cell phone or on a computer with JAWS. If you can't follow what is going on, your users won't either. ;-) Or install the FANGS extension in Firefox and see how the text would be read. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Centering images
On Jan 13, 2007, at 12:50 PM, david wrote: My understanding is, no, text-align is only supposed to align text. That's incorrect; see http://www.w3.org/TR/CSS21/text.html#alignment-prop: This property describes how inline content of a block is aligned [etc...] All of this section is worded in terms of inline content or inline boxes, not text per se. The fact that IE6 also aligns images when you use it is wrong. Who said anything about IE? :-) All browsers do it, and it's not wrong! Now, what IE does do wrong is that it also centers block content within a container that has 'text-align: center'. This may be what you are thinking of. Cheers, —ml— __ 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] Centering images
Mark Lundquist wrote: On Jan 13, 2007, at 12:50 PM, david wrote: My understanding is, no, text-align is only supposed to align text. That's incorrect; see http://www.w3.org/TR/CSS21/text.html#alignment-prop: This property describes how inline content of a block is aligned [etc...] All of this section is worded in terms of inline content or inline boxes, not text /per se/. Then the W3C's choice of TEXT-align is a bad choice. It specifies text when it's really talking about something broader than what people think of as text. Something like horizontal-align would make more sense to me, or align-x to parallel the repeat-x, repeat-y values for background images. The fact that IE6 also aligns images when you use it is wrong. Who said anything about IE? :-) Nobody did, but the original poster didn't specify any browser at all. I've quite often seen people do that when they use IE because they think everyone uses IE. All browsers do it, and it's not wrong! Now, what IE does do wrong is that it also centers block content within a container that has 'text-align: center'. This may be what you are thinking of. Yah, that's what I was thinking of. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Centering images
On Jan 13, 2007, at 1:17 PM, david wrote: Then the W3C's choice of TEXT-align is a bad choice. It specifies text when it's really talking about something broader than what people think of as text. I agree :-) —ml— __ 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] sigh, CSS and Explorer
Please be kind, CSS - web design isn't really my expertise ... I've created a few web pages and managed to create something that looked OK in Safari, OmniWeb and Firefox. Then I used my sons PC and used Explorer 6 ... disaster. I looks like Explorer 6 doesn't handle max-width, min-width and margin: auto. So my design looks pretty awful on Explorer 6, so my questions are: + How common is Explorer 6, should I bother to try to fix this? + Is there some simple way of fixing this (I tried to find some reference of how to fix it but I didn't find anything)? My problem code looks like this: #pagecontent { padding: 30px 4px 0 4px; margin: auto; max-width: 550px; } and the actual page can be found here http://www.cs.umu.se/~jem/ jem __ 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] sigh, CSS and Explorer
On 1/13/07, Jan Erik Moström [EMAIL PROTECTED] wrote: + How common is Explorer 6, should I bother to try to fix this? Well unless Microsoft's push for IE7 is going faster than I think it's probably still the majority browser out there. + Is there some simple way of fixing this (I tried to find some reference of how to fix it but I didn't find anything)? First you have to get rid of the comments before your DOCTYPE declaration. For IE6 (and 7) the declaration must be the very first thing in the file or it will render in quirks mode instead of standards mode. In IE that's a much bigger deal than with other browsers because in quirks mode it sizes screen boxes incorrectly. Next you must make sure to have valid xhtml. Use the W3C validator and squash any markup errors in your file. CSS is defined for valid code only. IE6 doesn't support min-width or min-height but width and height work just like the min rules are supposed to work so you can just use the Holly Hack to feed it a height and width rule that other browsers will ignore, or use conditional comments for the same purpose. Cheer up! It's ever so much easier to get IE looking right when Firefox also looks right than it is to go in the other direction. -- Ed Seedhouse __ 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] Centering images
On 1/13/07 1:19 PM, Mark Lundquist [EMAIL PROTECTED] wrote: On Jan 13, 2007, at 1:17 PM, david wrote: Then the W3C's choice of TEXT-align is a bad choice. It specifies text when it's really talking about something broader than what people think of as text. I agree :-) ml From a newbie standpoint, I agree about the wording. I questioned this and was unsure, but in GoLive the option to select txt-center style gave an img as one of the options when an image was selected. When it didn't work, I entered a fugue state of more newbie confusion. :-) -- Diane __ 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] Can't assign links specific styles
Hey all, I'm a PHP/MySQL coder by trade, hence a bit green with CSS, as this question will show. I have two sets of style elements to style two different kinds of links, as the code below shows. .shoplogo a, a:visited { border: none; color: #000; background-color: #b9e4ff; text-decoration: none; } .shoplogo a:hover { border: none; color: #000; background-color: #b9e4ff; text-decoration: none; } .pagelink a, a:visited { display: block; width: 6em; padding: 0.2em; line-height: 1.4; background-color: #47afe2; border: 1px solid black; color: #00; text-decoration: none; text-align: center; } .pagelink a:hover { display: block; width: 6em; padding: 0.2em; line-height: 1.4; background-color: #369; border: 1px solid black; color: #ff; text-decoration: none; text-align: center; } And then I have code in an html file with the following two lines, in different places. td align=center valign=topa class=shoplogo href=http://shopstudios.com; img src=images/ShoTV-1.jpg border=0/a /td td align=center valign=topa href=fashion.html class=pagelinkFASHION/a/td The problem is that both links take on the properties of whatever style set, or specs for the links, is listed last in the CSS file. I would think since they have separate names, that each would adhere to the properties of the one they are called by. I know to all of you this is trivial and you're rolling your eyes, but I'm a bit confused. Thanks, Skip -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 =-=-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.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] Can't assign links specific styles
Hi Skip, I'm not quite sure, but it looks to me like you're missing a specification in your a:visited. Now you have .shoplogo a, a:visited { stuff } The .shoplogo is not inherited so your a:visited is refering to ALL a:visited anchors. Try with .shoplogo a, .shoplogo a:visited { stuff } .pagelink a, .pagelink a:visited { stuff } I'm sure people will correct me if I'm wrong, or add when there's more to it. HTH, A. __ 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] sigh, CSS and Explorer
Reply to Ed Seehouse [EMAIL PROTECTED] 07-01-13 14:50: First you have to get rid of the comments before your DOCTYPE declaration. For IE6 (and 7) the declaration must be the very first thing in the file or it will render in quirks mode instead of standards mode. In IE that's a much bigger deal than with other browsers because in quirks mode it sizes screen boxes incorrectly. OK, some small modifications of template should fix that Next you must make sure to have valid xhtml. Use the W3C validator and squash any markup errors in your file. CSS is defined for valid code only. At least it validated :-) IE6 doesn't support min-width or min-height but width and height work just like the min rules are supposed to work so you can just use the Holly Hack to feed it a height and width rule that other browsers will ignore, or use conditional comments for the same purpose. Thanks I'll try this, Cheer up! It's ever so much easier to get IE looking right when Firefox also looks right than it is to go in the other direction. That sounds good ... so let's see if I can get this working jem __ 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] sigh, CSS and Explorer
On 1/13/07, Jan Erik Moström [EMAIL PROTECTED] wrote: Next you must make sure to have valid xhtml. Use the W3C validator and squash any markup errors in your file. CSS is defined for valid code only. At least it validated :-) That already makes your site better than the vast majority of pages out there. -- Ed Seedhouse __ 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] (IE6 Windows): an image's position:fixed is not fixed
Dear list, On this page: http://www.polarissc.com/whowehelp.html This IMG is fixed to the bottom of the screen in Safari on my Mac, but is at the top of the screen (and incidentally is a weird color) in IE6/Win. img src=images/gradient.png width=100% height=258 style=position: fixed ; bottom: 0; left: 0 ; z-index:1 ; / Is there a simple way to fix it? Thanks! Chris. __ 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] Centering images
On 1/12/07 7:04 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Should be... .img_center {display: block; margin: 0 auto;} It's working now. Thank YOU!! I didn't find a class .img_center in your on-line stylesheet, so I can't say why it didn't work. I added one with the styles from my example above, and it worked perfectly. I really appreciate your examples. It helps me tremendously. I'm having a big problem using hr / in the #main content area. After an hr / the text gets thrown way down the screen. http://www.test.entourage.mvps.org/atest/ It's pushed down because you have declared 'clear: both' on the hr. That's how 'clear' works in that kind of layout. It will clear *everything* in sight - including the side-columns. You should have a class for 'clear' so you can add it to the hr, or any other element, when you need it - not add 'clear' permanently to the hr. Now, for that particular page/layout you can keep that hr-styling, and solve it by adding... #main {overflow: hidden; margin: 0; } * html #main {overflow: visible; height: 1%; } * html #sidebar {overflow-x: hidden;} ...which will isolate all 'clear' inside #main (and correct the most troublesome bugs in IE6). Works in all browsers I can lay my eyes on, from IE6 and up. I'm not quite sure if I should remove clear from the hr and add a clear class if needed or add the corrected css you suggested above. Or do I really need hr in my style sheet? Where I get myself into trouble is I use examples from another site (I try to 'borrow from the best) and I don't know enough to understand all the attributes they have added to the style. Is this OK? .clear-both { clear: both; } -- Diane __ 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] Can't assign links specific styles
Hey Fora, I tried what you have below and got the same results. Any other ideas? Thanks! Skip Fora wrote: Hi Skip, I'm not quite sure, but it looks to me like you're missing a specification in your a:visited. Now you have .shoplogo a, a:visited { stuff } The .shoplogo is not inherited so your a:visited is refering to ALL a:visited anchors. Try with .shoplogo a, .shoplogo a:visited { stuff } .pagelink a, .pagelink a:visited { stuff } I'm sure people will correct me if I'm wrong, or add when there's more to it. HTH, A. __ 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/ -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 =-=-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.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] page check :: ~dL [continued]
~davidLaakso wrote: ~davidLaakso wrote: A page check of this test page with whatever you're running is appreciated. But when push comes to shove it's all versions of ie she hopes to please. http://www.chelseacreekstudio.com/ca/auto/ Thanks to all who took time to offer comments and suggestions both on and off list. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering images
Diane Ross wrote: #main {overflow: hidden; margin: 0; } * html #main {overflow: visible; height: 1%; } * html #sidebar {overflow-x: hidden;} I'm not quite sure if I should remove clear from the hr and add a clear class if needed or add the corrected css you suggested above. Or do I really need hr in my style sheet? I can't say what you need, since that's purely a design-choice. I most often add a top or bottom border to a suitable element, or maybe a padding with a background-image, as visual separator. I always check that my designs/layouts makes sense when CSS is turned off or not supported, and that affects my own design-decisions. Since your page... http://www.test.entourage.mvps.org/atest/ ...is already broken in IE6, I suggest you add the extra css to the bottom of your stylesheet - and both the clearing hr problem and IE6' bugs will be gone. You can always remove those few lines later - especially if you comment them clearly so you know why you put them there and what they are supposed to achieve. From there you can keep on learning about things like... - 'Block formatting contexts' http://www.w3.org/TR/CSS21/visuren.html#q15 - 'hasLayout' http://www.satzansatz.de/cssd/onhavinglayout.html - 'Collapsing margins' http://www.w3.org/TR/CSS21/box.html#collapsing-margins ...and other factors that will regularly affect your layouts. Where I get myself into trouble is I use examples from another site (I try to 'borrow from the best) and I don't know enough to understand all the attributes they have added to the style. Borrowed code can be troublesome that way. It is often page/site specific, and can contain properties that doesn't do any good in your cases. Also: each designer has his/her own preferences, and may use, misuse and abuse properties in a multitude of ways. May work fine for them and it may even be perfectly in accordance with the W3C-specs, but it sure can lead less experienced designers out on pretty thin ice at times. There are also loads of articles and sites around with poorly tested, incomplete, and also many completely wrong, solutions around. Some articles and code-examples are just old - and may be excused as long as one can sort them out. Some designers may ignore both specs and many major browsers, and give you something that only works in _their_ preferred browsers. Add lack of, or weak, standards-support in all browsers - even the latest versions, and a number of browser-specific bugs, and borrowing can really create problems. You'll really only learn in any depth when you create a number of your own, smaller, test-cases/pages and run the borrowed code/examples through its phases in all major browsers and learn how both code and browsers work - instead of just plugging borrowed code into larger layouts and hope you're lucky. It is also important to check how each property _should_ be used, and what it is _supposed_ to do (and if the one you borrowed from got it right), by checking what the specs say about that property. The 'CSS 2.1 Specification' covers the most essential parts... http://www.w3.org/TR/CSS21/ ...and you should take time to study the entire set of documents. There's a lot to study, but you don't have to go through it all at once. (I personally find it easier to read the specs, than I find most of the articles that try to simplify the stuff.) Here's a good place to start... http://www.w3.org/TR/CSS21/visuren.html Is this OK? .clear-both { clear: both; } Sure - that is a normal clearing class. As an example - I keep these classes in my stylesheets... /* high specificity clearings */ .left {clear:left!important; } .right {clear:right!important; } .both {clear:both!important; } .none {clear:none!important; } ...and add the suitable one when I need to add 'clear' to an element - in cases where it isn't more naturally to add the 'clear' property to an existing id or class for an element. Needless to say that I don't need the exemplified classes all that often, but once or twice in a page is quite normal. 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] Centering images
On 1/13/07 3:27 PM, david [EMAIL PROTECTED] wrote: I'm not quite sure if I should remove clear from the hr and add a clear class if needed or add the corrected css you suggested above. Or do I really need hr in my style sheet? I don't think you need HR in your HTML unless you want to have a horizontal rule there when visitors have CSS turned off. You can use CSS to add a bottom border to the element above the rule instead. I've eliminated the hr for now. You guys are great!! -- Diane __ 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] Can't assign links specific styles
Skip Evans wrote: Any other ideas? You have the class on the anchor itself - *not* the anchor inside an element with the class. Also I miss the :link pseudo-class. You should write... a.shoplogo:link, a.shoplogo:visited { stuff } a.pagelink:link, a.pagelink:visited { stuff } ...etc. http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes 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] Can't assign links specific styles
Do you have a URL we can look at? ~ Tim tjameswhite.com'http://www.tjameswhite.com;tjameswhite.com - Original Message From: Skip Evans [EMAIL PROTECTED] To: Fora [EMAIL PROTECTED] Cc: CSS Mailinglist css-d@lists.css-discuss.org Sent: Saturday, January 13, 2007 7:59:31 PM Subject: Re: [css-d] Can't assign links specific styles Hey Fora, I tried what you have below and got the same results. Any other ideas? Thanks! Skip Fora wrote: Hi Skip, I'm not quite sure, but it looks to me like you're missing a specification in your a:visited. Now you have .shoplogo a, a:visited { stuff } The .shoplogo is not inherited so your a:visited is refering to ALL a:visited anchors. Try with .shoplogo a, .shoplogo a:visited { stuff } .pagelink a, .pagelink a:visited { stuff } I'm sure people will correct me if I'm wrong, or add when there's more to it. HTH, A. __ 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/ -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 =-=-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.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/ Have a burning question? Go to www.Answers.yahoo.com and get answers from real people who know. __ 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] Centering images
On 1/13/07 4:52 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Since your page... http://www.test.entourage.mvps.org/atest/ ...is already broken in IE6, I suggest you add the extra css to the bottom of your stylesheet - and both the clearing hr problem and IE6' bugs will be gone. You can always remove those few lines later - especially if you comment them clearly so you know why you put them there and what they are supposed to achieve. I'll add these. My audience is for Mac users. I'm a one pony show. I have a FAQ page for a Mac application, Microsoft Entourage. I do realize that many users search the site at work on their pcs so I do want the site to work in all browsers. As an example - I keep these classes in my stylesheets... Thanks! I'll add these. -- Diane __ 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 Windows): an image's position:fixed is not fixed
On Jan 14, 2007, at 8:06 AM, Christian Kavanagh wrote: http://www.polarissc.com/whowehelp.html This IMG is fixed to the bottom of the screen in Safari on my Mac, but is at the top of the screen (and incidentally is a weird color) in IE6/Win. img src=images/gradient.png width=100% height=258 style=position: fixed ; bottom: 0; left: 0 ; z-index:1 ; / IE 6 doesn't support position:fixed. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (IE6 Windows): an image's position:fixed is not fixed
and it also don't support png tranparency (but you can search for ways to do this). On 1/14/07, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Jan 14, 2007, at 8:06 AM, Christian Kavanagh wrote: http://www.polarissc.com/whowehelp.html This IMG is fixed to the bottom of the screen in Safari on my Mac, but is at the top of the screen (and incidentally is a weird color) in IE6/Win. img src=images/gradient.png width=100% height=258 style=position: fixed ; bottom: 0; left: 0 ; z-index:1 ; / IE 6 doesn't support position:fixed. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ 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] min-height: which one does it right FF2 or IE7?
On Jan 14, 2007, at 5:43 AM, Bruno Fassino wrote: Michal Cizmazia wrote: http://cim.szm.sk/min-height.html My question is: Which browser does it right, FF2 or IE7? -- Text of my test case: CSS 2.1 Specification: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') It seems to me, that the expression this element refers to the containing block (black border) not the generated box (orange background). Hmmm, no, I think this element is the element having the min-height declaration, so in your case the orange one, not the containing block. That sentence in the spec is about the same as for the 'height' case, where there is also the following clarification: Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. According to my understanding this clarifies that absolutely positioned refers to the element having the [min-]height property, not to the containing block. So the Firefox behaviour that your test case shows seems somewhat incorrect to me. Firefox 2.0, the latest trunk Gecko builds and the latest nightly builds of WebKit (Safari) all make the orange box the height of the parent box. iCab 3.0 also makes the orange box the size of the black-bordered box in both cases. It seems related to the fact that your containing block has both top and bottom specified, and this is more or less equivalent to having a height specified. Indeed if you remove the bottom property and add some content to your contaning block (so that its height becomes dependent on this content), then _only_ the case with position:absolute on the orange box causes the orange box itself to stretch. And if you leave the bottom property in, but add some content to the absolute positioned box, the a.p. box will be sized accordingly (the same as in http://cim.szm.sk/min-height.html) - computed height: 65px on my side, but the content will overflow. The orange box will take the height (65px) of the parent. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] page check please
Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry __ 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] page check please
Jehangir Larry wrote: Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry Larry, I think it is probably working as you intend in ie7.0 and the latest versions of ff and opera. IE 6 and down do not support position fixed so problems are anticipated there. The flower image works on hover but not the header image on hover. There is left column float drop in ie/6.0-- probably due to the horizontal padding on the width bearing right column. Moving that padding to the inside elements might help (although others on the list may have an easier css work around). The page is against the left rail in ie5 and 5.5. Try adding text-align: center; to the body declaration. And text-align: left; to #wrap. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The endless search of the holy grail
Frando (Franz Heinzmann) wrote: I am in search of a layout technique for the following situation: [snipped] Does anyone here know of the perfect technique for these requirements? The One Link that solves my problems? Don't think there is *one* solution that covers all, but when I mixed my own preferences into the 'holygrail' from ALA, I at least got a somewhat working solution that isn't too heavy. Only tested quickly in Firefox 2.x, Opera 8.x 9.x, Safari 2.x and IE6, and have no idea what IE7 makes out of it. Maybe someone will enlighten me :-) At least it is quick to switch between columns, as one only has to comment out one line and set the non-existent column to 'display' none to make that happen. More variations on the subject is of course possible. Test-examples: 3-col: http://www.gunlaug.no/tos/alien/test_07_1600.html 2-col #1: http://www.gunlaug.no/tos/alien/test_07_1602.html 2-col #2: http://www.gunlaug.no/tos/alien/test_07_1604.html I added in a 'min/max-width expression'[1] for IE6, and an important part of my preferences is to 'keep IE6 in quirks mode'[2] - to make sure it works. The 'equal height' columns solution should be trouble-free, as it is the 'borders as background' solution I have used for years. The rest may need a bit more testing and refinement - and some (soul) searching ;-) regards Georg [1]http://www.gunlaug.no/contents/wd_additions_14.html [2]http://www.gunlaug.no/contents/wd_additions_16.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/
[css-d] How to construct a 3 Column layout to a centered Page Layout
Hi All, I have a page here that at present looks okay in FF 2.x / IE7 don't have other browsers on which to check. I have read extensively articles, looked at code and looked at the websites others are building who are on this list. I am used to doing everything in tables, but CSS looks more interesting but so much to learn for a newbie. Guess I am trying to walk before I crawl in the CSS world. http://www.alistapart.com/ http://glish.com/css/7.asp My first attempt at CSS (code copied from 7.asp, refined to what I want) is here and have validated the CSS, the html is not strict to a tag in hr width=50% but not worried about that. www.oneyed.com/mt www.oneyed.com/mt/scripts/css/mt_layout_1.css The current layout I have is okay for what I want to do at present, but how can I format this current page using CSS to look similar to this layout (www.oneyed.com/mt/LayoutGala07.html) without breaking everything and still using the same CSS code I have at present. How can I using the present code specify a minimum height for the left / right content area's. I still don't quite understand the difference between wrapper / container and the use of float in the code. I try to experiment and get frustrated. What would be a good book for me to go and buy to use as reference and online references, besides this list. Thanks in advance for any help and pointers. Kind Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to construct a 3 Column layout to a centered Page Layout
I've read, enjoyed, and learned from both Head First HTML with CSS HTML and CSS Mastery. CSS Mastery assumes you know a good chunk of CSS while the Head First book will teach you the correct way to code X/HTML using CSS and gives you the correct usage of tables. If you already know some HTML the Head First book is a good refresher HTML course while including the correct way to use CSS. Mike -Original Message- What would be a good book for me to go and buy to use as reference and online references, besides this list. Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/