Re: [css-d] responsive video
I know this list is CSS-centered, but you could always use: http://fitvidsjs.com/ On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston tom...@gmail.com wrote: I'm not seeing the css in the head as having any effect on the video or it's wrapper for some reason. FireBug in FF 23.0.1. On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com wrote: I use the last solution here: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phpwhich is taken from Thierry Koblentz' solution here: http://alistapart.com/article/creating-intrinsic-ratios-for-video On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote: http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. css is in the head of the document. any help would be appreciated --ron __ 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/ -- Chris Rockwell __ 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 | mlinc.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/
Re: [css-d] 3-column layouts, current state of play
I would say that Mathew James Taylor's 3-col holy grail layout is the way to go. He updated them last year I believe, so they're not all that old. On a site I am working on I am using a modified version of his 3col theory in a responisive layout with percentage-based widths. Works like a charm. ~Nate Sent from my Palm Pre On Sep 20, 2010 4:39 PM, Richard Grevers lt;richard.grev...@gmail.comgt; wrote: It's a while since I did a 3 column layout, and while looking around a couple of sites (Alex Robinson's onetruelayout and Matthew James Taylor's) I realised that most of this information is 4-5 years old. Which of the gotchas are still valid in latest versions? (I recall not using onetruelayout originally because of scrollbar issues in Opera) My requirements are: - 3 columns, percentage width based) (one is purely decorative and will contain only a background image) - wrapper will be fluid with maximum and minimum widths set - any order (in fact there will be four templates using all 4 possible order permutations) - image backgrounds on some columns (difficult with - full height columns - sticky footer Are there any more up-to-date layout articles? -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Webkit problem with a list - I just can't figure it out
Hey guys, There is a problem with the way a nested unordered list in my sidebar is rendering. In Firefox everything is working fine (doesn't it always?), but in webkit browsers the first li renders properly while it's siblings are bumped to the right about 50px. I spend about 3 hours looking at it today and just could not figure it out. I could really use somebody with a fresh set of eyes to look at it and see if I have missed anything obvious. Could one of you please help me out? Link: http://dev.texasgolfhof.org/ Thanks, Nate __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Colors in PShop vs. browser
Lalena wrote: Hi, has anyone else experienced seeing colors somewhat differently in Photoshop vs. a web browser? Everything looks significantly darker in Photoshop. It certainly adds an unnecessary obstacle to the design process! Any tips on why this might be happening, and how to alleviate it? (I'm trying to match the background of an image--it's an image of type--to a hexadecimal background color.) You've got a profile mismatched in your file. For web graphics your RGB profile should be set for the sRGB icc profile. And your graphics should be saved for web, not by using the 'Save As' option under the 'File' tab, but from teh 'Save for web and devices' dialog. What file formats are you saving out? ~Nate __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inline Image 4px Gap
David and Martin, Ahh yes, line breaks. David - I guess I see every display issue as a css issue these days. Nate On 5/15/07 9:51 PM, David Hucklesby [EMAIL PROTECTED] wrote: On Tue, 15 May 2007 20:48:45 -0500, Nate Kresse wrote: This is probably really basic, but can anyone tell me why there is a 4px gap between inline images. Padding and margins set to 0 and still the gap persists. I've searched through the archive and see references to it, and obviously if you float the images the gap disappears, but I'm curious as to why this occurs. Here is my test case: http://www.stammbt.com/testing/css/inline_images/ Simple. You have spaces between each image. Try adding an HTML comment between each IMG tag, or put them all on one line without spaces between. Did you have a CSS question? Cordially, David -- __ 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] Inline Image 4px Gap
This is probably really basic, but can anyone tell me why there is a 4px gap between inline images. Padding and margins set to 0 and still the gap persists. I've searched through the archive and see references to it, and obviously if you float the images the gap disappears, but I'm curious as to why this occurs. Here is my test case: http://www.stammbt.com/testing/css/inline_images/ Anyway, no big deal, but if anyone can point me to an answer I'd be curious to find out more. Thanks, Nate Kresse __ 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 7 - Extra padding-top
David, I don't believe tight coding had anything to do with it. You simply moved the background style to the containing div. This is a fix but not always possible or desirable. See this second test case which uses your code with the background style applied to the containing div (#pagehead): http://www.stammbt.com/testing/testie7_2.html Thanks, Nate Kresse On 10/22/06 4:24 AM, ~davidLaakso [EMAIL PROTECTED] wrote: Nate Kresse wrote: Hello All, I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. Check out my test case here: http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div You get the point... This page displays correct in every browser that I've loaded it into except IE7. I have no idea what is going on. Or why it is going on. Or what causes something to correct it.. Tight coding seemed to yield a consistent result? http://www.chelseacreekstudio.com/ca/cssd/bug.html http://www.browsercam.com/public.aspx?proj_id=293476 Best, ~dL __ 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 7 - Extra padding-top
Correction: You moved the background style to the paragraph inside the containing div. Thanks, Nate On 10/23/06 12:22 PM, Nate Kresse [EMAIL PROTECTED] wrote: David, I don't believe tight coding had anything to do with it. You simply moved the background style to the containing div. This is a fix but not always possible or desirable. See this second test case which uses your code with the background style applied to the containing div (#pagehead): http://www.stammbt.com/testing/testie7_2.html Thanks, Nate Kresse On 10/22/06 4:24 AM, ~davidLaakso [EMAIL PROTECTED] wrote: Nate Kresse wrote: Hello All, I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. Check out my test case here: http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div You get the point... This page displays correct in every browser that I've loaded it into except IE7. I have no idea what is going on. Or why it is going on. Or what causes something to correct it.. Tight coding seemed to yield a consistent result? http://www.chelseacreekstudio.com/ca/cssd/bug.html http://www.browsercam.com/public.aspx?proj_id=293476 Best, ~dL __ 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-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 7 - Extra padding-top
Hello All, I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. Check out my test case here: http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div You get the point... This page displays correct in every browser that I've loaded it into except IE7. __ 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] A note on Firefox, flashing / flickering content when using overflow auto
Yeah, this is the problem I had on http://www.alterform.com It seems that it is a somewhat common bug that happens on gamespot.com and anandtech.com. It also happens when a block is taken out of, or put back into the flow, such as if you are toggling the display of a block item. It's fixed in Deer Park, and bugzilla has quite a few mentions of it, so I know the FF team is aware of it. Also this problem is non-existent on FF for the Mac. I cant duplicate the first tab thing, at least it happens in every tab for my site. If anyone finds a workaround, please let me know :) Nate Cavanaugh +/alterform.com +/shift22.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ingo Chao Sent: Friday, June 24, 2005 8:30 AM To: Roland Swingler Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] A note on Firefox, flashing / flickering content when using overflow auto Roland Swingler schrieb: This is a very odd bug in Firefox, which has been fixed in the development version, but not in the current distribution version (1.0.4). If you have a div with the property overflow: auto inside a floated div, then when you resize the screen or cause Firefox to repaint the screen the overflowed element will flicker for an instant out of place. It seems that this only happens if the page is IN THE FIRST BROWSER TAB, on second, third etc. tabs there is no problem. I don't know if anyone knows a workaround for this problem. The only workaround I know of (which sometimes does work, sometimes not) is to absolutely position the overflowed element, or, if there is any bug trigger like a navigation outside of the overflowed element, to absolutely position that navigation/link. This is of course not always possible, because normally the layout relies on the floating, and often the designer does not want to change it. In addition to the trigger you have mentioned, sometimes just text zooming cntrl +/- does show the problem. The first tab problem is new to me, nice catch. You may have seen that the flickering content appears at a position where the div/object would have been placed without any margin or offset. That means, at the origin of its containing block. That's the idea behind the a.p. workaround. You might want to share the URL to your testcase, so we could try to find more fixes. Ingo __ 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-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] Firefox/NN Flicker on page load on floated divs with overflow: auto set
Hi all, Im designing this site: http://alterform.com/af2/ and Im running into a problem on Gecko based browsers on the PC (doesn't happen in FF on the mac, or in Safari). Basically, if you change font size, click on the toggle display links inside the news area, or even on page load it flickers the boxes to the left. It also doesn't happen if I set the boxes to overflow: hidden, scroll, or pretty much anything but auto. Unfortunately, I need auto set. Does anyone have a work around, hack, or even a real fix? Thanks in advance :) Nate Cavanaugh +/alterform.com file:///\\alterform.com\ +/shift22.com file:///\\shift22.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/
