Re: [css-d] Clip-Path W3C values
https://css-tricks.com/almanac/properties/c/clip/ On Saturday, May 16, 2015, Crest Christopher crestchristop...@gmail.com wrote: The W3C specifies a clip-path to be used as such; clip-source|basic-shape|geometry-box|none I have two questions, putting into consideration, if most W3C values are laid out as such how is the rule written for CSS ? Secondly, must I specify the, clip-source, being the image, the basic shape, being values or hopefully an image or strictly a geometry box ? I was hoping you could clip a background image, then use clip-path and enter the SVG image you want to use to clip the background image, I don't think that is the correct method ? Christopher __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 masking
.two:after rule has typo. On Thursday, June 4, 2015, Crest Christopher crestchristop...@gmail.com wrote: A while ago I posted I couldn't get masking to work; here is my example https://jsfiddle.net/WildWind/bs84tegs/11/. I had the mask rule within the class = two, but it wasn't working, I decided, even though it won't be removing parts of the black stylized circle to use pseudo-element:after with the mask rule, it may be wrong, it doesn't appear to be working anyhow ? __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Vertical Horizontal Center ?
#one { position:relative; background-color:blue; height:350px; width:350px; } .two { background-color:orange; height:125px; width:125px; position:relative; top: 50%; transform: translateY(-50%); margin: 0 auto; } On Wed, Jun 3, 2015 at 8:00 PM, Tom Livingston tom...@gmail.com wrote: It's: top:50%; transform: translateY(-50%) On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher crestchristop...@gmail.com wrote: I've come across many pages how to center a item horizontally and vertically, one method {margin: 0 auto;} works great, horizontally, not vertically. I found another solution whereas, all I do is add {top:50%;translateY(-50%);} to the child, that is not working either ? [Example https://jsfiddle.net/WildWind/bs84tegs/] __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Vertical Horizontal Center ?
It's: top:50%; transform: translateY(-50%) On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher crestchristop...@gmail.com wrote: I've come across many pages how to center a item horizontally and vertically, one method {margin: 0 auto;} works great, horizontally, not vertically. I found another solution whereas, all I do is add {top:50%;translateY(-50%);} to the child, that is not working either ? [Example https://jsfiddle.net/WildWind/bs84tegs/] __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 masking
On Thu, Jun 4, 2015 at 10:23 PM, Philippe Wittenbergh e...@l-c-n.com wrote: I got something working in both Safari 8 and Opera 29: http://dev.l-c-n.com/_junk/mask.html Working in latest Chrome Mac as well... -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 masking
On Fri, Jun 5, 2015 at 9:18 AM, Crest Christopher crestchristop...@gmail.com wrote: I see you made mask separate, class within a class, give it another shot ! Are you saying *you* will give it another shot, or are we supposed to be looking at something new you did? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Z-Index with Fixed/Absolute Elements in IE
On Mon, Jun 8, 2015 at 3:14 PM, Roger Blanton rblan...@ltu.edu wrote: Hello, I have a header that is postion fixed similar to the CSS below: header { position: fixed; width: 1100px; left: 50%; margin-left: -550px; z-index:999; } .absolute-element { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; } In all browsers other than IE these behave as expected with the header appearing on top of the absolute positioned element, however in IE, the absolute positioned element appears on top of the header. Any ideas would be greatly appreciated. Thanks, Roger Seems like source order is winning. Did you try adding z-index of a lower amount to the absolute-element? Also, what is absolute-element positioned relative to? Body? A parent? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] It is now clear
On Sunday, June 7, 2015, Karl DeSaulniers k...@designdrumm.com wrote: On Jun 7, 2015, at 8:48 PM, Tom Livingston tom...@gmail.com javascript:; wrote: On Sun, Jun 7, 2015 at 9:19 PM, Karl DeSaulniers k...@designdrumm.com javascript:; wrote: Ok, sorry if this is spam, It has become clear to me what the.. style type=text/css .clear { clear:both; } style div class=clear/div ..does now. I recommend this: /* CLEARING */ /* For modern browsers */ .clear:before, .clear:after {content: ; display:block;} .clear:after {clear:both;} .clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */ and it's applied as such: div class=clear div class=floatleft/div div class=floatright/div /div This saves you from having an extra element in your HTML for just clearing purposes. Some nice info here: http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com Putting class clear on the wrapper container did not do it for me or there was some other reason in the way, but the extra element did it. I will try your approach though as it seem to cover the gamut. Thanks Tom! Best, Karl DeSaulniers Odd. A link would help. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] It is now clear
On Mon, Jun 8, 2015 at 10:07 AM, Crest Christopher crestchristop...@gmail.com wrote: I was thinking this was irrelevant in the present. The page(s) main container must have contained within the borders of the main container of the page the following ? div class=clear div class=floatleft/div div class=floatright/div /div I do not understand your question. The code above represents a container with 2 siblings that are floating left and right. In my original reply, I included CSS for the class clear which will cause the container to clear itself with out the use of additional, needless (IMHO) HTML elements. The above could be occurring many times within a single webpage. It is not just the main page structure, though it would work for that as well. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] It is now clear
On Sun, Jun 7, 2015 at 9:19 PM, Karl DeSaulniers k...@designdrumm.com wrote: Ok, sorry if this is spam, It has become clear to me what the.. style type=text/css .clear { clear:both; } style div class=clear/div ..does now. I recommend this: /* CLEARING */ /* For modern browsers */ .clear:before, .clear:after {content: ; display:block;} .clear:after {clear:both;} .clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */ and it's applied as such: div class=clear div class=floatleft/div div class=floatright/div /div This saves you from having an extra element in your HTML for just clearing purposes. Some nice info here: http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Path style CSS animation
And the plot thickens... On Friday, June 19, 2015, Crest Christopher crestchristop...@gmail.com wrote: You can't add interactivity with HTML 5 video, for example scrolling or swiping to cause the video to do something. Tom Livingston wrote: Embed it as an html5 video. On Friday, June 19, 2015, Crest Christopher crestchristop...@gmail.com javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote: SVG animation can't do varying line widths, I've exhausted that avenue already. Christopher Philip Taylor wrote: David Hucklesby wrote: As that image is PHG, I doubt it. Are we seeing the same image at top-right ? I see : http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/thumbs/vine.png Philip Taylor __ css-discuss [css-d@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-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Path style CSS animation
Embed it as an html5 video. On Friday, June 19, 2015, Crest Christopher crestchristop...@gmail.com wrote: SVG animation can't do varying line widths, I've exhausted that avenue already. Christopher Philip Taylor wrote: David Hucklesby wrote: As that image is PHG, I doubt it. Are we seeing the same image at top-right ? I see : http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/thumbs/vine.png Philip Taylor __ css-discuss [css-d@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-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Putting an image before list item text
One other thing. If you know WHICH element will have that text, consistently, you could use: Element:nth-of-type On Friday, June 26, 2015, Angela French afre...@sbctc.edu wrote: I'm trying to put a recycle bin icon before the text Recycle Bin on a SharePoint menu list item. Is there a way to conditionally put the icon when the list item text is Recycle Bin? Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu javascript:;mailto:afre...@sbctc.edu javascript:; www.checkoutacollege.comhttp://www.checkoutacollege.com www.sbctc.eduhttp://www.sbctc.edu __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Putting an image before list item text
Not that I'm aware of. You could try something like: $('label:contains('some text')').css('color','Lime') Which is jQuery. Which is off topic for CSS-d... On Friday, June 26, 2015, Angela French afre...@sbctc.edu wrote: I'm trying to put a recycle bin icon before the text Recycle Bin on a SharePoint menu list item. Is there a way to conditionally put the icon when the list item text is Recycle Bin? Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu javascript:;mailto:afre...@sbctc.edu javascript:; www.checkoutacollege.comhttp://www.checkoutacollege.com www.sbctc.eduhttp://www.sbctc.edu __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Responsive with absolute positioning?
We attempted a responsive page in Marketo and ended up kicking it to the curb. Their 'responsiveness' is sketchy and incomplete in my opinion. In any case, I'd recommend percentages. On Thursday, June 11, 2015, J.C. Berry jcharlesbe...@gmail.com wrote: Hello all, I have this page http://go.xifin.com/connectivity.html and we are trying to make it responsive. Marketo has an editor that absolutely positions everything and every item is only a child of body. You can see that I have some of it working, but things like the vertical placement - top - just don't work consistently at various widths. Would I use some kind percentages? Something else? Also, the video sizing and the background TV is tough. Thanks guys! -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com javascript:; http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] make site suitable for mobile/small screens
An iPhone 4/5, for example, in portrait orientation is 320. Many other are similar. On Tuesday, May 26, 2015, Erik Visser e...@erikvisser.net wrote: Tom Livingston schreef op 25-05-15 om 18:21: Looks good. On Monday, May 25, 2015, Erik Visser wrote: Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now I think so too. From what i can see and test it is already working quite good. It is passing the google test now. Since we don't want to loose google ranking we put it live as it is now. http://www.utrechtsyogacentrum.nl Any comments already? From here on i'll straigthen out the last flaws and issues. And the approach for screens smaller then 480px has to be set. And still a lot of mobile phones have screens smaller then 480px i found out. __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] BG Repeat one direction ?
On Tuesday, May 26, 2015, Crest Christopher crestchristop...@gmail.com wrote: That is a last resort, you mean it's impossible to do the method I mentioned ? I've never heard of any way to stop a repeating background pattern where ever you want. Not in css anyway. Nor have I ever heard of doing it with script, but I've never looked into it. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] BG Repeat one direction ?
I guess you could try two divs. one transparent, one inside that holding the pattern. On Tuesday, May 26, 2015, Tom Livingston tom...@gmail.com wrote: On Tuesday, May 26, 2015, Crest Christopher crestchristop...@gmail.com javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote: That is a last resort, you mean it's impossible to do the method I mentioned ? I've never heard of any way to stop a repeating background pattern where ever you want. Not in css anyway. Nor have I ever heard of doing it with script, but I've never looked into it. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] BG Repeat one direction ?
Make a single image 500x412. On Tuesday, May 26, 2015, Crest Christopher crestchristop...@gmail.com wrote: Suppose you have a 500px height container. You set the background image to bottom, you want it to repeat on the Y, as in up, except you want it to repeat only so many pixels, lets make up a number of 412px, then the rest of the container is blank ? Christopher Philippe Wittenbergh mailto:e...@l-c-n.com Tuesday, May 26, 2015 7:34 PM 1st hit: https://duckduckgo.com/?q=MDN+background-repeatt=osx Philippe -- Philippe Wittenbergh http://l-c-n.com/ Crest Christopher mailto:crestchristop...@gmail.com Tuesday, May 26, 2015 7:28 PM How can I background-repeat in one direction ? __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] BG Repeat one direction ?
A link is always best. On Tuesday, May 26, 2015, Tom Livingston tom...@gmail.com wrote: I guess you could try two divs. one transparent, one inside that holding the pattern. On Tuesday, May 26, 2015, Tom Livingston tom...@gmail.com javascript:_e(%7B%7D,'cvml','tom...@gmail.com'); wrote: On Tuesday, May 26, 2015, Crest Christopher crestchristop...@gmail.com wrote: That is a last resort, you mean it's impossible to do the method I mentioned ? I've never heard of any way to stop a repeating background pattern where ever you want. Not in css anyway. Nor have I ever heard of doing it with script, but I've never looked into it. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Sidebar height with list filter
On Tuesday, June 30, 2015, J.C. Berry jcharlesbe...@gmail.com wrote: thanks guys, but I think I have to clarify my issue. The sidebar content is always the same; it has the checkbox filters. But the right area divs wrap down to the left below the sidebar when a lot of them show. The footer clears fine. On Tue, Jun 30, 2015 at 6:04 PM, Tom Livingston tom...@gmail.com javascript:_e(%7B%7D,'cvml','tom...@gmail.com'); wrote: On Tuesday, June 30, 2015, Philippe Wittenbergh e...@l-c-n.com javascript:_e(%7B%7D,'cvml','e...@l-c-n.com'); wrote: Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com a écrit : I have an issue with a set of checkbox filters in a sidebar that has to expand it height based on what the user selects. Here is a simple layout (the site is on dev): SB Div1 Div2 Div 3 SB Div4 Div5 Div 6 SB Div7 SB SB FOOTER FOOTER FOOTER So the checkbox filters are in the sidebar (SB) and the Divs are added or removed based on choice of type of Div. I need the SB to expand as needed. Possible? Your sidebar should auto-magically grow with the amount of content it contains, no? Unless, that is, you set `height` or `max-height`. I suspect your problem might be that your `footer` doesn’t move (lower) when you add content to your sidebar. That will depend on how you coded your whole page. Hard to say without at least a minimal testcase. Philippe -- If your sb and main content are floats, you'll need to clear them so your footer sits below. -- How are you doing you two columns? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Sidebar height with list filter
On Tuesday, June 30, 2015, Philippe Wittenbergh e...@l-c-n.com wrote: Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com javascript:; a écrit : I have an issue with a set of checkbox filters in a sidebar that has to expand it height based on what the user selects. Here is a simple layout (the site is on dev): SB Div1 Div2 Div 3 SB Div4 Div5 Div 6 SB Div7 SB SB FOOTER FOOTER FOOTER So the checkbox filters are in the sidebar (SB) and the Divs are added or removed based on choice of type of Div. I need the SB to expand as needed. Possible? Your sidebar should auto-magically grow with the amount of content it contains, no? Unless, that is, you set `height` or `max-height`. I suspect your problem might be that your `footer` doesn’t move (lower) when you add content to your sidebar. That will depend on how you coded your whole page. Hard to say without at least a minimal testcase. Philippe -- If your sb and main content are floats, you'll need to clear them so your footer sits below. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Sidebar height with list filter
Float the sidebar and the main content div. clear them so the footer remains under those two columns. On Thursday, July 2, 2015, J.C. Berry jcharlesbe...@gmail.com wrote: Thanks David, I tried that solution (overflow:hidden to container) and the right div's still float underneath the sb nav. I did mention that the right divs (the number of which are variable) are also floated left? On Tue, Jun 30, 2015 at 9:16 PM, David Hucklesby huckle...@gmail.com javascript:; wrote: On 6/30/15 6:35 PM, J.C. Berry wrote: thanks guys, but I think I have to clarify my issue. The sidebar content is always the same; it has the checkbox filters. But the right area divs wrap down to the left below the sidebar when a lot of them show. The footer clears fine. On Tuesday, June 30, 2015, Philippe Wittenbergh e...@l-c-n.com javascript:; wrote: Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com javascript:; a écrit : I have an issue with a set of checkbox filters in a sidebar that has to expand it height based on what the user selects. Here is a simple layout (the site is on dev): SB Div1 Div2 Div 3 SB Div4 Div5 Div 6 SB Div7 SB SB FOOTER FOOTER FOOTER [replies snipped] If, as you suggest, you have a non-floated main element that wraps below the float when content is added, there is a simple solution. There is a property that you can add to the main element, called a new block-formatting context. For details, check out this article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/#prevent-text-wrapping -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com javascript:; http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Sidebar height with list filter
Nonetheless, sounds like you need to create a column with the variable divs' parent container so the don't slip under the sidebar. You may also need to make the variable divs relative to that parent. On Thursday, July 2, 2015, J.C. Berry jcharlesbe...@gmail.com wrote: The footer already clears fine. On Thu, Jul 2, 2015 at 1:46 PM, Tom Livingston tom...@gmail.com javascript:_e(%7B%7D,'cvml','tom...@gmail.com'); wrote: Float the sidebar and the main content div. clear them so the footer remains under those two columns. On Thursday, July 2, 2015, J.C. Berry jcharlesbe...@gmail.com javascript:_e(%7B%7D,'cvml','jcharlesbe...@gmail.com'); wrote: Thanks David, I tried that solution (overflow:hidden to container) and the right div's still float underneath the sb nav. I did mention that the right divs (the number of which are variable) are also floated left? On Tue, Jun 30, 2015 at 9:16 PM, David Hucklesby huckle...@gmail.com wrote: On 6/30/15 6:35 PM, J.C. Berry wrote: thanks guys, but I think I have to clarify my issue. The sidebar content is always the same; it has the checkbox filters. But the right area divs wrap down to the left below the sidebar when a lot of them show. The footer clears fine. On Tuesday, June 30, 2015, Philippe Wittenbergh e...@l-c-n.com wrote: Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com a écrit : I have an issue with a set of checkbox filters in a sidebar that has to expand it height based on what the user selects. Here is a simple layout (the site is on dev): SB Div1 Div2 Div 3 SB Div4 Div5 Div 6 SB Div7 SB SB FOOTER FOOTER FOOTER [replies snipped] If, as you suggest, you have a non-floated main element that wraps below the float when content is added, there is a simple solution. There is a property that you can add to the main element, called a new block-formatting context. For details, check out this article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/#prevent-text-wrapping -- Cordially, David __ css-discuss [css-d@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/ -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com javascript:_e(%7B%7D,'cvml','jcharlesbe...@gmail.com'); http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css
Re: [css-d] make site suitable for mobile/small screens
Footer width is still not scaling. Even at 480. On Monday, May 25, 2015, Erik Visser e...@erikvisser.net wrote: Hi all, Here is the site i am woring on to make it suitable for mobile/small screens. It should behave from big screen until 480px. Below 480px additional work has to be done. Thats the next step. http://beta.erikvisser.net How does it behave at your (smaller) screens/browsers? Any flaws? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] make site suitable for mobile/small screens
On Monday, May 25, 2015, Karl DeSaulniers k...@designdrumm.com wrote: I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. Philip Taylor +1 Best, Karl Agreed. Or have the image crop. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 for background image width
Sounds like your bg img is as big as its container. Makes sense. I'm really not understanding what you want. On Friday, May 22, 2015, Crest Christopher crestchristop...@gmail.com wrote: Background-size: 100% auto, scales the background image smaller. If I add to the element width:width of the image the size of the background image is perfect, in other words, the exact results I want. Is it recommended to add width, unless you are using a positioning for the element ? No other background-size method you suggested gives me the same results as just using; width ! Karl DeSaulniers mailto:k...@designdrumm.com Thursday, May 21, 2015 1:26 AM Try one of these Chris. background-size: 100% auto; //Full width proportionate height (gets cut off by size of container) background-size: 100% 100%; full width and height (stretchy) background-size: auto 100%; //Full height proportional width (gets cut off by size of container) HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@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/ Crest Christopher mailto:crestchristop...@gmail.com Thursday, May 21, 2015 1:22 AM Background-size, or bg:cover won't cause a background graphic to be the actual width of the graphic, instead {width} works, can this be used on a background image ? __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Block out Background image with mask !
24bit especially On Saturday, May 23, 2015, Chris Williams ch...@clwill.com wrote: So can pngs. On 5/22/15, 6:39 PM, John Andrews andrew...@gmail.com javascript:; wrote: Try a gif image with black and transparent instead of a png image. Gifs can have a transparent background. __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Block out Background image with mask !
Did you try 24 bit? On Saturday, May 23, 2015, Crest Christopher crestchristop...@gmail.com wrote: Neither GIF or PNG-32 are working. background-image(); mask-image() alpha/luminance; That is how I have the rule defined. Chris Williams mailto:ch...@clwill.com Saturday, May 23, 2015 7:40 PM So can pngs. __ css-discuss [css-d@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/ John Andrews mailto:andrew...@gmail.com Friday, May 22, 2015 9:39 PM Try a gif image with black and transparent instead of a png image. Gifs can have a transparent background. -- -- John Andrews Crest Christopher mailto:crestchristop...@gmail.com Friday, May 22, 2015 2:57 PM I want to make a background-image within a pesudo-element; where as, where the image is black, the background image stops. background-image:url(acme.png); mask-image:url(maskout.png) alpha; __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 for background image width
If you add a bg image to a container, it will be its actual size UNLESS you add styles that effect its size. Cover, contain, background-size:100% auto; and the like will effect the size of the bg img. If you want to see the entire bg img at its actual size the container needs to be the same dimensions of the image. On Friday, May 22, 2015, Crest Christopher crestchristop...@gmail.com wrote: Background-size: 100% auto, scales the background image smaller. If I add to the element width:width of the image the size of the background image is perfect, in other words, the exact results I want. Is it recommended to add width, unless you are using a positioning for the element ? No other background-size method you suggested gives me the same results as just using; width ! Karl DeSaulniers mailto:k...@designdrumm.com Thursday, May 21, 2015 1:26 AM Try one of these Chris. background-size: 100% auto; //Full width proportionate height (gets cut off by size of container) background-size: 100% 100%; full width and height (stretchy) background-size: auto 100%; //Full height proportional width (gets cut off by size of container) HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@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/ Crest Christopher mailto:crestchristop...@gmail.com Thursday, May 21, 2015 1:22 AM Background-size, or bg:cover won't cause a background graphic to be the actual width of the graphic, instead {width} works, can this be used on a background image ? __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] question about css-only mobile responsive menu
On Thu, May 21, 2015 at 2:40 PM, Chris Kavinsky ckavin...@gmail.com wrote: I came across this blog post and demo for a css-only responsive menu and I've been playing with it to figure out the nuances of how it works. One problem I've run into is that when the demo screen is reduced, the menu appears as intended. I copied the file and css exactly as the demo page (I even did a strait save as), but when I reduce the screen (using the same browser as the demo), the menus won't appear when I click on the button link. I can't figure out why my local version isn't working. Does anyone have the same issue or know what I'm overlooking. blog post: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ demo: http://medialoot.com/preview/css-only-navigation-menu/index.html __ Working ok for me in latest Chrome, FF and Safari (all Mac) . Do you have a link to your version on a server somewhere? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] making a site responsive - first step: making it all fluid
Small screen has issues still. I assume you know this. iPhone 6+: http://tomliv.com/css-d/IMG_0162.PNG On Thu, May 21, 2015 at 5:31 AM, Erik Visser e...@erikvisser.net wrote: Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
Other than Opera Mini, you cannot run any other rendering engine on an iOS device other than the installed Webkit. My suggestion is to not build the page so it is dependent on pixel widths - at least not to the extent that a 1 pixel difference breaks your page. Yikes! On Wed, Oct 14, 2015 at 11:43 AM, Crest Christopher <crestchristop...@gmail.com> wrote: > The only solution I can think of is since the problem is with Safari using > WebKit engine is if it's possible to switch between webkit and blink ? > > > MiB wrote: >> >> >> okt 14 2015 01:28 Crest Christopher<crestchristop...@gmail.com>: >> >>> >>> What if you don't have an iPhone or a Mac to begin with, there is no >>> other options besides Chrome, or am I wrong ? >> >> >> >> Xcode has iphone emulation . I haven’t applied it recently, but I think >> you can run it separately from the coding in Xcode. I did this at some >> point, but I don’t remember the set up and it should have been changed >> now..I use Bluestacks for Android. >> >> >> __ >> css-discuss [css-d@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-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
http://viewportsizes.com/?filter=iPhone On Wed, Oct 14, 2015 at 12:14 PM, Crest Christopher <crestchristop...@gmail.com> wrote: > What is the iPhone 5c & 5s actual display width, at; > > 320px = good > 319px = good > 318px = good > 317px = good > 316px = *breaks* > > Tom Livingston wrote: > > > On Wed, Oct 14, 2015 at 12:04 PM, Crest Christopher > <crestchristop...@gmail.com> wrote: > > > The opera mini I use on my phone displays the page fine, besides it's > problem rendering some pseudo-elements, other then that. > > It may be iPhone5 c is only 640px width in resolution, how can I solve > this if I can't emulate a webkit on an iPhone 5 and 5c& 5s, which at this > point besides iPod touch are my only problem devices, arghh. > > > > Don't use an emulator. > > You mentioned Mobilizer, and I also mentioned Browserstack. Run your > site in those, which supposedly use actual d evices, make adjustments > and run it again. > > > > > Tom Livingston wrote: > > > Other than Opera Mini, you cannot run any other rendering engine on an > iOS device other than the installed Webkit. > > My suggestion is to not build the page so it is dependent on pixel > widths - at least not to the extent that a 1 pixel difference breaks > your page. Yikes! > > > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
On Wed, Oct 14, 2015 at 12:04 PM, Crest Christopher <crestchristop...@gmail.com> wrote: > The opera mini I use on my phone displays the page fine, besides it's > problem rendering some pseudo-elements, other then that. > > It may be iPhone5 c is only 640px width in resolution, how can I solve > this if I can't emulate a webkit on an iPhone 5 and 5c & 5s, which at this > point besides iPod touch are my only problem devices, arghh. Don't use an emulator. You mentioned Mobilizer, and I also mentioned Browserstack. Run your site in those, which supposedly use actual devices, make adjustments and run it again. > > Tom Livingston wrote: > > > Other than Opera Mini, you cannot run any other rendering engine on an > iOS device other than the installed Webkit. > > My suggestion is to not build the page so it is dependent on pixel > widths - at least not to the extent that a 1 pixel difference breaks > your page. Yikes! > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
On Wed, Oct 14, 2015 at 12:14 PM, Crest Christopher <crestchristop...@gmail.com> wrote: > What is the iPhone 5c & 5s actual display width, at; > > 320px = good > 319px = good > 318px = good > 317px = good > 316px = *breaks* > How you handle very small viewports is up to you. Deliver un-styled or minimally styled content (just text?), make your layout work below 320, whatever you want. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
On Wed, Oct 14, 2015 at 12:21 PM, Crest Christopher <crestchristop...@gmail.com> wrote: > This doesn't make sense, you tested the page on your iPhone Tom and nothing > was broken, yet the emulator which does use real devices showed the page on > the iPhone 5s with broken areas ? > Can't help you there. If you are referring to Mobilizer, then try the free trial on Browserstack and see if you get the same results. > Tom Livingston wrote: > > > http://viewportsizes.com/?filter=iPhone > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Directories on server as Project ?
Try a different list as this question isn't CSS-related. On Fri, Oct 16, 2015 at 10:35 AM, Crest Christopher <crestchristop...@gmail.com> wrote: > How do I make directories which are located on the server, as a project in > Brackets ? > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 solution for a "curly" apostrophe
On Sunday, October 11, 2015, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > > Chris Williams wrote: > > > [Can you] explain then, your email of yesterday where you explain that > you said > > Explain what, Chris ? I sent a plain text message in UTF-8 which read : > > > Content-Type: text/plain; charset=UTF-8 > > Content-Transfer-Encoding: 8bit > > > > > > > > Gates, Jeff wrote: > > > >> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see > >> here: ¹ > >> This: ¹ Not this: ' > > > > Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a > > prime. What I now think you meant is : > > > > Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see > > here: ’ > > > > I know of no way of accomplishing that using CSS, but server-side > > processing might be an (off-list/topic) option. > > > > Philip Taylor > > If what you received was did not contain left and right double curly > quotation marks and a single right curly quotation mark, then your > e-mail client is incapable of displaying even the most basic parts of > the Unicode repertoire correctly. > > > I only saw superscripted numbers as well, and I have my doubts that ios9.x gmail client can't display unicode... -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 solution for a "curly" apostrophe
On Sunday, October 11, 2015, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > > Tom Livingston wrote: > > > I only saw superscripted numbers as well, and I have my doubts that > > ios9.x gmail client can't display unicode... > > Saw only superscripted numbers in whose/which message, Tom ? > Philip Taylor > Jeff gates first reply. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 solution for a "curly" apostrophe
On Sunday, October 11, 2015, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > > Tom Livingston wrote: > > > For what it's worth, I usually use entities and have yet to hear of any > > issues. > > > > This: not: ' > > > > Though, I am no Unicode scholar. > > Certain entities come predefined in HTML and XHMTL, and entities can be > declared for XML documents, but in plain text messages such as yours : > > > Content-Type: text/plain; charset=UTF-8 > > they will be rendered as typed. The set of entities that are valid for > HTML 4.01 and XHTML include single quotation mark, U+2019 ISOnum --> > > Philip Taylor > > Understood. I was addressing the original issue in the op. Sorry if the discussion has since veered elsewhere. I would just use find and replace. Sublime Text has an option to encode special characters with entities. Select all text and encode special characters. Done. 2cents. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 solution for a "curly" apostrophe
On Sunday, October 11, 2015, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > > Tom Livingston wrote: > > > > > I only saw superscripted numbers as well, and I have my doubts that > > > ios9.x gmail client can't display unicode... > > > > Saw only superscripted numbers in whose/which message, Tom ? > > Philip Taylor > > > > Jeff gates first reply. > > Jeff sent in ISO-8859-1, as I mentioned in my preceding message; > therefore you (and I) saw characters from the ISO-8859-1 character set, > which does not contain the very characters that Jeff was trying to > communicate. > > Philip Taylor > For what it's worth, I usually use entities and have yet to hear of any issues. This: not: ' Though, I am no Unicode scholar. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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 solution for a "curly" apostrophe
On Sunday, October 11, 2015, Chris Williams <ch...@clwill.com> wrote: > This. > > Philip already explained this... "Jeff sent in ISO-8859-1, as I mentioned in my preceding message; therefore you (and I) saw characters from the ISO-8859-1 character set, which does not contain the very characters that Jeff was trying to communicate. Philip Taylor" > From: Tom Livingston <tom...@gmail.com <javascript:;>> > Date: Sunday, October 11, 2015 at 12:37 PM > To: "p.tay...@rhul.ac.uk <javascript:;>" <p.tay...@rhul.ac.uk > <javascript:;>> > Cc: Christopher Williams <ch...@clwill.com <javascript:;>>, CSS-D > <css-d@lists.css-discuss.org <javascript:;>> > Subject: Re: [css-d] CSS solution for a "curly" apostrophe > > I only saw superscripted numbers as well, and I have my doubts that ios9.x > gmail client can't display unicode... > > > __ > css-discuss [css-d@lists.css-discuss.org <javascript:;>] > 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/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Wrong Selector?
That rule would then become *extremely* hard to over-ride should the need arise. IIRC, even an inline style would get trumped by this rule. On Mon, Oct 12, 2015 at 9:08 AM, Theophan Dort <theop...@theophan.net> wrote: > Many thanks! > > I tried “.navbar a” and it didn’t work, but it worked when I added > "!important", so I figured there must be Bootstrap rules that are a lot more > specific so they’re being used. So I removed the “!important” and tried > “.navbar ul.navbar-nav li a” and that seemed to work for most of it, and > “.navbar a.navbar-brand” for the “Brand.” It looks like I have a lot more > selectors to find and use, but at least now I think I know how to proceed. > > Would there be a disadvantage to just using the > > .navbar a { > color:white !important; > } > though? Sure would be easy. > > Thanks again! > > Theophan > > >> On Oct 12, 2015, at 8:43 AM, Ryan Reese <sportsdude.re...@gmail.com> wrote: >> >> You need to add the color:#FFF to your anchor rules. It's using #777 from >> your other styles. >> >> On Mon, Oct 12, 2015 at 8:19 AM, Theophan Dort <theop...@theophan.net> >> wrote: >> >>> I’m trying to build a very small web site for my church’s capital >>> campaign, using Bootstrap, and I can’t change the color of the font in the >>> header. I put a style in the section that changes the background >>> color fine, but the same selector doesn’t change the font color: >>> >>>.navbar { >>>background-color:#BB2F00; >>>color:white; >>>} >>> >>> I’m not very good navigating my way through the tools, but when I tried to >>> see, using Firefox Developer Edition, what was actually going on, it really >>> looked to me as though the rule that was being followed was indeed that the >>> color was FFF, but my eye says it’s still the gray that Bootstrap specifies. >>> >>> Here’s the test page: http://raisingthecross.org/navColorTest.html >>> >>> Thanks! >>> >>> Theophan >>> __ >>> css-discuss [css-d@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/ >> >> >> >> >> -- >> Ryan Reese >> __ >> css-discuss [css-d@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-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
If one pixel is causing such big issues, you may have bigger issues. On Tuesday, October 13, 2015, Crest Christopher <crestchristop...@gmail.com> wrote: > I should have designed at 319px width, not 320px width, arghh ! > > Tom Livingston wrote: > > > Other than viewport sizes, emulators aren't going to show you anything > reliable. > > > > On Tuesday, October 13, 2015, Crest Christopher > <crestchristop...@gmail.com > <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');> crestchristop...@gmail.com > <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>>> wrote: > > Those tools don't list devices by name. > > Karl DeSaulniers wrote: > > > On Oct 13, 2015, at 6:34 PM, Crest > Christopher<crestchristop...@gmail.com > <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>> wrote: > > > What is the second web developer tools extension for Chrome ? > > > > > "resiz e window" and "wed developer tools" are the names. > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > __ > css-discuss [css-d@lists.css-discuss.org > <javascript:_e(%7B%7D,'cvml','css-d@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://evolt.org> -- > http://www.evolt.org/help_suppo rt_evolt/ > <http://www.evolt.org/help_support_evolt/> > > __ > css-discuss [css-d@lists.css-discuss.org > <javascript:_e(%7B%7D,'cvml','css-d@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://evolt.org> -- > http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > <http://medialogic.com> > > > #663399 > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
Other than viewport sizes, emulators aren't going to show you anything reliable. On Tuesday, October 13, 2015, Crest Christopher <crestchristop...@gmail.com> wrote: > Those tools don't list devices by name. > > Karl DeSaulniers wrote: > >> >> On Oct 13, 2015, at 6:34 PM, Crest Christopher<crestchristop...@gmail.com> >> wrote: >> >> >>> What is the second web developer tools extension for Chrome ? >>> >> >> >> >> "resize window" and "wed developer tools" are the names. >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> __ >> css-discuss [css-d@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-discuss [css-d@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/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
browserstack.com has mobile devices. On Tuesday, October 13, 2015, Crest Christopher <crestchristop...@gmail.com> wrote: > I mean; to preview the changes, to verify the changes are done correctly, > not doing it blind folded ! > > Tom Livingston wrote: > > > browserstack.com <http://browserstack.com> has mobile devices. > > On Tuesday, October 13, 2015, Crest Christopher > <crestchristop...@gmail.com > <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');> crestchristop...@gmail.com > <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>>> wrote: > > The other emulator I'm using uses iOS 7.1.2 and the default Safari > browser. How can I makes the fixes using a legitimate WebKit > browser, I thought Chrome used WebKit ? > > Philippe Wittenbergh wrote: > > On Oct 14, 2015, at 07:51, Crest > Christopher<crestchristopher@g mail.com> wrote: > > True, how does one compare how Chrome emulates a device ? > > > Don’t trust the Chrome emulator. The rendering of the page you > see there is based on the Blink rendering engine, which > nowadays is quite different from the Webkit rendering engine. > The only thing where that emulator is useful is evaluating how > your page might look like given a viewport of xxx px by yyy px. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com/ > > > > > > > > > > > > > > > > > > > > > > > > * > __ > css-discuss [css-d@lists.css-discuss.org > <javascript:_e(%7B%7D,'cvml','css-d@lists.css-discuss.org');>] > http://www.css-discuss.org/mailman/listinfo/css-d > <http://www.css-discuss.org/mailman/listinfo/css-d> List wiki/FAQ -- > http://css-discuss.incutio.com/ <http://css-discuss.incutio.com/> List > policies -- http://css-discuss.org/policies.html > <http://css-discuss.org/policies.html> Supported by evolt.org > <http://evolt.org> <http://evolt.org <http://evolt.org>> -- > http://www.evolt.org/help_support_evolt/ > <http://www.evolt.org/help_support_evolt/> -- Tom Livingston | Senior Front > End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | > medialogic.com <http://medialogic.com> <http://medialogic.com > <http://medialogic.com>> #663399 * > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] iPhone difference 5 & 5c ?
browserstack.com has mobile devices. On Tuesday, October 13, 2015, Crest Christopher <crestchristop...@gmail.com> wrote: > The other emulator I'm using uses iOS 7.1.2 and the default Safari > browser. How can I makes the fixes using a legitimate WebKit browser, I > thought Chrome used WebKit ? > > Philippe Wittenbergh wrote: > >> On Oct 14, 2015, at 07:51, Crest Christopher<crestchristop...@gmail.com> >>> wrote: >>> >>> True, how does one compare how Chrome emulates a device ? >>> >> >> Don’t trust the Chrome emulator. The rendering of the page you see there >> is based on the Blink rendering engine, which nowadays is quite different >> from the Webkit rendering engine. >> The only thing where that emulator is useful is evaluating how your page >> might look like given a viewport of xxx px by yyy px. >> >> Philippe >> -- >> Philippe Wittenbergh >> http://l-c-n.com/ >> >> >> >> >> >> > __ > css-discuss [css-d@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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] [ADMIN] Hello, my friends, hello
I'll jump back in here and say a big thank you to Mr. Meyer for all that he has done thus far. Both with this list and in general. Also, a big thank you to "D'Arcy J.M. Cain" for offering to pick up the list. I have learned a lot here and hope it stays around...one way or another. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] [ADMIN] Hello, my friends, hello
> > With that said, I propose that we all move over to the Web Design list: > > <http://webdesign-l.com/> > > >From the WebDesign-L policy page: > >> The topic of the list is the technical, cultural, political, economic and >> artistic aspects of web [design and] development and design as a profession >> or hobby. > > I'm pretty sure the list mom is a member of css-discuss. I'm also > pretty sure Eric is a member of wd-l. > > Seeing that wd-l already exists, and it covers CSS plus everything > else, why not have the owners join forces and consolidate? > > Side note: The WebDesign-L list has also seen a drop in usage over the > last few years. Just another reason to combine the two lists from my > point of view. > > Who's with me?!?! :) > __ I've used WD-L only a few times (not counting while css-d was down). I don't think the responses are on par with css-d. I *get* answers, but, like stackoverflow, "just use Bootstrap" isn't a good answer to me. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Formatting Superscripts (and subscripts)
Google 'normalize.css'. There are styles in this for sup and sub. I'm not in a position to copy/paste the relevant bits, sorry. Also, you might find the entire normalize sheet useful as a reset. I use it with every project. HTH On Saturday, December 26, 2015, Jeff Zeitlin <edi...@freelancetraveller.com> wrote: > (I tried to post this before I'd discovered that the listware had > broken; I'm trying again...) > > Going over some of my sites pages, I've noticed that when a line of text > has a superscript in is, it seems to open the space between it and the > line above a little. What I'm wondering is simple: How do I prevent > this? > > Ideally, I'd like a pure-CSS way that works regardless of the actual > text size of the accompanying unsuperscripted text, and regardless of > the specific face selected. > > While I haven't needed to check subscripts, I imagine the same thing > would happen, and the space to the line below gets opened a little; I'd > like to be able to prevent that, as well. > > -- > Jeff Zeitlin > edi...@freelancetraveller.com <javascript:;> > __ > css-discuss [css-d@lists.css-discuss.org <javascript:;>] > 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/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] Formatting Superscripts (and subscripts)
>From normalize.css: sup, sub{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup{ top:-.5em; } sub{ bottom:-.25em; } Adjust as needed. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] [ADMIN] Hello, my friends, hello
I would miss it. I use(ed) it frequently and was glad for the expertise that I knew was at the other side of responses I received. I also enjoy helping people with issues as well. I did attempt to reach you on Twitter on Nov 19 when I first found my posts not getting through. I do hope you would consider a fourth option of just keeping it up. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@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] percentage widths don't add up to 100 in Safari and Opera
On 1/16/08, Felix Miata [EMAIL PROTECTED] wrote: On 2008/01/16 16:06 (GMT) Jason Crosse apparently typed: Using ems would also mean that the layout would break when the user changes font size. Properly using ems to size things is precisely how you prevent layouts from breaking when actually used font size differs from the font size you used while designing. Also, when you design using the user's default as the base (e.g. body, td p @ font-size: 100%), he won't need to change it. -- Most designers, and more importantly clients, don't want their body copy at 16pt. So I am always setting a font-size on p's, etc. to .8 or .85ems. Should someone who NEEDS larger text scale up these pages, the layout may break. However, you are correct that proper use of ems should prevent it from breaking in the first place. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] 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] Coding for Chinese audience
Hi list, Can anyone help me prepare for coding an HTML email for a Chinese audience? I have never done anything with Asian characters before. I am on a Mac using DW8. Any help would be appreciated... TIA -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] IE 6/7 issue
Hi list, Here's the page: http://proof.mlinc.com/mlinc.com/06/news/ Hit it in FF/Safari for desired layout for head/paragraph relation. Why won't it work in IE 6/7? Just can't see it. Thanks -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] IE 6/7 issue
On 3/30/07, Tom Livingston [EMAIL PROTECTED] wrote: Hi list, Here's the page: http://proof.mlinc.com/mlinc.com/06/news/ Hit it in FF/Safari for desired layout for head/paragraph relation. Why won't it work in IE 6/7? Just can't see it. Thanks -- Always happens to me. When i enlist the public for help, I figure it out. I guess it's the fear of looking stupid. :-P Thanks if you looked... Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Vertical Centering
Listers, I recall someone posting a very easy method of vertical centering a block in a viewport a while back. Seemed straight forward - positioning with percentages and a little negative margin nudging. Googled but came up empty. Can anyone point me to this? How cross-browser is it? Thanks a bunch. -- Tom Livingston __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Vertical Centering
On 3/23/06 1:24 PM, ~davidLaakso [EMAIL PROTECTED] wrote: You'll be sorry. I'm not sorry (well, maybe about the 'Love you' comment...), but the bit about the content being off screen on short windows was correct. Of course, in my case the window had to be _very_ short, but none the less, it wasn't ideal. My content has a fixed width and height, so the other issues didn't apply. We used a table. CSS 3, where are you... Thanks anyway all. -- Tom Livingston __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] I think I need some hacks for IE...?
On 4/20/06 2:49 AM, GypsiiRose Baptiste [EMAIL PROTECTED] wrote: Do people still test for Opera? Looks good in Opera Mac too. I recommend Opera Mac. Try this version: http://snapshot.opera.com/mac/m90b1.html -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 Break properties
Listers, Are the page-break properties widely supported? Or at least in IE6, Safari and maybe Opera (Win/Mac)? Any resources on their use besides the w3c site? TIA -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Opera and background-image -- a filter hack
On Wed, 11 May 2005 11:07:55 -0400, Ingo Chao [EMAIL PROTECTED] wrote: Uwe Kaiser schrieb: So I will enlarge the bitmap for some few pixels. No need to despair! http://www.satzansatz.de/cssd/tmp/bgfilter.html Mac tests please. Mac Opera 8b1 sees... maroon. -- Tom Livingston Senior Multimedia Artist mlinc.com -- www.browsehappy.com www.opera.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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 please!
On Fri, 13 May 2005 14:39:36 -0400, anthony croshaw [EMAIL PROTECTED] wrote: I have no way of checking macs, cheers Ant http://www.onceuponatimenursery.com http://www.onceuponatimenursery.com/ Looks good in Safari 1.3 and Opera 8b1 except in both, the pages scroll down much farther than needed past the IE7 bug. -- Tom Livingston Senior Multimedia Artist mlinc.com -- www.browsehappy.com www.opera.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Design-centric Standards resources
Hello list, I've been to the Wiki. Can anyone recommend Designer-centric Standards resources to help make designers aware of designing with standards in mind? Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com --- www.browsehappy.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] Float help
Hello list, I am having trouble with a layout. If you use FF and have Web Dev toolbar you will see my dilemma. I can't find where the text under the thumbnails is getting the huge width from. I'm sure it is something stupid. http://www.petticoatjewels.com/test/designs.htm TIA -- Tom Livingston Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Float help
On Mon, 27 Jun 2005 16:19:51 -0400, Tom Livingston [EMAIL PROTECTED] wrote: Hello list, I am having trouble with a layout. If you use FF and have Web Dev toolbar you will see my dilemma. I can't find where the text under the thumbnails is getting the huge width from. I'm sure it is something stupid. http://www.petticoatjewels.com/test/designs.htm TIA I solved my initial problem, but am not sure if my fix will make anyone clasp a hand over their mouth to keep the last thing they ate from getting on their shoes. Please take a peek if you have the time and also let me know, if possible, how to get rid of the extra space to the left of the images. They should line up, on the left, with the paragraph above them. TIA -- Tom Livingston Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Float help
On Tue, 28 Jun 2005 18:05:12 -0400, Holly Bergevin [EMAIL PROTECTED] wrote: Assuming the problem is in IE/Win (my Mozilla looks fine, as does Opera) please see - http://www.positioniseverything.net/explorer/doubled-margin.html hope that helps, ~holly __ 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/ Words of wisdom from the master... ;-) Sounds like it exactly. Thanks Holly! -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] problem with background image
Any thoughts? Page has 33 validation errors, including something with the body... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Site Vista
Hello list, Possibly old news, but have you all seen this? http://www.sitevista.com/ Some good features, like full-page-depth screen shots. Looks interesting. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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: stephenjoneslaw.com
On Thu, 14 Jul 2005 13:56:08 -0400, Jeff Clark [EMAIL PROTECTED] wrote: (especially if you're on a Mac or using a browser that isn't FF or IE) http://www.stephenjoneslaw.com/home Jeff Mac Opera 8.01 looks good. This is good stuff. Text is smaller than you normally see, but very readable to me and it's nice to see something unique for a change. Screenie available upon request. There is some overlapping that may be intentional, but not sure. Near the top right corner of the green phone number area - the bevel/shadow effect on the photo is getting cut and doesn't flow down nice along edge of the white copy area. Follow that? ;-) Nice! -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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, Please.
On Mon, 29 Aug 2005 09:08:12 -0400, Felix Miata [EMAIL PROTECTED] wrote: (image is only properly representative if viewed at 1792x1344 or 1800x1350 resolution) and the percentage of users in her site logs that run 1800x1350 would be interesting to know, no? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Opera ASA giving away license codes (1 day only!)
On Tue, 30 Aug 2005 11:36:03 -0400, Timothy J. Luoma [EMAIL PROTECTED] wrote: Go here http:// apparently, everyone did go there. Servers are sure getting a beating -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Now possible: CSS Constants
On Wed, 31 Aug 2005 18:01:46 -0400, Eric A. Meyer [EMAIL PROTECTED] wrote: @server constants { baseColor: #ABCDEF; hiliteColor: #0DECAF; baseFont: Helvetica, Arial, Verdana, sans-serif; } body {font: small baseFont;} a:link {color: baseColor;} a:hover {color: hiliteColor;} Perhaps I am just not as worldly as others (of of limited brain capacity), but I am having trouble seeing how the above would differ from this: html, body{color:#ABCDEF; font-family:Helvetica, Arial, Verdana, sans-serif;}/*or just body*/ a{color:#FDECAF;}/*even necessary?*/ a:hover{color:#0DECAF;} I can see where hiliteColor might be handy, but still, why not just define it where needed? I am very familiar with the server side include concept as I use ColdFusion frequently, but given the setup requirements for this, it doesn't seem very universal... Enlightenment need. TIA -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Now possible: CSS Constants
On Thu, 01 Sep 2005 09:29:57 -0400, Rimantas Liubertas [EMAIL PROTECTED] wrote: Take any real big CSS file with the same five-six colors repeated tens of times for various elements and benefits will be obviuos. And thats very handy for color skining. Still, having Find And Replace in my editor seems easier that the setup for this... just me I guess -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Win IE5/5_5 Help
Hello all, I have been going around and around with this and decided it was time to call in the experts... I am having a width/border/lining-up issue in IE 5 Win and IE 5.5 Win on this page (and others most likely): http://66.155.251.18/joinmvp.com/members/ look at the left and right top red edges to see my issue. I have been using browsercam (Win 2000 ie5/ie5.5) for testing, but can't get it. FWIW, I don't see it with my multiple installs of IE on my PC... Anyone see the trouble and have a solution? TIA (very much!) -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Win IE5/5_5 Help
On Mon, 12 Sep 2005 13:11:42 -0400, Tom Livingston [EMAIL PROTECTED] wrote: Anyone see the trouble and have a solution? Well, you won't see it now cause I finally got it. If you can take a peek and confirm my BrowserCam results I'd appreciate it. Thanks to you if you looked already... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Jello layout style
Hello list, Someone mentioned the Jello layout style during a thread over on the WSG list (http://positioniseverything.net/articles/jello-expo.html - thank you who ever you are -- very cool!) but I was wondering if anyone has used this and if they ran into any problems with it. It seems to fit a need I have on an upcoming project and I wanna know now if I'm gonna wish I didn't go down the jello-lined path beforehand. TIA -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] How to get a good monospaced font for IE6
On Wed, 21 Sep 2005 14:16:47 -0400, Rick F. [EMAIL PROTECTED] wrote: I was originally using #4 which works great on Firefox and Safari but doesn't for IE6. The only one that looks quasi monospaced for IE6 is #2.. FWIW, my reply to Rick OL... I guess if all else fails, you could use a conditional comment maybe? !--[if lte IE 6] style type=text/css media=all body{font-family: Arial, Courier New, sans-serif, monospace;} /style ![endif]-- adjust as needed... Rick, i noticed an errant br in what I sent you before... nuke it. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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: simple stuff
On Thu, 22 Sep 2005 13:09:34 -0400, Guy K. Haas [EMAIL PROTECTED] wrote: Could someone out there on a Mac let me know whether http://covinahigh68.com/testing.htm looks OK? Stretchable banner at top fades from white to red, with a red colt in the left end, a title in silver, and a white colt in the right end. Narrowing the window should cause the title to divide into two lines. Yup. Opera 8.5 Mac. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Validator Encoding Note
On Tue, 27 Sep 2005 15:42:59 -0400, Steve Clason [EMAIL PROTECTED] wrote: Most likely your host is serving this: Content-Type: text/html; charset=UTF-8 So if the host is serving this, this isn't something I can change when making a page, right? Obviously, I can change the meta but should I? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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 - Layer appears sometimes, not others
On Fri, 30 Sep 2005 03:48:57 -0400, Travis Nep Smith [EMAIL PROTECTED] wrote: Safari wouldn't unhide a layer using JavaScript, if the parent layer was still set to be hidden Sounds logical to me. It's in a container that's hidden, so it's hidden. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] First full CSS site
On Thu, 06 Oct 2005 10:56:57 -0400, Trevor Boult [EMAIL PROTECTED] wrote: Should I really have a 17k stylesheet? Not really. Although impressively neat and tidy, you could do with some efficiencies. Things like font-family. Unless changing font families, you can specify it once on the body and be done with it. body{font-family:Arial, Helvetica, Sans serif ;} Without going through everything, I think you can see where I'm going. I'm sure you can do multiple positioning ideas with one element, rather than id-ing or class-ing everything to be able to put it where you want. Take a look at style sheets from other sites for ideas. I'm sure others on the list will add to this... HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] First full CSS site
On Thu, 06 Oct 2005 22:23:48 -0400, Benjamin Rossen [EMAIL PROTECTED] wrote: I stand corrected. Thanks. Benjamin Rossen. __ 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/ Me too. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] background-image doesn't show
On Mon, 10 Oct 2005 11:03:39 -0400, Marian [EMAIL PROTECTED] wrote: www.tanase.it Off the top of my head, make sure the image path is in relation to the stylesheet not the page. This has caught me a couple times... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Jumping text in IEWin
Hello list, In a fluid layout I have a container with a head (h2) and a p. Within this container, I am also floating an image right. As I change the width of my viewport, the text wrapping changes as expected - except in IEWin (6 and 5.5). As the length of the lines of, I believe the h2, change the h2 and p jump up and down approximately the height of the floated image. Unfortunately I can't post the page... NDA and all but if this sounds familiar I would love to hear your tricks or thought processes on stopping this behavior. I think I know what is conceptually happening, but can't get it to stop. I will get it at one width, but then as I change the window width, it will do it again at a different width. I can post code snippets if it will help, otherwise I might have to slap together a test page... TIA for thinking about it... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Jumping text in IEWin
Seems I've got rid of the problem in IEWin 6 and 5.5 atleast. I added some padding and added overflow:visible;. Working in my situation anyway. Thanks for the reply. On Tue, 11 Oct 2005 19:16:45 -0400, Christian Montoya [EMAIL PROTECTED] wrote: - Use percentages for all columns in the layout - Use Javascript to force IE to apply a min-width and max-width to the layout After this, there really isn't much you can do, other than make certain block level elements clip on overflow, though this probably won't fix your problem. Russ Weakley's presentation: http://www.maxdesign.com.au/presentation/liquid-layouts/index.htm A resources page that might help, includes Javascript technique: http://liquid.rdpdesign.com/resources/ Seems I've got rid of the problem in IEWin 6 and 5.5 atleast. I added some padding and added overflow:visible;. Working in my situation anyway. Thanks for the reply. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] List with hover background images
Listers... Here is the code I am using on a list of links: #content ul.linklist{list-style-type:none; margin:0 0 20px 0;} #content ul.linklist li{padding:0 0 .3em 40px;} #content ul.linklist a{display:block; padding:0 0 0 20px; margin:0 0 0 -20px;} #content ul.linklist a:hover{display:block; background:url(../images/linklist_rollarrows.gif) top left no-repeat; padding:0 0 0 20px; margin:0 0 0 -20px;} div id=content snip ul class=linklist lia href=#ASA DirectsupSM/sup/a/lili a href=#FASTFUNDsupSM/sup/a/lili a href=#Guarantee Only Processing/a/lili a href=#CommonLine Processing/a/lili a href=#ELM (Education Loan Management)/a/lili a href=#Sallie Mae Laureate/a/lili a href=#ASA's Shadow Program/a/lili a href=#Mapping Your Future/a/lili a href=#Origination and Operational Consulting/a/lili a href=#e.clips Signup and Article Archives/a/lili a href=#Preferred Lender List Services/a/lili a href=#PLUS on the Web/a/lili a href=#PLUS on the Phone or Fax/a/lili a href=#E-signature (Electronic Signature)/a/li /ul /div In some browsers however, my links work across the page, beyond the text, even over blank space like this: |-link text--| hover and link work here The display:block is most likely the cause, right? But I can't figure out how to achieve another way what I am after with the links, which is to have the hover bg image _and_ have the links indented the same if they break to 2 lines. Any thoughts? TIA -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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/
Need more help Was: [css-d] List with hover background images
On Wed, 12 Oct 2005 10:48:05 -0400, Tom Livingston [EMAIL PROTECTED] wrote: |-link text--| hover and link work here OK I solved the above issue by using display:table-cell and feeding WinIE display:block inCCs. But the same fix will not work for this: #faphomecontent p{margin-right:25px; width:90%;} #faphomecontent a.subcatlink{display:block; padding-right:3em; color:#999; background:url(../images/fap/linkone_off.jpg) top right no-repeat; text-decoration:none;} #faphomecontent a.subcatlink span{font-family:Trebuchet MS, Arial, Sans, Helvetica, sans-serif; color:#E5931F; font-style:italic; font-size:1.1em; text-decoration:none;} #faphomecontent a.subcatlink:hover{display:block; padding-right:3em; color:#000; background:url(../images/fap/linkone_on.jpg) top right no-repeat; text-decoration:none;} #faphomecontent a.subcatlink:hover span{font-family:Trebuchet MS, Arial, Sans, Helvetica, sans-serif; color:#9f5e27; font-style:italic; font-size:1.1em; text-decoration:none;} div id=faphomecontent h2 class=subhomehead:: Professionals/h2 pa href=# class=subcatlinkspanLoan Management/spanbr / Link copy goes here. /a/p /div No lists involved with this. All I want is link text with a backgnd image to show on hover. And ONLY the text should hover/link. The above again has active blank space within the href... yes, because of display:block; but I can't get the effect of text-pushed-over-to-allow-for-hover-bg-image w/o it! Am I nutz?? Am I asking the impossible? That window ledge is looking pretty good right now. I'm on the fourth floor.. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Good looking fluid-width sites
On Mon, 24 Oct 2005 14:06:38 -0400, Austin, Darrel [EMAIL PROTECTED] wrote: The above link is a really nice example of the theory. Alas, there still doesn't seem to be many commercial sites that actually implement such a layout. Still looking, though. ;o) We are working on a commercial site using Mike Purvis's Jello. I can't show it around right now though, but if I do say so myself, it's quite spiffy! ;-) Jello is pretty easy to work with. I have layouts using 1, 2 and 3 columns. I really like it! (Yeah Mike!) -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] New article on PIE - In Search of the One True Layout
On Wed, 26 Oct 2005 12:05:32 -0400, Donna Casey [EMAIL PROTECTED] wrote: Anyone else, since Alex needs confirmation? Donna Casey Wow. How'd you do that!?!?!? OS X FF 1.0.7 Don't see it in Safari or Opera 9pr1 Mac - under Tiger -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] New article on PIE - In Search of the One True Layout
On Wed, 26 Oct 2005 13:15:55 -0400, Alex Robinson [EMAIL PROTECTED] wrote: Anyhow, even if no one is up for doing the test case, can someone please say whether the problem occurs on either the boxes or the borders examples? Or even the simple unadorned one? Boxes did not act the same FF 1.0.7... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Two inline, centered DIVs with line breaks inside
On 4/24/06 4:00 PM, Mike Botsko [EMAIL PROTECTED] wrote: The problem with the float: left is that it offsets the centering. The two boxes are together and with a clear element the DIV boxes surround the links properly, but both links show up in the top left of the wrapping DIV. .linkButtons {position:relative; margin:0 auto; width: 400px; } -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Site Check Please -- ancientstones.com
On 4/27/06, David Merchant [EMAIL PROTECTED] wrote: snip a max measurement: 544 for the width TTFN, David /snip 8^O 544!? Max!? Wow! What's that look like at a 1600x1200+ resolution? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] asterisk in front of font property
On 5/16/06, Tom Livingston [EMAIL PROTECTED] wrote: body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;} It is not valid. I didn't think it was. 'font:' with _only_ a size attribute is incorrect. No? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com -- -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Lock down some text sizes
I'll just feel sorry for the site's visitors. For an example of this technique, see http://www.hotbagelcompany.com (a local bagel shop here that I'm actually quite fond of) Yikes! -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] CSS onclick event?
On 5/17/06, Design Groups [EMAIL PROTECTED] wrote: Christian Montoya wrote: a:active { color:whatever; } Yes, but that only works when you click the button (or mouse down). When you unclick and move away, the color doesn't remain behind, it reverts to the visited color. What I'm looking for is the active state to stay, until another link is clicked. ~Shelly ___ I usually use a class (.active{background-color:pink; color:red;} for example) and then if I am on page X then give this link the .active class. We use a middle-ware for this (ColdFusion, usually), but I am sure JS can be used. Or hard code the pages for this. HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] font sizing
On 5/23/06, Shawn Lawler [EMAIL PROTECTED] wrote: what is the intent of the size calculation 62.5%/1.6em? Felix? :-) -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] CSS and Email
reason why this is happening and is there a way to fix it? Without seeing code, I can only offer a tip. We have had great sucess with CSS in HTML emails as long as all styles are inline. i.e: li style=padding:47em;Foo/li HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Flexible box with image in the background
.ako-pokracovat-box-middle div { float: left; width: 500px; background: url(../images/ako-pokracovat-box-middle.gif) repeat-y; } change to this maybe? .ako-pokracovat-box-middle{/*took out 'div' here */ float: left; width: 500px; background: url(../images/ako-pokracovat-box-middle.gif) repeat-y; } HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Elastic layouts: want to confirm
idea for accessibility, it often leads to lots of horizontal scrolling What about a width limit (no, not a fixed width site) on the width of the main content in relation to the rest of the page (like an article) so as to allow the font scaling to occur vertically instead of horizontally? This seems like a better solution to me. Like this maybe? http://66.155.251.18/mlinc.com/test/ Scale up. No horiz scroll. -- -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/