Re: [css-d] question from a beginner
"Is there a preferred way to get a project started. What I mean to say is, do you type of all the HTML first, mark it up and then write the CSS or do you do it piece meal? I am just trying to figure out a logical process which to go by so that I can make my work easier to understand and accomplish." I think everyone is saying much the same sort of thing, basically; but you could do worse than refer to Jason Santamaria's Grey Box Method: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php __ Start your day with Yahoo! - Make it your home page! http://www.yahoo.com/r/hs __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check: Mainly windows machines
> From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] > On Behalf Of css-dan > Sent: Friday, October 28, 2005 8:12 AM > To: css-d@lists.evolt.org > Subject: [css-d] Site check: Mainly windows machines > > Thanks !! > > http://www.pbs.org/wgbh/rxforsurvival/ Hi, I echo Gale's thoughts, about the judicious but delicious use of color (especially how it's echoed through the text colors), of how the photo was put to effective use (with a nice translucency under the text), and about the search text box. There are a couple other things that popped up, of varying degrees of importance. On WinXP and in both FF 1.0.7 and IE 6, the yellow box, containing "RX FOR CHILD SURVIVAL" doesn't *quite* line up with the red box to its left. Looks like it's dropped by about 2px. For some reason, the grey box summarizing the project feels empty. Actually, now that I look at it, the whole right side of the page (with the exception of the PBS bar at the top) feels a little empty. You may want to consider throwing a little left margin on the contents of the grey and yellow boxes. The project-specific links, just above the search form, and the search form itself, might would look better with a common right alignment, so that the "r" of "Newsletter" is directly above the "o" of "Go". If there's a way to easily line these up with the contents of the grey and yellow boxes, it might bring everything into a better sense of cohesion. Take that for what it's worth. Daniel __ Yahoo! FareChase: Search multiple travel sites in one click. http://farechase.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Updated: Odd border + padding behavior: cross-browser
Hi all, I've trolled through the list archives, a little of evolt, and, of course, Google, to no avail. I consulted positioniseverything.net and quirksmode.org. The issue I have seems simple enough that I'd have turned it up on any of those sources, but, alas, that's not the case. So, please refer to http://www.erectlocution.com for the page in question. Here are the issues: (a) >>>UPDATED: This still occurs. IE 6 has some issues rendering the page. The borders of the div with ID #contentWrapper render fine on initial loading, but there is a portion which aren't rendered "below the fold", i.e. below the bottom of the rendered page, which is evident on vertical scrolling. This behavior also occurs when scrolling back up--the previously rendered border at the top of the page is poorly rendered. Additionally, when mousing over a link, the border rendering becomes differently, if predictably, broken: some part of the left and right borders of #contentWrapper disappear, starting around 100px below it's top edge and 50px or so above its bottom edge. Lastly--and this is probably somewhere on quirksmode.org or positioniseverything.org, but of lower priority for me--there is a gap of something like 5px between the #header div and the #contentWrapper div. This happens whether or not I feed IE special rendering instructions via conditional comments. (b) >>>UPDATED: This still occurs. There is a gap of about 15px between the #header and #contentWrapper divs on Firefox 1.0.7 / WinXP and Mac OS X. I have scoured through the fairly anemic CSS and not found any reason for this in the code itself. Both the XHTML and CSS validate, for what it's worth. I had applied a negative margin, which, for FF, worked perfectly; but... (c) >>>UPDATED: This is fixed. It appears that Safari (1.2) renders my markup more faithfully than any other browser I've tested. I just removed the negative margin. ...on Safari (OS X 10.3.9, not sure what version of Safari, though), the right border of the #contentWrapper div renders just to the right of the #header div, IF that negative margin is applied to #contentWrapper. I removed that from work today (WinXP), and haven't tested it at home, so I'm not sure if that fixed it. My guess is that the 15px gap will appear when using Safari as well. Overall, it's not critical faultiness; but I'd really like such a simple site to render nicely. I appreciate any tips and pointers along the way. Thanks, Daniel __ Yahoo! FareChase: Search multiple travel sites in one click. http://farechase.yahoo.com __ Yahoo! Mail - PC Magazine Editors' Choice 2005 http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari Links NOT CLICKABLE
> Here is the problem: > The owner, when viewing her site > (http://www.blogickal.com/) in > Safari on her Mac, can see the links such as > "Continue Reading..." > and the "Comments (0)", but when she mouses over > them or tries to > click on them, the links don't work. The links are > green - and she > sees the green, but they are apparently not > clickable. Hi, Mary, I have absolutely no idea if this helps whatsoever; but on reading the article linked in the "One True Layout" announcement, I find another mention of Safari rendering links unclickable. I thought it might start you on the path to enlightenment. Check http://positioniseverything.net/articles/onetruelayout/equalheight ...under the "Rough Edges" section. __ Yahoo! FareChase: Search multiple travel sites in one click. http://farechase.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Odd border + padding behavior: cross-browser
Hi all, I've trolled through the list archives, a little of evolt, and, of course, Google, to no avail. I consulted positioniseverything.net and quirksmode.org. The issue I have seems simple enough that I'd have turned it up on any of those sources, but, alas, that's not the case. So, please refer to http://www.erectlocution.com for the page in question. Here are the issues: (a) IE 6 has some issues rendering the page. The borders of the div with ID #contentWrapper render fine on initial loading, but there is a portion which aren't rendered "below the fold", i.e. below the bottom of the rendered page, which is evident on vertical scrolling. This behavior also occurs when scrolling back up--the previously rendered border at the top of the page is poorly rendered. Additionally, when mousing over a link, the border rendering becomes differently, if predictably, broken: some part of the left and right borders of #contentWrapper disappear, starting around 100px below it's top edge and 50px or so above its bottom edge. Lastly--and this is probably somewhere on quirksmode.org or positioniseverything.org, but of lower priority for me--there is a gap of something like 5px between the #header div and the #contentWrapper div. This happens whether or not I feed IE special rendering instructions via conditional comments. (b) There is a gap of about 15px between the #header and #contentWrapper divs on Firefox 1.0.7 / WinXP. I have scoured through the fairly anemic CSS and not found any reason for this in the code itself. Both the XHTML and CSS validate, for what it's worth. I had applied a negative margin, which, for FF, worked perfectly; but... (c) ...on Safari (OS X 10.3.9, not sure what version of Safari, though), the right border of the #contentWrapper div renders just to the right of the #header div, IF that negative margin is applied to #contentWrapper. I removed that from work today (WinXP), and haven't tested it at home, so I'm not sure if that fixed it. My guess is that the 15px gap will appear when using Safari as well. Overall, it's not critical faultiness; but I'd really like such a simple site to render nicely. I appreciate any tips and pointers along the way. Thanks, Daniel __ Yahoo! Mail - PC Magazine Editors' Choice 2005 http://mail.yahoo.com __ Yahoo! FareChase: Search multiple travel sites in one click. http://farechase.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
