Re: [css-d] Colors in PShop vs. browser
Hi, has anyone else experienced seeing colors somewhat differently in Photoshop vs. a web browser? Everything looks significantly darker in Photoshop. It certainly adds an unnecessary obstacle to the design process! Any tips on why this might be happening, and how to alleviate it? A good article on what, why and how to fix it here: http://www.gballard.net/psd/saveforwebshift.html Cheers, KathyW. __ 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] Colors in PShop vs. browser
Climis, Tim wrote: -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Lalena Sent: Thursday, July 23, 2009 4:34 PM To: css-d@lists.css-discuss.org Subject: [css-d] Colors in PShop vs. browser Hi, has anyone else experienced seeing colors somewhat differently in Photoshop vs. a web browser? Everything looks significantly darker in Photoshop. It certainly adds an unnecessary obstacle to the design process! Any tips on why this might be happening, and how to alleviate it? (I'm trying to match the background of an image--it's an image of type--to a hexadecimal background color.) Thanks! Lalena P.S. Hello, Ron Zisman! __ It's because of color profiling. If you have a browser that obeys color profiles, then it'll match, but most browsers don't have that support. so you need to save your photoshop image without a color profile. Matching will still depend on the visitor's monitor being calibrated, the visitor's system using the correct color profile for their monitor, their video adapter being perfectly set by the factory and still perfectly calibrated, plus the visitor's ambient light when they visit your page ... ;-) -- David gn...@hawaii.rr.com authenticity, honesty, community __ 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] Icky image edges: resolution, sizing
And/or: Is there a better way to do this whole task? Meaning: solving the icky-image-edges problem without using high-res images (which I assume take longer to load)? --- What you're running into is that GIF's don't have variable transparency. It's either transparent or it's not - no 50% opaque. That means that it can't anti-alias your text well. Using PNG's instead of GIF's would fix that. IE6 doesn't support PNG transparency but all the other browsers (IE 7 and 8 included) have no problems. ---Tim __ 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] Is there such a thing as a sub class (in css not society)
Thanks, but that doesn't really answer my question.
What I want is an empty class that has no specific meaning itself but
extends another class.
This is fine when I have an element within an element because I can set
a style for .parent .child
I can also set a specific element's style using #child .child
I can also say that an element adopts 2 styles with .english .child
To partly answer my question I could specify .tall . child where tall is
20% above average
But what if a .tall .parent is only 10% taller?
-
Isn't that what .tall.parent does?
.tall.parent {height: 110%}
.tall.child {height:120%}
---Tim
__
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] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
I probably have a basic IE browser bug affecting floats and or
margins. It would be great to get a fix for this (#1.) margin-left
200px not working in MSIE7(5.5 and 6 too) and identify the bug so I
understand it going forward. The CSS in question is at the bottom of
this email. There are two other bugs (#2 and #3) I am trying fix at
the moment if anyone knows.
Here is a screenshot showing bug
http://modernia.net/oh/7-22msie7-xp.png
The address of this 'Ohlone' layout template is
http://www.modernia.net/oh/5/
This is a convenient diagram of the wordpress theme framework I am
working with html DIVs organization
http://themehybrid.com/blog/wp-content/uploads/2009/02/hybrid-legend.png
(all tested at 1024 x 764 screen rez)
ALL SAME 2 PROBLEMS ON IE 5.5, 6, 7 on XP
#1. *** #content {margin-left:200px;} This margin does not happen
--- so the fluid content area pushes down the static sidebar area
(#primary #secondary)
#2.*** containers for header, horiz. nav., footer dont show background
color(But the margins seem to be there in terms of spacing)
#3. IE 5.5, 6 on XP: #content expands to fill viewport
ALL THESE BROWSERS LOOK OK: (MOST OR ALL OSX safari and FF), IE 8, FF
1.5 on win2000, FF 2-3.5 on xp
I am on a mac testing with http://browsershots.org
My browser goal for this site is only to be basically functional(does
not need to be pretty) in windows IE5-6, FF1.5.
THANKS! Don
#container {
overflow:hidden;
margin:20px;
padding:5px;
background-color:red;border:1px solid #000;
}
#content {
margin-left:200px;
padding:5px;
background-color:yellow;border:1px solid #000;
}
.content {
float:right;
/* margin:20px 20px 20px 240px; */
background-color:powderblue;border:1px solid #000;
}
.hentry {
margin:20px 20px 20px 20px;
background-color:lightyellow;border:1px solid #000;
}
#primary {
float:left;width:180px;
margin:20px -180px 20px 20px;
padding:5px;
background-color:#9cf;border:1px solid #000;
}
#secondary {
float:left;width:180px;
margin:20px -180px 20px 20px;
clear:left;
padding:5px;
background-color:#9cf;border:1px solid #000;
}
__
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] Icky image edges: resolution, sizing
Climis, Tim wrote: And/or: Is there a better way to do this whole task? Meaning: solving the icky-image-edges problem without using high-res images (which I assume take longer to load)? --- What you're running into is that GIF's don't have variable transparency. It's either transparent or it's not - no 50% opaque. That means that it can't anti-alias your text well. Using PNG's instead of GIF's would fix that. IE6 doesn't support PNG transparency but all the other browsers (IE 7 and 8 included) have no problems. ---Tim __ [quote=Tim] IE6 doesn't support PNG transparency... [/quote] Just a pedantic point - I think you mean IE6 doesn't support PNG semi-transparency..., yes? If you use PNG-8 then IE6 treats both fully transparent and semi-transparent pixels as fully transparent. I'd recommend PNG-8 for most images anyway, as they can be optimized to be quite small - smaller than GIFs, anyway. And, to bring it into the realm of CSS, there's no need to use IE6 hacks to use PNG-8. Check out these articles: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/ (Of course, you still get icky image edges in IE6, but there's not a lot of alternatives...) 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] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
Don Spark wrote: I probably have a basic IE browser bug affecting floats and or margins. The mockup image that you say you are going after shows the two small boxes to the right of the large block. Yet your page has the two little boxes on the left side of the large block. 1/ Which way do you want it? 2/ Can the markup be changed? 3/ Does it really need to be that complex (bad case of too many ids/classes)? __ 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] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
Don Spark wrote: I probably have a basic IE browser bug affecting floats and or margins. It would be great to get a fix for this (#1.) margin-left 200px not working in MSIE7(5.5 and 6 too) and identify the bug so I understand it going forward. The CSS in question is at the bottom of this email. There are two other bugs (#2 and #3) I am trying fix at the moment if anyone knows. Here is a screenshot showing bug http://modernia.net/oh/7-22msie7-xp.png The address of this 'Ohlone' layout template is http://www.modernia.net/oh/5/ [...] #1. #2. [...] THANKS! Don Hello Don, The bugs numbered 1 and 3 is the same bug. It affects IE7 and earlier versions of IE. Simply put, a child element floated right will never be displaced by it's parent left margin. The child element floated right will fill all the available width of the body element. http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1.htm -- 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] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
On Jul 24, 2009, at 10:51 PM, Don Spark wrote: I probably have a basic IE browser bug affecting floats and or margins. It would be great to get a fix for this (#1.) margin-left 200px not working in MSIE7(5.5 and 6 too) and identify the bug so I understand it going forward. The CSS in question is at the bottom of this email. There are two other bugs (#2 and #3) I am trying fix at the moment if anyone knows. Here is a screenshot showing bug http://modernia.net/oh/7-22msie7-xp.png The address of this 'Ohlone' layout template is http://www.modernia.net/oh/5/ The parent of #content is a 'hasLayout' container (because of overflow:hidden). This kinda swallows the margin of the first inflow kid. That is the left-margin vanishes into thin air. The overflow:hidden is apparently used to contain floats. Maybe choose another technique ? Inserting an hr that clears the whole block as last element in #container ? That would even be semantic... http://www.satzansatz.de/cssd/onhavinglayout.html#prop 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/
[css-d] serious site issues-cont'd
Group, I have implemented David's suggestions on the three column layout page issue and the base font issue. I'm still struggling with the wide column issue. http://www.webgirlwebdesigns.com/testing/StPaulsv1/index.html What I am noticing in IE 8 and FF 3.0 is on the wide column, there seems to be a gap between the top wide content div and the center content div. Also if I don't insert hard breaks, the text runs out of the box. In IE 8 also on some of the three column pages, everything shifts to the left and doesn't center. Thanks Lisa __ 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-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote:
Sandy wrote:
[...]
http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background
.headerleft
#globalnav
the search should be transparent, too.
instead that whole area is showing up with a white background in AOL
9.1, ie6 and ie7. ie8 is ok.
the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
That comes from this rule @ line 271 -
.container {
background-color : #fff;
padding : 0;
width : 860px;
}
Other browsers respect the 'background-color:inherit;' @ line 109 as the
selector is more specific. IE 5 - 7 do not apply 'inherit'.
David - thanks so much for taking the time to help me sort this out.
Now - your advice did get that white background out of the top of the
page, but it made the white background in the content area disappear, too.
This is really mysterious to me - the .container div starts below the
navigation, and was somehow covering the navigation ... take a look
here, where I have made it yellow with a red outline
http://www.uoguelph.ca/mcb/test/test.shtml
I tried giving the container its white background back and a margin-top
of 300px, and then the whole top nav moved down that much, as if the
container started at the top of the page, instead of after the navigation.
I am flummoxed. I really appreciate your help!
I figured it out!
thanks for getting me on the right track.
Sandy
__
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-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote re: http://www.uoguelph.ca/mcb/test/contact.shtml instead that whole area is showing up with a white background in AOL 9.1, ie6 and ie7. ie8 is ok. the styles are here http://www.uoguelph.ca/mcb/test/css/mcb2009.css [...] Now - your advice did get that white background out of the top of the page, but it made the white background in the content area disappear, too. This is really mysterious to me - the .container div starts below the navigation, and was somehow covering the navigation ... take a look here, where I have made it yellow with a red outline http://www.uoguelph.ca/mcb/test/test.shtml I tried giving the container its white background back and a margin-top of 300px, and then the whole top nav moved down that much, as if the container started at the top of the page, instead of after the navigation. Sorry about the delayed reply, Sandy. It looks like you have solved the stated problem, and the test.shtml page seems to have vanished. One problem remains, as far as I can see - that's the white border on the #globalnav. I think that is due to the border: transparent ... on the 'a' selector. IE 6 does not understand this. I suggest using the color code instead. 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] serious site issues-cont'd
Lisa Wilcox wrote:
Group,
I have implemented David's suggestions on the three column layout page issue
and the base font issue. I'm still struggling with the wide column issue.
http://www.webgirlwebdesigns.com/testing/StPaulsv1/index.html
With regard to this specific wide-column page:
http://www.webgirlwebdesigns.com/testing/StPaulsv1/announcements.html
Does this change close the gap on that page?
/* Heading */
h1 {
font-size: 175%;
margin: 0!important; --- :: add ::
}
__
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] serious site issues-cont'd
Lisa Wilcox wrote:
Group,
I'm still struggling with the wide column issue.
http://www.webgirlwebdesigns.com/testing/StPaulsv1/index.html
On this specific wide-column page, and others like it:
http://www.webgirlwebdesigns.com/testing/StPaulsv1/directory.html
you neglected to include this in the inline markup:
div style=background: url('images/wide-content-center.gif') top left
repeat-y; padding: 0px 98px 0px 24px; width: 100%;
__
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] serious site issues-cont'd
David, I have looked on the pages and template and can find no such byte mark. I looked in DW and can't find the setting for this. I'm on CS4. Thank you, Lisa On this specific page: http://www.webgirlwebdesigns.com/testing/StPaulsv1/christianformation.html A Byte-order mark [1] precedes the doctype; consequently, IE is in quirksmode and throws your stuff left. [1] http://en.wikipedia.org/wiki/Byte-order_mark Dreamweaver, or whatever editor you are using, may be inserting it. Dreamweaver can be be stooped from doing this by changing something (I do not know what) in the preferences. Or, you can delete the BOM, and save the document in Notepad +++ . Checked by AVG - www.avg.com Version: 8.5.387 / Virus Database: 270.13.25/2256 - Release Date: 07/24/09 05:58:00 __ 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] serious site issues-cont'd
Elias I can't find it either, but yet it shows up on my testing server. I will try this. Thank you. Lisa - try this link: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda911 0b1f693f21-7ef8a.html Hope this helps. - Elias __ 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] serious site issues-cont'd
Lisa Wilcox wrote: David, I have looked on the pages and template and can find no such byte mark. I looked in DW and can't find the setting for this. I'm on CS4. Thank you, Lisa I can't help with your editor, other than try-- Google: subject line-- Dreamweaver BOM __ 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] serious site issues-cont'd
Lisa Wilcox wrote: David, I have looked on the pages and template and can find no such byte mark. I looked in DW and can't find the setting for this. I'm on CS4. Thank you, Lisa Open this page in FF. http://www.webgirlwebdesigns.com/testing/StPaulsv1/christianformation.html You will see the BOM kissing the left rail and the bottom of the browser chrome. __ 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 issue (Drupal if that matters)
In this page: http://www.craftsmanshipnet.org/node/48 You can see in FF/IE8/7 that the blue background of the central content (#wrapper-profile-display) is stretching to fill the red-bordered area. But in IE6, it's not. I can't get it to move over at all - any help greatly appreciated. This is a Drupal site if that's significant. -- Debbie Campbell www.redkitecreative.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] series of site issues
Lisa Wilcox wrote: But I do have that in my code. As mentioned I only looked at one wide page and the gif in question was not in the inline style markup. Point to the specific page you wrote about with a clickable link to it. Please bottom post (write below to whom you reply). Thanks. :-) __ 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] serious site issues-cont'd
Lisa Wilcox wrote: http://www.webgirlwebdesigns.com/testing/StPaulsv1/index.html Also if I don't insert hard breaks, the text runs out of the box. On this specific page: http://www.webgirlwebdesigns.com/testing/StPaulsv1/announcements.html on this specific paragraph: pThe Book Club meets after .../p Does adding this to its inline style: width: 875px; prevent the sentence from escaping from its parent block? __ 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] Agustin Aguilera Beltran está ausente de la oficina.
Estaré ausente de la oficina desde el 24/07/2009 y no volveré hasta el 03/08/2009. Responderé a su mensaje cuando regrese. Por favor contacte con el grupo de Diseño. Visítenos en: www.lineadirecta.com Este mensaje y los documentos que, en su caso, lleve anexos, pueden contener información confidencial. Por ello, se informa a quien lo reciba por error que la información contenida en el mismo es reservada y su uso no autorizado está prohibido legalmente, por lo que en tal caso le rogamos se abstenga de realizar copias del mensaje, leerlo, remitirlo o difundirlo y proceda a borrarlo inmediatamente. This message is intended only for the use of the individual to whom it is addressed and may contain information that is confidential. If you have received this communication, by error, you are hereby notified that any distribution or copying of this communication is prohibited. __ 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/
