Re: [css-d] display:inline-block differences in browsers
mar 17 2014 05:10 John j...@coffeeonmars.com: I think I'm getting closer to understand how to use this new (to me) method of positioning, but I don't get what it's relative to, such that Firefox renders it differently from Opera, Chrome and Safari.. Absolute positioning is relative to the nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. Just position:relative; is enough for the positioning context element. Without a positioning context you are effectively positioning relative to the body element. All of this is of course Elementary CSS Layout. __ 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] display:inline-block differences in browsers
mar 17 2014 08:35 MiB digital.disc...@gmail.com: mar 17 2014 05:10 John j...@coffeeonmars.com: I think I'm getting closer to understand how to use this new (to me) method of positioning, but I don't get what it's relative to, such that Firefox renders it differently from Opera, Chrome and Safari.. Absolute positioning is relative to the nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. Just position:relative; is enough for the positioning context element. Without a positioning context you are effectively positioning relative to the body element. All of this is of course Elementary CSS Layout. http://css-discuss.incutio.com/wiki/Absolute_Layouts :-) __ 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] display:inline-block differences in browsers
On 3/17/14 12:35 AM, MiB wrote: Absolute positioning is relative to the nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. In my current page, the parent to the item that misbehaves in FF does have position:relative Shouldn't this be enough information for all browsers to render the children with position:absolute;top:x;right/left:x; correctly? So, I don't get why FF is doing something different with that information compared to the other browsers. Thank you, John __ 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] Subject: Font Size Small in FireFox ?
I changed my font-size to pixels, yet the fonts still look smaller in FireFox then Chrome or IE (site http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html), probably something else wrong ? Why is the CSS Mailing List sending me a digest instead of individual messages as I originally set it up to ? __ 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 7:40 AM, John j...@coffeeonmars.com wrote: On 3/17/14 12:35 AM, MiB wrote: Absolute positioning is relative to the nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. In my current page, the parent to the item that misbehaves in FF does have position:relative Shouldn't this be enough information for all browsers to render the children with position:absolute;top:x;right/left:x; correctly? So, I don't get why FF is doing something different with that information compared to the other browsers. Thank you, John One thing that may be happening is that you are spacing the icons with ems, which is tied to font sizing. The math involved with the spacing of the elements in #social is tight enough where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. This is just my gut feeling here. No science to back it up. HTH -- 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/
Re: [css-d] Subject: Font Size Small in FireFox ?
On Mon, Mar 17, 2014 at 8:36 AM, Crest Christopher crestchristop...@gmail.com wrote: I changed my font-size to pixels, yet the fonts still look smaller in FireFox then Chrome or IE (site http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html), probably something else wrong ? Why is the CSS Mailing List sending me a digest instead of individual messages as I originally set it up to ? Although in Chrome I see a serif font - most likely a default setting for me - the sizes are the same between Latest FF Aurora and latest released Chrome on my Mac. Just a wild guess here, but might you have used FF's font scaling UI (View Zoom Scale Text Only) - scaled things down - and maybe left it down? -- 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/
Re: [css-d] ie/11
On Sun, Mar 16, 2014 at 8:15 PM, David Laakso laakso.davi...@gmail.com wrote: In the footer ie/11 is chopping-off the crossbar of the numerical digit 4. What to do? Thanks to all who replied both on and off-list. Re-set css for the containing blocks and re-set the generated content. letter-spacing to .175em. The footer proper needs more work in all browsers: but, at least, the revised letter-spacing seems to resolve the specific clipping issue I wrote about in IE/11. html http://ccstudi.com/ 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] display:inline-block differences in browsers
On 3/17/14 5:56 AM, Tom Livingston wrote: One thing that may be happening is that you are spacing the icons with ems, which is tied to font sizing. The math involved with the spacing of the elements in #social is tight enough where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. Thanks, Tom..I will address that... But I'm seeing that in FireFox, down below, 2 chunks: Hours Monday-Saturday: Sunday: and 10am-6pm Closed don't have the same positioning as they do in Safari, Chrome and Opera..which baffles me, if they are using the same origin point relative to top and left, why should Firefox show those 2 text hunks in different positions from the other browsers? Thank you! John __ 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:09 AM, John j...@coffeeonmars.com wrote: On 3/17/14 5:56 AM, Tom Livingston wrote: One thing that may be happening is that you are spacing the icons with ems, which is tied to font sizing. The math involved with the spacing of the elements in #social is tight enough where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. Thanks, Tom..I will address that... But I'm seeing that in FireFox, down below, 2 chunks: Hours Monday-Saturday: Sunday: and 10am-6pm Closed don't have the same positioning as they do in Safari, Chrome and Opera..which baffles me, if they are using the same origin point relative to top and left, why should Firefox show those 2 text hunks in different positions from the other browsers? Thank you! This link to a screen shot is Chrome on top and FF Aurora behind: https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png HTH -- 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/
Re: [css-d] Subject: Font Size Small in FireFox ?
Hi, Tom. You are seeing no difference in Font Sizes between browsers, hrmm odd. I don't have Scale Text Only enabled within FireFox (27.0.1). Tom Livingston wrote: On Mon, Mar 17, 2014 at 8:36 AM, Crest Christopher crestchristop...@gmail.com wrote: I changed my font-size to pixels, yet the fonts still look smaller in FireFox then Chrome or IE (site http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html), probably something else wrong ? Why is the CSS Mailing List sending me a digest instead of individual messages as I originally set it up to ? Although in Chrome I see a serif font - most likely a default setting for me - the sizes are the same between Latest FF Aurora and latest released Chrome on my Mac. Just a wild guess here, but might you have used FF's font scaling UI (View Zoom Scale Text Only) - scaled things down - and maybe left it down? __ 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] display:inline-block differences in browsers
On 3/17/14 7:19 AM, Tom Livingston wrote: This link to a screen shot is Chrome on top and FF Aurora behind: https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png HTH Yes, that is about what I am seeing. *Why* the discrepancy? What is the cause of this difference in Firefox, as opposed to how Chrome, Opera and Safari show that exact same part? Thank you! John __ 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:22 AM, John j...@coffeeonmars.com wrote: On 3/17/14 7:19 AM, Tom Livingston wrote: This link to a screen shot is Chrome on top and FF Aurora behind: https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png HTH Yes, that is about what I am seeing. *Why* the discrepancy? What is the cause of this difference in Firefox, as opposed to how Chrome, Opera and Safari show that exact same part? Thank you! John Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. -- 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/
Re: [css-d] display:inline-block differences in browsers
On 3/17/14 7:24 AM, Tom Livingston wrote: Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. your screengrab shows them closer than my FF version, but why should there BE a discrep? Or better, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John __ 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:29 AM, John j...@coffeeonmars.com wrote: On 3/17/14 7:24 AM, Tom Livingston wrote: Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. your screengrab shows them closer than my FF version, but why should there BE a discrep? Or better, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John I personally would have gone with floats. I've gotten used to it so I'm comfortable with it. Make your columns separate divs, float them and make sure the math works for all widths. I usually don't fit things 100%. Leave some wiggle room for the child elements. -- 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/
Re: [css-d] display:inline-block differences in browsers
I see the same thing as in the screenshot Tom posted. I would recommend re-thinking how you execute your layout. Absolute and relative positioning are completely unnecessary in this case, and you're only setting yourself up for more 'top: this' and 'left:this' when you want to make this responsive. In addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. Chris On Mon, Mar 17, 2014 at 10:33 AM, Tom Livingston tom...@gmail.com wrote: On Mon, Mar 17, 2014 at 10:29 AM, John j...@coffeeonmars.com wrote: On 3/17/14 7:24 AM, Tom Livingston wrote: Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. your screengrab shows them closer than my FF version, but why should there BE a discrep? Or better, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John I personally would have gone with floats. I've gotten used to it so I'm comfortable with it. Make your columns separate divs, float them and make sure the math works for all widths. I usually don't fit things 100%. Leave some wiggle room for the child elements. -- 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/ -- 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/
Re: [css-d] display:inline-block differences in browsers
On 3/17/14 8:14 AM, Chris Rockwell wrote: I would recommend re-thinking how you execute your layout. Absolute and relative positioning are completely unnecessary in this case, and you're only setting yourself up for more 'top: this' and 'left:this' when you want to make this responsive. In addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. OK..how far up should I go in this re-execution? just the footer area that's being snarky for me, or the whole entire layout? I've poured a delirious amount of time into this method of positioning on the strength of the idea that it avoided problems of the float left float right clear both method. Perhaps its time spent learning..something..but I don't have any more time to squander on experiments...I sure don't need even more problems when it's time to make this buzzard responsive THanks for you input __ 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] Subject: Font Size Small in FireFox ?
On 3/17/14, 7:21 AM, Crest Christopher wrote: Hi, Tom. You are seeing no difference in Font Sizes between browsers, hrmm odd. I don't have Scale Text Only enabled within FireFox (27.0.1). Tom Livingston wrote: On Mon, Mar 17, 2014 at 8:36 AM, Crest Christopher crestchristop...@gmail.com wrote: I changed my font-size to pixels, yet the fonts still look smaller in FireFox then Chrome or IE (site http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html), probably something else wrong ? [...] Just a wild guess here, but might you have used FF's font scaling UI (View Zoom Scale Text Only) - scaled things down - and maybe left it down? Another possibility - your Firefox browser is using a different font than your other browsers? As you have not defined a font-face in your CSS, browsers will use the one defined in the browser’s settings. There are noticeable differences in sizes between fonts. Suggestion: Try defining a font-face in your CSS. (One that exists on your computer, that is.) -- 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/
Re: [css-d] display:inline-block differences in browsers
This is a shell mock-up with *a lot* less CSS. Granted, I've only looked at it in Chrome but this should get you started. I cleaned up the markup a bit, namely what you were using to markup the menu that contained About, Women's, etc. - use nested ul's :). http://codepen.io/chrisrockwell/pen/gFsiH/ Pay no attention to the seemingly arbitrary class names and ID's - I use snappy snippet to take it from the inspector to codepen and it does that. Again, this should get you on your way to something *much* cleaner, more maintainable, and easily adaptable to narrower devices via media queries. Good luck! On Mon, Mar 17, 2014 at 11:45 AM, John j...@coffeeonmars.com wrote: On 3/17/14 8:14 AM, Chris Rockwell wrote: I would recommend re-thinking how you execute your layout. Absolute and relative positioning are completely unnecessary in this case, and you're only setting yourself up for more 'top: this' and 'left:this' when you want to make this responsive. In addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. OK..how far up should I go in this re-execution? just the footer area that's being snarky for me, or the whole entire layout? I've poured a delirious amount of time into this method of positioning on the strength of the idea that it avoided problems of the float left float right clear both method. Perhaps its time spent learning..something..but I don't have any more time to squander on experiments...I sure don't need even more problems when it's time to make this buzzard responsive THanks for you input __ 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/
Re: [css-d] display:inline-block differences in browsers
On 3/17/14 9:20 AM, Chris Rockwell wrote: http://codepen.io/chrisrockwell/pen/gFsiH/ Pay no attention to the seemingly arbitrary class names and ID's - I use snappy snippet to take it from the inspector to codepen and it does that. Again, this should get you on your way to something*much* Thank you, Chris; I was aware that both my css and markup were a couple of rats' nests...getting harder and harder to look at my own code..perhaps that's a signal that the approach in question ain't so greatI appreciate your offering another way of how to attack this situation. I'm going to try to complete this page, responsive and make one other from it, today. John __ 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] Responstable SCSS
I'm trying to implement this responsive table on my site: http://codepen.io/sharifh/pen/imojf It works fine in the Safari browser on my Mac when resizing the window, but it doesn't work on the iPhone - the table remains normal. I'm thinking that my problem is the SCSS. I converted it into CSS on some web site (sorry, don't remember which one now) and maybe the conversion wasn't 100% successful. How can I convert the SCSS into proper CSS? Thanks, Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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] Responstable SCSS
Just in case it makes any difference, here's the CSS I was given by
that site:
.responstable {
margin: 1em 0;
width: 100%;
background: white;
color: #024457;
border-radius: 10px;
border: 1px solid #167f92;
overflow: hidden;
}
.responstable tr {
border-top: 1px solid #167f92;
border-bottom: 1px solid #167f92;
}
.responstable tr:nth-child(odd) {
background-color: #eaf3f3;
}
.responstable th {
display: none;
border: 1px solid white;
background-color: #167f92;
color: white;
}
.responstable td {
display: block;
}
.responstable td:first-child {
padding-top: .5em;
}
.responstable td:last-child {
padding-bottom: .5em;
}
.responstable td:before {
content: attr(data-th) : ;
font-weight: bold;
width: 8em;
display: inline-block;
}
@media (min-width: 480px) {
.responstable td:before {
display: none;
}
}
@media (min-width: 480px) {
.responstable td {
border: 1px solid #d9e4e6;
}
}
.responstable th, .responstable td {
text-align: left;
margin: .5em 1em;
}
@media (min-width: 480px) {
.responstable th, .responstable td {
display: table-cell;
padding: 1em;
}
.responstable th:first-child, .responstable td:first-child {
text-align: center;
}
}
body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}
h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
}
h1 span {
color: #167F92;
}
__
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] Responstable SCSS
Just click on (SCSS) next to CSS and it will show you the compiled code
On Mon, Mar 17, 2014 at 1:57 PM, SSC_perl p...@surfshopcart.com wrote:
Just in case it makes any difference, here's the CSS I was given
by that site:
.responstable {
margin: 1em 0;
width: 100%;
background: white;
color: #024457;
border-radius: 10px;
border: 1px solid #167f92;
overflow: hidden;
}
.responstable tr {
border-top: 1px solid #167f92;
border-bottom: 1px solid #167f92;
}
.responstable tr:nth-child(odd) {
background-color: #eaf3f3;
}
.responstable th {
display: none;
border: 1px solid white;
background-color: #167f92;
color: white;
}
.responstable td {
display: block;
}
.responstable td:first-child {
padding-top: .5em;
}
.responstable td:last-child {
padding-bottom: .5em;
}
.responstable td:before {
content: attr(data-th) : ;
font-weight: bold;
width: 8em;
display: inline-block;
}
@media (min-width: 480px) {
.responstable td:before {
display: none;
}
}
@media (min-width: 480px) {
.responstable td {
border: 1px solid #d9e4e6;
}
}
.responstable th, .responstable td {
text-align: left;
margin: .5em 1em;
}
@media (min-width: 480px) {
.responstable th, .responstable td {
display: table-cell;
padding: 1em;
}
.responstable th:first-child, .responstable td:first-child {
text-align: center;
}
}
body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}
h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
}
h1 span {
color: #167F92;
}
__
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/
Re: [css-d] Responstable SCSS
The pen is working on my iPhone Sent from my iPhone On Mar 17, 2014, at 1:54 PM, SSC_perl p...@surfshopcart.com wrote: I'm trying to implement this responsive table on my site: http://codepen.io/sharifh/pen/imojf It works fine in the Safari browser on my Mac when resizing the window, but it doesn't work on the iPhone - the table remains normal. I'm thinking that my problem is the SCSS. I converted it into CSS on some web site (sorry, don't remember which one now) and maybe the conversion wasn't 100% successful. How can I convert the SCSS into proper CSS? Thanks, Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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] css-d Digest, Vol 136, Issue 7
Unsubscribe my email please from updates. Thank you ;))) __ 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] Responstable SCSS
On Mar 17, 2014, at 11:02 AM, Chris Rockwell wrote: Just click on (SCSS) next to CSS and it will show you the compiled code Well that was embarrassingly simple. :| I compared the converted CSS that I had before to the converted CSS from CodePen and they are the same, so it must be a different problem I'm having. If I go to that CodePen page on my iPhone, it works for me, but when I copy and paste the code to my site, it doesn't work. Here's a link to my page: http://www.surfshopcart.com/responstable.html There doesn't appear to be any JS involved, so what could I be missing? Thanks again, Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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] Responstable SCSS
Try adding this to your head tag: meta name=viewport content=width=device-width, initial-scale=1 On Mon, Mar 17, 2014 at 2:28 PM, SSC_perl p...@surfshopcart.com wrote: On Mar 17, 2014, at 11:02 AM, Chris Rockwell wrote: Just click on (SCSS) next to CSS and it will show you the compiled code Well that was embarrassingly simple. :| I compared the converted CSS that I had before to the converted CSS from CodePen and they are the same, so it must be a different problem I'm having. If I go to that CodePen page on my iPhone, it works for me, but when I copy and paste the code to my site, it doesn't work. Here's a link to my page: http://www.surfshopcart.com/responstable.html There doesn't appear to be any JS involved, so what could I be missing? Thanks again, Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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/
Re: [css-d] Responstable SCSS
On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote: meta name=viewport content=width=device-width, initial-scale=1 That was it! Thanks, Chris! The table now changes depending on the phone's orientation. Very nice! I almost hate to ask this, but would it be possible for someone to test my page on an Android phone to make sure it works? Unfortunately, everyone I know has an iPhone. http://www.surfshopcart.com/responstable.html Thanks again. I really appreciate this list and everyone's help. Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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] Responstable SCSS
Looks good to me on Galaxy S3 (Android 4.3) Chrome On Mon, Mar 17, 2014 at 3:21 PM, SSC_perl p...@surfshopcart.com wrote: On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote: meta name=viewport content=width=device-width, initial-scale=1 That was it! Thanks, Chris! The table now changes depending on the phone's orientation. Very nice! I almost hate to ask this, but would it be possible for someone to test my page on an Android phone to make sure it works? Unfortunately, everyone I know has an iPhone. http://www.surfshopcart.com/responstable.html Thanks again. I really appreciate this list and everyone's help. Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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/
