Re: [css-d] Fluid Page + Centered 80% Div + Thumbnails
Court Kizer wrote: Here's a screenshot to give you an idea... http://courtkizer.com/screenshots/Untitled.png Something like this?: ~~~ !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd' html head meta http-equiv='content-type' content='text/html;charset=utf-8' meta http-equiv='X-UA-Compatible' content='IE=8' titleGallery/title style type='text/css' /* RESET */ ul,li{list-style:none;margin:0;padding:0;} /* GALLERY */ ul{margin:0 auto;text-align:center;width:80%;} li{height:200px;text-align:center;width:200px;} li{display:-moz-inline-box;display:inline-block;display:inline!ie;zoom:1;} /* DEMO */ ul{background:#009;} li{background:#090;} /style /head body ul lipic/li lipic/li lipic/li lipic/li lipic/li lipic/li /ul /body /html ~~~ -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] IE 6 layout issues
David Bailey wrote: Hi, I've got a couple of problems with IE 6 (and probably other versions, I don't have other IE browsers in order to check) which all work fine in Safari and FF. I've struggled with this for a few hours now, and looked for answers, but to no avail. http://www.widemannviolins.com/index.php 1. Text content: The text drops down below the image on the right instead of being parallel to it. I'm sure I've seen something about this problem before in one of my books, but I can't find it for the life of me. What text content are you referring to? Both IE6 and other browsers show the image on the right (a man) quite parallel to any text that I can see. 2. Stripes: The gray stripes under the navigation bar at the top and the bottom redish band at the bottom drops too low (the bottom one gets tangled with the footer text. This is interesting, still analyzing why. The fix is to give the div#footer hasLayout [1]. #footer { /* hasLayout trigger */ height:1%; } 3. The Main Nav bar text: I have used WebAssist's CSS MenuWriter for this (I thought it would save time!). I am having trouble getting this to work well. Apparently IE requires width and height to be declared rather than auto. Is there any way to get this looking like it does in Safari and FF? It's got it's own its own stylesheet: http://www.widemannviolins.com/ CSSMenuWriter/cssmw/menu_ie.css The main style sheet is: http://www.widemannviolins.com/styles/ layout.css Any help is much appreciated, David The IE6 style sheet has the text with this color ul#cssmw li span a {background-color: #7D201C;} but in the main style sheet you the same color as the background color of the div#mainNav. #mainNav {background-color: #7d201c;} There is possibly other issues with this menu and IE6. The above should give you a start. 1 http://www.satzansatz.de/cssd/onhavinglayout.html -- 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] IE8 is it a improvement over IE7?
I would just like to know if IE8 is an improvement over IE7? __ 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] IE8 is it a improvement over IE7?
From: Christopher R majes...@thecreativesheep.ca To: CSS-D css-d@lists.css-discuss.org Sent: Tuesday, May 05, 2009 11:57 AM Subject: [css-d] IE8 is it a improvement over IE7? I would just like to know if IE8 is an improvement over IE7? It is. -- Al Sparber - PVII http://www.projectseven.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] IE8 is it a improvement over IE7?
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Christopher R Sent: 05 May 2009 16:58 To: CSS-D Subject: [css-d] IE8 is it a improvement over IE7? I would just like to know if IE8 is an improvement over IE7? Before you incur the wrath of the moderators this is off topic, but safe to say that IE8 is a big improvement on IE7. Best Ian Young IY e-Solutions __ 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] IE8 is it a improvement over IE7?
Christopher R wrote: I would just like to know if IE8 is an improvement over IE7? I would say that with CSS2.1, IE8 is in most ways more standard compliant than Firefox, Safari and Opera (in that order). IE7 can now be seen as one buggy browser. All of the IE6 bugs but with bigger bolts to hold most of the together and when the bolts come undone, IE7 weirdness is the result. Never shall we again call IE8 that browser. -- 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] IE 6 layout issues
Alan Gresley wrote: David Bailey wrote: Hi, I've got a couple of problems with IE 6 (and probably other versions, I don't have other IE browsers in order to check) which all work fine in Safari and FF. I've struggled with this for a few hours now, and looked for answers, but to no avail. http://www.widemannviolins.com/index.php 1. Text content: The text drops down below the image on the right instead of being parallel to it. I'm sure I've seen something about this problem before in one of my books, but I can't find it for the life of me. What text content are you referring to? Both IE6 and other browsers show the image on the right (a man) quite parallel to any text that I can see. Alan, I wonder if he is referring to the white space beneath Tobias in compliant browsers in an 800 window, or in any width window when the fonts are scaled; and that this white space also appears beneath Tobias in IE/8 and down, regardless of the widow width? In other words, is Tobias supposed to resting at the bottom bar regardless of window size or user font preference? __ 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 layout issues
Alan Gresley wrote: This is interesting, still analyzing why. The fix is to give the div#footer hasLayout [1]. #footer { /* hasLayout trigger */ height:1%; } And here is a test case. http://css-class.com/test/bugs/ie/ie6-background-image-drop.htm This bug in IE6 is a combination of the first child element of the parent element being floated. It seems that the background image of the parent element drops to the level of the second child element. I have never seen this bug. -- 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] IE 6 layout issues
David Laakso wrote: Alan Gresley wrote: David Bailey wrote: [..] http://www.widemannviolins.com/index.php 1. Text content: The text drops down below the image on the right instead of being parallel to it. I'm sure I've seen something about this problem before in one of my books, but I can't find it for the life of me. What text content are you referring to? Both IE6 and other browsers show the image on the right (a man) quite parallel to any text that I can see. Alan, I wonder if he is referring to the white space beneath Tobias in compliant browsers in an 800 window, or in any width window when the fonts are scaled; and that this white space also appears beneath Tobias in IE/8 and down, regardless of the widow width? In other words, is Tobias supposed to resting at the bottom bar regardless of window size or user font preference? Oh I see now (not a IE6 bug). Thank you David. It's collapsing margins from the list at the bottom of the content. They collapse through to div##rightColumn_hp since the image of Tobias is a float. The fix is to zero out that bottom margin. #rightColumn_hp ul { margin-bottom:0; } Just tested in Firefox. -- 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] IE 6 layout issues
David Bailey wrote: http://www.widemannviolins.com/index.php Suggestion: http://www.gunlaug.no/tos/alien/db/test_09_0507.html http://www.gunlaug.no/tos/alien/db/test_09_0507_files/layout00.css http://www.gunlaug.no/tos/alien/db/test_09_0507_files/menu.css http://www.gunlaug.no/tos/alien/db/test_09_0507_files/menu_ie.css 1. Text content: a: Do not declare backside margins on the #rightColumn_hp float, as it then becomes wider than 100% when IE's faulty percentage calculation kicks in. b: absolute position the .hp_img. 2. Stripes: Stiffen up #footer with a hasLayout trigger. 3. The Main Nav bar text: One can hardly make IE6 render like FF or Safari, but it can be prettied up a bit by adding em-width and other trimming. IE6/7 also needs help with correct stacking of absolute positioned elements - the dropdowns. I've included the most basic fixes in the suggestion above, compare with what you've got and implement as you like. Also included min-width fix for IE6, in case you want that. regards Georg -- http://www.gunlaug.no __ 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] link color not taking
http://74.53.228.210/~energist/index.php?option=com_contentview=articleid=22Itemid=27 Scroll to the bottom column to see the text code; if I use inline CSS I can get the link to correctly display as white. Capabilities - all 3 use the class, .module_column_heading_blue If not as a link, 2nd one, the color is fine, but dispite lots of fudging with the other 2, I cannot get it to recognize the font color in the stylesheet; it will see a background color, font sizes, etc, but not that pesky font color (looking at it with firefox. Here is the relevant CSS: .module_column_heading_blue { display:block; font-weight: bold; font-size: 2em; background: #5092c3; text-align:center; padding: .2em .0em; color: #fff; } .module_column_heading_blue a:link, .module_column_heading_blue a:active, .module_column_heading_blue a:hover, .module_column_heading_blue a:visited { color: #fff; font-size: 1.2em; background: #ff; } Why important - I am giving client access using tinymce, have set the style so that tiny lists it, but failure! -- Bob Meetin www.dottedi.biz 303-926-0167 On www.Twitter.com/bobmeetin, Facebook, www.linkedin.com/in/bobmeetin, or catch my blog at www.dottedi.biz/blog.php Standards - you gotta love em - with so many to choose from! __ 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] link color not taking
Bob Meetin wrote: http://74.53.228.210/~energist/index.php?option=com_contentview=articleid=22Itemid=27 Scroll to the bottom column to see the text code; if I use inline CSS I can get the link to correctly display as white. Look up CSS specificity if you are not yet familiar with it: http://htmldog.com/guides/cssadvanced/specificity/ In your CSS you have #ja-botsl a (template.css line 970) controlling that link color and setting it to gray. Your class name .module_column_heading_blue cannot assign the color white because the ID #ja-bots1 a has a specificity of 101 (100 + 1) and the classname .module_column_heading_blue has a specificity of 10. -Adam Ducker (http://adamducker.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] link color not taking
Bob Meetin wrote: http://74.53.228.210/~energist/index.php?option=com_contentview=articleid=22Itemid=27 Scroll to the bottom column to see the text code; if I use inline CSS I can get the link to correctly display as white. I forgot to offer a solution or advice before I sent that last e-mail. I would recommend removing the #ja-botsl a CSS styles and going with something much less specific and easier to override. Avoid applying CSS to ID tags whenever possible to avoid such issues. -Adam Ducker (http://adamducker.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] link color not taking
Bob Meetin wrote: http://74.53.228.210/~energist/index.php?option=com_contentview=articleid=22Itemid=27 Scroll to the bottom column to see the text code; if I use inline CSS I can get the link to correctly display as white. They are in the wrong order. Teset to: .module_column_heading_blue a:link, .module_column_heading_blue a:visited, .module_column_heading_blue a:hover, .module_column_heading_blue a:active { color: #fff!important; font-size: 1.2em; background: #ff; } __ 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] Stretching in IE7, even worse in IE6.
Hi, my name is Paul :) this is my first post - I'm new to CSS and I'm having some Internet Explorer positioning issues, I'd appreciate any help. In IE7 there is unwanted space occuring in the place where my images originally were before I positioned them. This extends the list well below the footer: www.blueprintdesign.ie Here's some CSS: ul#clients { position: relative; float: left; background: none; margin: -49px 40px 0 34px; padding: 0 0 0 0px; width: 48%; max-height: 2700px; } ul#clients li { padding: 0em; list-style-type: none; margin-bottom: 60px; } ul#clients li p { width: 280px; color: #FF; padding: 0px 0px 10px 32px; margin-right: 10px; margin-top: 10px; } ul#clients li p img { float: right; border-bottom: 2px solid #49; border-top: 1px solid #007DFF; padding: 34px 34px 34px 34px; margin: 0px -680px 100px 0; } Here's some IE conditional CSS that might be relevant: #content-main ul#clients li p img { margin: 10px -680px 10px 100px; width: 580px; padding: 34px 34px 34px 34px; float: right; } The issues with IE6 seem to affect every part of my design - it's hard to know where to start, but for now I would be grateful even just getting IE7 in order. Any comments, criticism or suggestions @ all are welcome! Thanks, Paul. Send instant messages to your online friends http://uk.messenger.yahoo.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/
[css-d] ie/8 max-width
When the page is dragged to a 640 window, the large image should reduce in both width and height. Our new found standard compliant friend, IE/8 does not seem to go along with the program in PC XP on a relatively fast dsl modem (the image in IE/8 at 640 is more square than rectangular). IE/7 is cooperating with this declaration: #d img {display : block; max-width : 96%; height: auto!important; margin-bottom : 16px;} http://chelseacreekstudio.com/ylaakso/yar/projects/k2.html Can anyone please confirm? ~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/
Re: [css-d] ie/8 max-width
From: David Laakso da...@chelseacreekstudio.com When the page is dragged to a 640 window, the large image should reduce in both width and height. Our new found standard compliant friend, IE/8 does not seem to go along with the program in PC XP on a relatively fast dsl modem (the image in IE/8 at 640 is more square than rectangular). IE/7 is cooperating with this declaration: #d img {display : block; max-width : 96%; height: auto!important; margin-bottom : 16px;} http://chelseacreekstudio.com/ylaakso/yar/projects/k2.html Can anyone please confirm? Get the page out of quirks mode (remove the xml prolog) and check again. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ 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] How to make rounded corners box with one image?
The values you need will depend on the radius of your corners and on the offset of the drop shadow. If you don't use it already I would strongly recommend familiarising yourself with firebug. Thanks for the tip on using firebug; it made creating the rounded corners box so much easier. Previously, I had only used it for debugging javascript. I wonder how one would do things like rounded corners boxes without such as tool as firebug. -Dan __ 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/8 max-width
Al Sparber wrote: From: David Laakso da...@chelseacreekstudio.com When the page is dragged to a 640 window, the large image should reduce in both width and height. Our new found standard compliant friend, IE/8 does not seem to go along with the program in PC XP on a relatively fast dsl modem (the image in IE/8 at 640 is more square than rectangular). IE/7 is cooperating with this declaration: #d img {display : block; max-width : 96%; height: auto!important; margin-bottom : 16px;} http://chelseacreekstudio.com/ylaakso/yar/projects/k2.html Can anyone please confirm? Get the page out of quirks mode (remove the xml prolog) and check again. Makes no difference whatsoever, Al. ~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/
Re: [css-d] ie/8 max-width
Al Sparber wrote: From: David Laakso da...@chelseacreekstudio.com Get the page out of quirks mode (remove the xml prolog) and check again. Makes no difference whatsoever, Al. If you remove both the width and height attributes from the img tag, it works. Remove just the height and it doesn't. Looks like a remnant of haslayout :-) http://www.projectseven.com/csslab/ie8/min-max-height-width/ -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ 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/8 max-width
Al Sparber wrote: Al Sparber wrote: From: David Laakso da...@chelseacreekstudio.com Get the page out of quirks mode (remove the xml prolog) and check again. Makes no difference whatsoever, Al. If you remove both the width and height attributes from the img tag, it works. Remove just the height and it doesn't. Looks like a remnant of haslayout :-) http://www.projectseven.com/csslab/ie8/min-max-height-width/ Umm. Not sure what to do. I've been using width/height on images since forever. Excess baggage with sometimes image distortion seen in IE/5x? Whatever, and either way, unless someone else has an alternative, I will take Al's suggestion and ditch the height/width attributes :-) . ~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/
Re: [css-d] ie/8 max-width
Al Sparber wrote: Al Sparber wrote: From: David Laakso da...@chelseacreekstudio.com Get the page out of quirks mode (remove the xml prolog) and check again. Makes no difference whatsoever, Al. If you remove both the width and height attributes from the img tag, it works. Remove just the height and it doesn't. Looks like a remnant of haslayout :-) http://www.projectseven.com/csslab/ie8/min-max-height-width/ Thanks for the test page. Yes, I know. Mac FF and Mac Safari handle it a little differently than the other browsers I checked earlier without width/height. __ 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] about center align a horizontal list
Hello all, I know it's an discussed question, and I followed this: http://archivist.incutio.com/viewlist/css-discuss/105996?highlight=center+align and the example from css.maxdesign http://css.maxdesign.com.au/listamatic/horizontal16.htm but I think it's not really center aligned. I applied the text-align:center to ul but found actually it's a little bit right shifted. especially when I change #theControl 's width smaller , for example 300px. then you will see that the left space is larger than the right space. am I missing something important? thanks a lot for any help! ayrtbh here is my html and css: !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 / titletestPage/title ! style type=text/css #theControl { margin:0 auto 0 auto; width:300px; background-color:#CC; } #theControl ul { text-align:center; background-color:#cc; } #theControl ul li { display:inline; list-style-type:none; } #theControl ul li a { margin-left:4em; text-decoration:none; color:#00; } /**/ /style ! /head body div id=theControl ul lia href=#asdf/a/li lia href=#ghjk/a/li /ul /div /body /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/