Re: [css-d] css validation help
Vincent Pollard wrote: Hi everybody, So my css and xhtml almost validate, except for two things: 1) The third line here validates in CSS3 but not in CSS2.1 - a) does that matter? Erik Vorhes has already stated that it doesn't matter. b) the overflow-y is the only way I've found to stop the page jumping around in IE8. Maybe somebody else has a better solution? html { /* forces scrollbar visible to prevent position jumping in Firefox */ height: 100%; margin-bottom: 1px; overflow-y: scroll /* forces scrollbar visible to prevent position jumping in IE8 */ } We would need to see a test case here. It may be IE8 following CSS2.1 to the letter or handling invalid XHTML differently. Get your XHTML valid. My style rules for IE6 using the underscore hack, e.g.: ..threeColLeft { _display: inline; } I didn't really want to create a separate stylesheet for IE6 but maybe I should if I want validation. What would you do? Replace the above with, * html .threeColLeft { display: inline; } This is valid but should never select anything but IE6 or lower have an element outside the html. Chris Wilson of MS was the one who coded it in trident (IE rendering engine) in the 1990s. Any help, advice, comments or suggestions - and please no abuse about using hacks in the first place - would be gratefully received. Hack the older browsers by CSS that no browser should use. The above works in IE6. This one works in IE7. *+html .threeColLeft { display: inline; } This bug or whatever is not present in IE8. Never use unsupported selectors to target specific browsers. This one I used with Safari 3 to target it. *:not(:root)~html #wrapper2+div[id*=]:not(:first-child)* Now Safari 4 does not honor empty attribute substring selectors like it's cousin Firefox. All such hacks will eventually fail as browsers support of CSS improves or if other implementors change course. The best way is to only hack IE7 or lower since all modern browsers (including IE8) should render a page the same way. I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. P.S. what really are the advantages of being compliant? I hear it's better for SEO and I like the idea, just from a professional pride POV but why be compliant. Do a couple of underscore hacks pose a problem? This has no affect with SEO (which is off-topic here). The underscore hack just invalidates the CSS. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed or float?
Bobby Jack wrote: --- On Thu, 7/16/09, Alan Gresley a...@css-class.com wrote: Bobby Jack wrote: ... and an appropriate z-index :) None is required for position: fixed. You're positioning, not layering (altering the paint order). Not if there's a relatively-positioned element on the page, in my experience: http://www.fiveminuteargument.com/fixed-position-z-index Is this a bug or expected behaviour? - Bobby Hello Bobby, This is indeed expected. You are partly correct and thank you for catching me out. I never considered that the original poster (Ellen) had anything else positioned. The behavior which you have linked to is demo'd here. http://css-class.com/test/css/visformatting/layers/pos-ab-and-pos-rel-layer1.htm By changing the source order of the HTML alone will paint the flow of elements differently. http://css-class.com/test/css/visformatting/layers/pos-ab-and-pos-rel-layer2.htm Source ordering (visually layering / painting) can be achieved without any absolute positioning or z-index. http://css-class.com/test/css/shadows/source-ordered-box-shadow.htm Absolute or fixed positioning establishes a new 'Block Formating Context' [1]. Relative positioning establishes a 'Containing Block' and in some cases a new 'Block Formating Context' [2] [3]. None of this changes the painting order (layer) which is painted by order of the flow. Z-index creates a new 'Stacking Context' [4]. You are confusing this with the natural painting order generated by elements in the normal flow. 1. http://www.w3.org/TR/CSS21/visuren.html#block-formatting 2. http://www.w3.org/TR/CSS21/visuren.html#containing-block 3. http://www.w3.org/TR/CSS21/visuren.html#relative-positioning 4. http://www.w3.org/TR/CSS21/visuren.html#layers BTW, I, others on this list and those on the CSS working group list tackled such terms as 'painting order', 'stacking order', 'stacking context' and 'block formatting context' in 2007 (I'm still somewhat confused). Ingo Chao seemed to have visualized this stacking / painting dilemma quite well and I guess what is in the spec regarding all this is just left as it is. Rewriting the specs to conform to how browsers handle this stacking / painting is a challenge that none have ventured near. Enough said. I will leave this to some else to explain better. ;-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] color and background of list markers
Jack Bates wrote: Is it possible with CSS - possibly CSS 3 - to apply style to the things which mark list items? I have an ordered list, so list items are marked with 1., 2., etc. I want to make those numbers white on a blue background, and I don't want to change the style of the actual list items (want to leave the actual list items black on a white background) The only way I know involves adding a SPAN or other in-line element to wrap the content of each list item. Viz: HTML ul lispan ... content ... /span/li lispan ... content ... /span/li lispan ... content ... /span/li . . /ul CSS ul { color: white; background: blue; } li span { color: black; background: white; } Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] color and background of list markers
On Jul 17, 2009, at 3:08 PM, David Hucklesby wrote: Is it possible with CSS - possibly CSS 3 - to apply style to the things which mark list items? I have an ordered list, so list items are marked with 1., 2., etc. I want to make those numbers white on a blue background, and I don't want to change the style of the actual list items (want to leave the actual list items black on a white background) The only way I know involves adding a SPAN or other in-line element to wrap the content of each list item. Viz: HTML ul lispan ... content ... /span/li lispan ... content ... /span/li lispan ... content ... /span/li . . /ul CSS ul { color: white; background: blue; } li span { color: black; background: white; } Counters will do what you want, whit lots of possibilities regarding styling. http://www.w3.org/TR/CSS21/generate.html sample page http://dev.l-c-n.com/css2/counters-Ordered_list.html But not in IE 6 7. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
Lorraine Barte Nepomuceno wrote: Hi guys, So far, I've tested this layout in Mac Firefox Safari, and Windows Firefox IE8. I'd love any feedback you might have- especially viewed in other browsers and resolutions. http://www.splashscreen.com/sample/sample.html Thanks very much, Lorraine Right column float drop at 800 in all compliant browsers. Right column float drop at 640 in all compliant browsers; and, left-column nowhere to be found. All browsers render the rivers-- they are more pronounced with font-scaling, making the text unreadable. Left column crossing over the center column in IE/7. The columns are rail to rail in IE/6; the left column is touchy sometimes dropping on a drag in the 1680 to 1280 range; left column crosses over center column at 640. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css validation help
On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresleya...@css-class.com wrote: The best way is to only hack IE7 or lower since all modern browsers (including IE8) should render a page the same way. I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. Alan, Decentralization of CSS may sometimes pose an issue, but using conditional comments for IE isn't actually a hack. It's using a proprietary Microsoft extension; every other browser simply treats conditional comments as regular comments. The additional benefit of conditional comments is that you can use other proprietary Microsoft CSS extensions (e.g., zoom and various JScript expressions) within them without causing your code to invalidate. I'd actually argue that if your conditional IE 6-7 CSS files are so big as to be unmaintainable, it's probably time to revisit how you're doing your CSS to begin with. Erik __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
On Fri, Jul 17, 2009 at 10:18 PM, David Laakso da...@chelseacreekstudio.com wrote: David Laakso wrote: Lorraine, Getting your page functional in IE 6/7 required hacking it from here to Havana. And it still was not right. If you need to keep your current markup, then someone else on the list may provide a better solution than I could. If, on the other hand, you can live with a different layout structure and faux columns, it's a breeze to pull-off without any hacks. Please see: http://chelseacreekstudio.com/ca/cssd/tres.html Checked in: IE 6/7/8. opera/10b, ff/3.5, ff/2x, safari, camino, seamonkey, and chrome. Best, ~d Thank you, David! That was based on AListApart's Holy Grail, which I thought I'd try using. I usually stick to Layout Gala's or IronMeyers. But thank you, thank you for that link. I am most grateful. :) Lorraine __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background images not displaying in IE 7
I'm working on getting a test site up, but in the meantime I was hoping someone could look over my code quickly and see if anything jumps out as possibly causing this bug. My background images aren't showing up in IE 7. They work perfectly fine in both Safari and Firefox. I've looked over the code endlessly and tried a lot of different hacks from online forums, but nothing has worked yet. I've tried many times to change the position of the #indexjacket element, which is not showing up, with no success. The #textstrip element is also not appearing, although the #indextext one is. Any ideas?? Here's the HTML: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=UTF-8 / title- Welcome -/title link href=wto.css rel=stylesheet type=text/css / /head body div id=indexjacket div id=textstrip p id=opena href=toc.htmlOpen/a/p /div div id=transbox/div div id=indextext/div /div /body /html And the CSS: body { background-color:#413a19; } #indexjacket { background: url(images/indexbkgd.jpg); width:990px; height:726px; margin:0 auto; margin-top:40px; z-index:1; position:relative; } #textstrip { background: url(images/textstrip.jpg); width:1014px; height:156px; position:absolute; top:445px; left:-10px; z-index:2; } #transbox { background-color:#66; width:493px;; height:379px; filter:alpha(opacity=50); /* for IE */ opacity:0.5; z-index:3; position:absolute; top:255px; left:39px; } #indextext { background: url(images/indextext.png); width:465px; height:357px; position:absolute; top:265px; left:49px; z-index:4; } #open { font-family: orator std, courier; font-size:3em; position:absolute; right:25px; bottom:0px; padding:0; margin:0; } #open a:link {text-decoration:none; color:#fffde8;} #open a:visited {text-decoration:none; color:#fffde8;} #open a:hover {color:#32;} Thanks for looking!! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css validation help
Erik Vorhes wrote: On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresleya...@css-class.com wrote: The best way is to only hack IE7 or lower since all modern browsers (including IE8) should render a page the same way. I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. Alan, Decentralization of CSS may sometimes pose an issue, but using conditional comments for IE isn't actually a hack. It's using a proprietary Microsoft extension; every other browser simply treats conditional comments as regular comments. The additional benefit of conditional comments is that you can use other proprietary Microsoft CSS extensions (e.g., zoom and various JScript expressions) within them without causing your code to invalidate. Hello Erik, This is still hacking HTML for IE7 or lower due to lack of support for CSS2.1. My CSS and hacks are *centralized* as oppose to being *decentralized* in the HTML. They can be removed in a flash. I'd actually argue that if your conditional IE 6-7 CSS files are so big as to be unmaintainable, it's probably time to revisit how you're doing your CSS to begin with. Erik This is how I now serve IE7 or below my special CSS. http://css-class.com/test/css/selectors/ie/import-hacks.htm My regular CSS, http://css-class.com/test/epsilon-0-1.css and IE7 fixes. Yes there were IE8 beta fixes to. http://css-class.com/test/test-ie-all.css My CSS is never unmaintainable, but rather a bit to nasty for the browsers to handle. CSS could be much more simpler with much lest ids' and classes' in the HTML code and the use of sibling, structural pseudo and attribute selectors. http://css-class.com/test/css/selectors/ These selectors and minimal use of ids' and classes' in the HTML is demo'd here. http://css-class.com/test/epsilon.htm This demo holds quite well together in IE7. It even looks better in IE5/Mac than it does in IE6. I not here to support IE6 or any other antiquated browsers. My CSS is hopefully a glimpse into the future. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Columns flying around!
Hello, I was editing the front page of my website: http://klikerlab.pl/wordpress/ trying to fit the post info (category, author, date, etc.) into the third column. When I copied the tags from the article to the third column, the third and fourth column dropped down. They are not wider than necessary, so maybe I forgot to close one div? I was checking it in Notepad++ but I haven't found any open div... Here is how they should look like - 1st column - a picture 2nd column - the blog post 3rd column - rss icon, a logo image, and meta data about the post 4th column - excerpt of the post and archives Also, the footer is now above the 3rd and 4th column, but below the first two... Thanks for any ideas! Ania __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background images not displaying in IE 7
Ellen Heitman wrote: I'm working on getting a test site up, but in the meantime I was hoping someone could look over my code quickly and see if anything jumps out as possibly causing this bug. My background images aren't showing up in IE 7. They work perfectly fine in both Safari and Firefox. I've looked over the code endlessly and tried a lot of different hacks from online forums, but nothing has worked yet. I've tried many times to change the position of the #indexjacket element, which is not showing up, with no success. The #textstrip element is also not appearing, although the #indextext one is. Any ideas?? Here's the HTML: Dunno, unless you already fixed it and kept it a secret. And you'll likely get more response if you actually brake-down and put your stuff on a server. All three background images show up on this end [1] in IE 6/7/8 (IE Tester/Parallels/Mac 10.4). Opacity is not supported in Mac Opera/10.4; consequently, the block #transbox is a no-show. However, it does show in PC Opera/9.60. Validate the markup: you've got a mangled thing. [1] http://chelseacreekstudio.com/ca/cssd/ellen.html __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Columns flying around!
Andzia wrote: Hello, I was editing the front page of my website: http://klikerlab.pl/wordpress/ trying to fit the post info (category, author, date, etc.) into the third column. When I copied the tags from the article to the third column, the third and fourth column dropped down. They are not wider than necessary, so maybe I forgot to close one div? I was checking it in Notepad++ but I haven't found any open div... Here is how they should look like - 1st column - a picture 2nd column - the blog post 3rd column - rss icon, a logo image, and meta data about the post 4th column - excerpt of the post and archives Also, the footer is now above the 3rd and 4th column, but below the first two... Thanks for any ideas! Ania I may be missing something, but it looks pretty much the way you describe it all my browsers. The exceptions are IE 6/7: the footer/nav is broken. The page had a number of markup errors several days ago when I looked at it. And it still has errors. Might be worthwhile to validate... __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width:100%; not rendering 100%
Hi, I've got a page with two divs, one over the other, both set to 100% width. The one on the top is positioned absolute at 0,0. The one under it is a nav bar using the sliding window tabs and it's positioned float:left. The one on the top is rendering to 100% width while the one under it is not; leaving margins on both the left and right. I got it to render close to correct by setting the left-margin to -7px and the width to 101.5% but as I increase the window width the bottom scroll bar appears due, I guess, to the percentage getting 'out of whack'. At any rate, I'm pretty sure that's not the best way to fix it anyway. Could someone please tell me why it's happening and the right way to fix this? The page is at http://ec2-75-101-179-238.compute-1.amazonaws.com Thanks in advance! Bill __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] width:100%; not rendering 100%
On Fri, Jul 17, 2009 at 1:32 PM, bill waltonbwalton...@gmail.com wrote: I've got a page with two divs, one over the other, both set to 100% width. The one on the top is positioned absolute at 0,0. The one under it is a nav bar using the sliding window tabs and it's positioned float:left. The one on the top is rendering to 100% width while the one under it is not; leaving margins on both the left and right. You need to add this to your CSS: body { margin: 0; padding: 0; } Then width: 100% should render the same on both divs. Erik __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Unordered List Issue?
We solved the issue. Debug Bar for IE7 helped me track the issue down to a style sheet that was only be referenced for a very specific part of the site and it turned out that there had been a width assigned to the unordered list for that particular layout. Once that was removed everything worked fine. Thanks for your help everyone. -- Chasity McWilliams-Moody Web Developer Terry College of Business Office of Marketing and Communications W:(706)542-0601 F:(706)542-9473 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% body height not expanding beyond viewport
This is probably basic, but it has me stumped at the moment. I have a design where the body background is a single color and then there is a wrapper around the content which is centered on the page. The background of that wrapper is white and is supposed to extend the full height of the page - even if the content itself does not. So, my CSS looks like this . html, body { height: 100%; background: #d0dce7; } #bodyWrap { position: relative; width: 90%; margin: 0 auto; max-width: 1276px; min-width: 796px; min-height: 100%; } * html #bodyWrap { height: 100%; background: #ff; } Now, when the context does not extend the full height of the viewport, this works just fine. The bodyWrap div extends the full height of the view port and there is this nice white column going the full height of the page with blue side bars. The issue is when the content extends beyond the height of the viewport. Then, the bodyWrap div extends with the content like it should. However, the body element, or at least the background color does not extend - it stops at the height of the view port. Can somebody help me out with what I am missing here? Thanks -- Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Columns flying around!
Yes, because I repaired it somehow... I had a moment of enlightenment ;) sorry for panicking about this too early. I know that there are some errors and probably too much unnecessary code... I will try to clean this up. I should also align the columns to the top of their container (so the article's title would be aligned to top of the chicken illustration and the excerpt)... thanks anyway. 2009/7/17 David Laakso da...@chelseacreekstudio.com Andzia wrote: Hello, I was editing the front page of my website: http://klikerlab.pl/wordpress/ trying to fit the post info (category, author, date, etc.) into the third column. When I copied the tags from the article to the third column, the third and fourth column dropped down. They are not wider than necessary, so maybe I forgot to close one div? I was checking it in Notepad++ but I haven't found any open div... Here is how they should look like - 1st column - a picture 2nd column - the blog post 3rd column - rss icon, a logo image, and meta data about the post 4th column - excerpt of the post and archives Also, the footer is now above the 3rd and 4th column, but below the first two... Thanks for any ideas! Ania I may be missing something, but it looks pretty much the way you describe it all my browsers. The exceptions are IE 6/7: the footer/nav is broken. The page had a number of markup errors several days ago when I looked at it. And it still has errors. Might be worthwhile to validate... __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tool to display web pages in various browsers, OSs and resolutions?
Is there an online tool which will show you how your webpage looks in the various browsers, in the various OSs at the various screen resolutions? I remember seeing something several years ago. I thought it was linked from maxdesign.com.au. But I can no longer find it. Free is better if possible. I remember the old tool had a free period before pay kicked in THANKS! Don Spark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tool to display web pages in various browsers, OSs and resolutions?
Don Spark wrote: Is there an online tool which will show you how your webpage looks in the various browsers, in the various OSs at the various screen resolutions? http://www.browsercam.com/Default2.aspx And there are many others. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
David Laakso wrote: Lorraine Barte Nepomuceno wrote: Hi David, Can you reload the page? I've made some changes (I think my calculations for layout size were wrong :-))... please let me know if it's better now: http://www.splashscreen.com/sample/sample.html thanks very much Lorraine Lorraine, Getting your page functional in IE 6/7 required hacking it from here to Havana. And it still was not right. If you need to keep your current markup, then someone else on the list may provide a better solution than I could. If, on the other hand, you can live with a different layout structure and faux columns, it's a breeze to pull-off without any hacks. Please see: http://chelseacreekstudio.com/ca/cssd/tres.html Checked in: IE 6/7/8. opera/10b, ff/3.5, ff/2x, safari, camino, seamonkey, and chrome. Best, ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image shift in IE6
Hi folks, Please take a look at http://www.savvyrest.com/products/organic-mattresses in Firefox vs IE6. The active tab background image appears to shift in IE6 about 25 pixels vertically. Any ideas? Thanks so much, -- Dan Katz http://www.linkedin.com/in/mtndan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% body height not expanding beyond viewport
This has not appeared on the list yet, so I apologize if it ends up duplicated. Thx. From: Jeff Chastain [mailto:li...@admentus.com] Sent: Friday, July 17, 2009 4:01 PM To: 'cs...@css-discuss.org' Subject: 100% body height not expanding beyond viewport This is probably basic, but it has me stumped at the moment. I have a design where the body background is a single color and then there is a wrapper around the content which is centered on the page. The background of that wrapper is white and is supposed to extend the full height of the page - even if the content itself does not. So, my CSS looks like this . html, body { height: 100%; background: #d0dce7; } #bodyWrap { position: relative; width: 90%; margin: 0 auto; max-width: 1276px; min-width: 796px; min-height: 100%; } * html #bodyWrap { height: 100%; background: #ff; } Now, when the context does not extend the full height of the viewport, this works just fine. The bodyWrap div extends the full height of the view port and there is this nice white column going the full height of the page with blue side bars. The issue is when the content extends beyond the height of the viewport. Then, the bodyWrap div extends with the content like it should. However, the body element, or at least the background color does not extend - it stops at the height of the view port. Can somebody help me out with what I am missing here? Thanks -- Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% body height not expanding beyond viewport
Jeff Chastain wrote: This is probably basic, but it has me stumped at the moment. Thanks -- Jeff Same here. Put your stuff on a public server and provide a clickable link to it in your post to the list. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 float problem
Hi, I have a page that displays appropriately in Firefox, Safari, Ie 7 + 8 but, according to browsershots, is not displaying properly in Ie6. A sample page with the problem can be found at: http://www.web-devel.co.nz/myvreo/test.html Note: The other links should take you to a login page because the page would normally be visible only to users that have logged in. The line beneath the tabbed menu contains an image, a menu list (add New Buyer, etc) and a search form. They line up correctly in the modern browsers but in ie6 (according to browsershots) the search form is to the left and above the image and menu instead of being on the right. The image is floated left of the ul menu and the form is floated right. I've validated the html and the css and there doesn't appear to be any errors that are associated with the problem. I'm pulling my hair out trying to sort the problem out because I can only check changes via browsershot and the turn-around is quite slow (and so far unproductive). Help greatly appreciated. Regards Richard __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/