[css-d] Droid RAZR problem
Hi. I'm rebuilding a very old website, and I've got a page designed that seems to work properly on all platforms, except on the Droid RAZR. Contents within a p tag don't fill their entire containing div. It only seems to fill the left half of a div. I'm not an expert, but I'm scratching my head. Any help is appreciated. The page is: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) Thanks. Bruce __ 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] Droid RAZR problem
32 HTML errors and 68 warnings; once these are corrected, there is a far greater chance that the site will behave correctly and consistently across all platforms. http://validator.w3.org/check?uri=http://www.sportsmansresource.com/flocalxnewyork_1a.htm Philip Taylor bho...@aol.com wrote: Hi. I'm rebuilding a very old website, and I've got a page designed that seems to work properly on all platforms, except on the Droid RAZR. Contents within a p tag don't fill their entire containing div. It only seems to fill the left half of a div. I'm not an expert, but I'm scratching my head. Any help is appreciated. The page is: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) __ 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] liquid layout - how to make images to scale ?
Looks like images are scaling in Firefox latest on Mountain Lion. What browser are you not seeing scaling? The only image that does not scale is the #highlight-wrapper because it's a bg image. Maybe I'm missing something? __ 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] liquid layout - how to make images to scale ?
On Aug 30, 2012, at 19:59 , Micky Hulse wrote: Looks like images are scaling in Firefox latest on Mountain Lion. What browser are you not seeing scaling? The only image that does not scale is the #highlight-wrapper because it's a bg image. Hm… Here's my test case, and what I do expect to happen: Test case: Browsers: Firefox 15.0 / Chrome 21.0 IOS: MAC OS X Lion - 10.7.3 Resolution: 1920x1200 What I get: I get an image that doesn't scale until the end of it's container. The img width won't fit the article element that contains it. What I do expect: I expect the image to enlarge, until it reaches the end it's container. Visually, I'm expecting the image to be as wide as the paragraph immediately below, in a way that, the right side of the image stays vertically aligned with the right side of the paragraph below. k. regards, mem Maybe I'm missing something? __ 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] liquid layout - how to make images to scale ?
On Aug 30, 2012, at 19:59 , Micky Hulse wrote: Maybe I'm missing something? No. But I was. :) I was thinking that the max-width will format my img to be as wide as the container but it doesn't. I either should use width. Or upload a bigger image and use max-width to get the desired effect. Thanks again for taking your time. __ 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-d] Inline media queries?
Throwing this one out there:
Is it possible to inline a media query in a style= attribute?
For example:
div style=background-image: url(foo.png); @media only screen and
(min-width: 1005px) { /* styles here */ }/div
Is that a crazy idea? Better yet, is that a valid idea?
Back story: I'm building a jsonp widget, and it would make life easier
if I could inline the MQ.
ducks for cover
Thanks!
M
__
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] liquid layout - how to make images to scale ?
On Thu, Aug 30, 2012 at 3:37 PM, mem talofo.l...@gmail.com wrote: I was thinking that the max-width will format my img to be as wide as the container but it doesn't. I either should use width. Or upload a bigger image and use max-width to get the desired effect. Ahhh, I see now! Yah, I've made that mistake before also. :) Glad you got 'er figured! Happy coding. Cheers, M __ 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] Inline media queries?
Correction:
Better yet, is that a valid idea?
I meant to say valid code.
I've just tested:
div style=height: 20px; background-color: #000; @media only screen
and (min-width: 1005px) { background-color: #eee; }/div
It don't work none. :(
Back to the drawing board! :D
Thanks,
M
__
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] Droid RAZR problem
Thanks for the tip. I cleared most of the errors, other than the alt attributes (which I will get to later), and still the same problem on the RAZR. I can't imagine that missing alt attributes would cause this. Any other suggestions? _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) Thanks in advance. Bruce In a message dated 8/30/2012 2:40:15 P.M. Eastern Daylight Time, p.tay...@rhul.ac.uk writes: 32 HTML errors and 68 warnings; once these are corrected, there is a far greater chance that the site will behave correctly and consistently across all platforms. http://validator.w3.org/check?uri=http://www.sportsmansresource.com/flocalxn ewyork_1a.htm Philip Taylor bho...@aol.com wrote: Hi. I'm rebuilding a very old website, and I've got a page designed that seems to work properly on all platforms, except on the Droid RAZR. Contents within a p tag don't fill their entire containing div. It only seems to fill the left half of a div. I'm not an expert, but I'm scratching my head. Any help is appreciated. The page is: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) __ 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] Droid RAZR problem
Well, I still see 29 errors, Bruce, of which approximately 50% are the use of unescaped where amp; is required. I doubt whether fixing these will improve the RAZR problem, but as I have no idea what a Droid RAZR is, I am not going to be able to be of much further help. Philip Taylor bho...@aol.com wrote: Thanks for the tip. I cleared most of the errors, other than the alt attributes (which I will get to later), and still the same problem on the RAZR. I can't imagine that missing alt attributes would cause this. Any other suggestions? _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) Thanks in advance. Bruce __ 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] Inline media queries?
On 31/08/2012 8:47 AM, Micky Hulse wrote:
Correction:
Better yet, is that a valid idea?
I meant to say valid code.
I've just tested:
div style=height: 20px; background-color: #000; @media only screen
and (min-width: 1005px) { background-color: #eee; }/div
It don't work none. :(
Back to the drawing board! :D
Thanks,
M
Media queries usually contain selectors.
http://www.w3.org/TR/CSS21/media.html#at-media-rule
Could you use embedded style in the head element? Also since you have
inline style, you need to use '!important' to override the inline style.
!doctype html
style type=text/css
@media only screen and (min-width: 1005px) {
div { background-color: #eee !important; }
}
/style
div style=height: 20px; background-color: #000;v/div
--
Alan Gresley
http://css-3d.org/
http://css-class.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/
Re: [css-d] Inline media queries?
On Thu, Aug 30, 2012 at 5:01 PM, Alan Gresley a...@css-class.com wrote: Media queries usually contain selectors. Ha! Good point! I totally missed that. I'm so used to writing inline styles without selectors (for obvious reasons), I did not think to add a selector to the inline MQ. :D I assume that still would not work though. Could you use embedded style in the head element? Also since you have Good call! Actually, that's what I'm doing now. :) inline style, you need to use '!important' to override the inline style. Thanks for tips! Thanks for help, I really appreciate the help! Have a great day. Cheers, M __ 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] Droid RAZR problem
On Thu, Aug 30, 2012 at 2:22 PM, bho...@aol.com wrote: Hi. I'm rebuilding a very old website, and I've got a page designed that seems to work properly on all platforms, except on the Droid RAZR. Contents within a p tag don't fill their entire containing div. It only seems to fill the left half of a div. I'm not an expert, but I'm scratching my head. Any help is appreciated. The page is: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) Thanks. Bruce Umm. Are you trying to hit a mobile device? The above url is to a fixed width 980px layout. I see no device-width meta tag in the head of the document; nor, any 480 media query in the style sheet. If you are using a different url for mobile, I am unable to find it on the provided page. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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/
Re: [css-d] Droid RAZR problem
It's not geared toward any specific browser or mobile device, and it seems fine in every browser and mobile device, except that one phone - the Droid RAZR. If having a device-width meta tag or a 480 media query is something that will help, then I'll admit it's new to me and something I should learn about. But I don't get how it seems fine in Android phones, except the RAZR. Thanks, Bruce In a message dated 8/30/2012 10:48:39 P.M. Eastern Daylight Time, laakso.davi...@gmail.com writes: On Thu, Aug 30, 2012 at 2:22 PM, bho...@aol.com wrote: Hi. I'm rebuilding a very old website, and I've got a page designed that seems to work properly on all platforms, except on the Droid RAZR. Contents within a p tag don't fill their entire containing div. It only seems to fill the left half of a div. I'm not an expert, but I'm scratching my head. Any help is appreciated. The page is: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1a.htm) Thanks. Bruce Umm. Are you trying to hit a mobile device? The above url is to a fixed width 980px layout. I see no device-width meta tag in the head of the document; nor, any 480 media query in the style sheet. If you are using a different url for mobile, I am unable to find it on the provided page. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Droid RAZR problem
On Thu, 30 Aug 2012, bho...@aol.com wrote: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ http://b.cfaj.ca/sportsmansresource.jpg (The page continues like that all the way to the bottom.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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/
