Re: [css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote:
> 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

2014-03-17 Thread SSC_perl 
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

2014-03-17 Thread SSC_perl 
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/

[css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
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] Replacing table layout with CSS

2014-01-23 Thread SSC_perl 
On Jan 20, 2014, at 6:31 AM, Tom Livingston wrote:
> Try playing with the fieldset wrapping the search_box. Some other 
> margin/padding settings were helping. Tweak to suit:
> 
> margin: 0 2% 0 0;
> padding-top: 2px;

Tom,

I plugged in those parameters and played around with various 
combinations and was able to get the graphic to line up with the others, but 
the text won't budge.  Oh well, it's close enough.  Since I haven't heard from 
anyone else, I'll just leave it alone for now.

Thanks again for your help.  It was much appreciated.

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] Replacing table layout with CSS

2014-01-19 Thread SSC_perl 
On Jan 9, 2014, at 5:04 PM, Tom Livingston wrote:
> If I may, maybe this will get you started:

Tom,

I'm sorry I didn't respond earlier.  I had a coding problem that needed 
to be fixed, and then after that was done, I just plain forgot!

Thanks so much for the code.  I took it and modified it to optimize the 
space usage in the search box, and also rounded the corners.

(new URL, as the old one was broken)

http://www.surfshopcart.com/cgi-bin/149/shop.cgi

I have another question regarding this: is it possible to have the 
#search_box size itself to the text inside without hard-coding a width?  That 
way the box would shrink and grow if someone changed the font size in their 
browser.  If I leave the width off, then there's a lot of empty space on the 
right of that box.

Also, I noticed that the text "Search store for:", and it's associated 
graphic, appear to be a pixel or two lower that the other links in the blue bar 
to the left.  I can't figure out how to align them with the others.

Thanks again,
Frank

http://www.surfshopcart.com/
We're still in need of designers for a new UI.
__
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] Replacing table layout with CSS

2014-01-09 Thread SSC_perl 
On Jan 9, 2014, at 1:43 PM, Tom Livingston wrote:
> According to Firebug in FireFox, your  is inside of
>  which, actually, is wrapping a lot of stuff.
> That doesn't look right to me.

Thanks, Tom.  I moved the span tags outside the label tags but that 
just added a lot of empty space on all sides of the text in the search box, so 
I put it back. 

I decided to place the radio buttons inside the  tags in 
hopes of pushing that section to the right with this CSS:

#rdo label { display:block; padding: 5px 1em 0 30px; }
input[type=radio], input.radio { float:right; clear:none; margin: 2px 0 0 2px;

but of course that didn't work.

Then I placed the radio buttons code into the idf span which moved them 
to the right (success!), but the labels were no longer lined up with the 
buttons.  I tried modifying the CSS without success.

I'm a lot closer than I was, but I'm stuck again.  How can I get the 
radio buttons on the same line as their labels?

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-d] Replacing table layout with CSS

2014-01-09 Thread SSC_perl 
Good morning,

I need some help on a problem I'm having.

I've replaced the old table-based navigation header of SurfShop with a 
CSS version, but I'm having a problem aligning the radio buttons and their 
labels.  I'd like them to be vertically aligned in the search box, like they 
are now, but on the right side, just under the 'Find!' button.

The relevant code is listed below, and you can see it in action here: 
http://www.surfshopcart.com/cgi-bin/demos/surfshop/shop.cgi

Thanks,
Frank




 





 

 






 
Search Store For: 

Product ID


Description


Both







http://www.surfshopcart.com";> Home 
 Shop  
 View Cart 
 Check Out 






/* -- Search Box CSS -- */

#search_box {
background-color: rgb(102, 153, 102);
float: right;
margin-left: 4px;
padding: 5px 3px 3px;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0;
border-radius: 5px;
border-top-left-radius: 0;
}
#search_box label img { vertical-align: bottom; }
#main_menu {
background-color: rgb(102, 102, 255);
border-radius: 5px;
}
#main_menu img { vertical-align: bottom; }
#main_menu a, #search_box {
color: white;
font-size: 9px;
text-decoration: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#main_menu a, #search_store { font-weight: bold; }
#search_store { float: left; }
#main_menu ul {
padding:3px 0;
margin: 0;
list-style-type: none;
text-align: right;
}
#main_menu ul li { display: inline; }
#search_store input {
display: block;
margin-top: 5px;
margin-left: 3px;
width: 150px;
}
#idf {
float: right;
margin-top: 7px;
}
#idf label {
float: left;
clear: left;
}
#idf .submit {
float: right;
clear: none;
position: relative;
width: 57px;
margin-left: 10px;
margin-top: -10px;
padding-left: 4px;
}
.submit input {
position: absolute;
left: 0;
}

label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }



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-d] [OT] CSS/HTML Work Needed

2014-01-03 Thread SSC_perl 
This is a one-time post to ask for help.  It will not be repeated.

We tried to do this on our own, but we're programmers here, not 
designers.  So we could really use your help.

Our SurfShop shopping cart was recently released as open source.  It's 
been around for awhile and, unfortunately,  it shows.  Although the code has 
been constantly updated and improved, the cart still looks like it's 10 years 
old.  It really needs an update.  Our site does, too, but that's another story. 
 :\

Being that this is an open source project, we're hoping to find someone 
to write us a new front-end in exchange for exposure of your services.  
However, we will entertain paying for this, if need be.  We'd like to have our 
new look in place before we transfer our project to GitHub, so time is of the 
essence.

We're also implementing a store to sell skins for our cart, so anyone 
can write templates and sell them.  The person(s) who supply us with a default 
template will be able to sell their other templates in our store without the 
customary 15% fee taken out.

Even if you decide not to work with us, feel free to download our cart 
and let us know what you think.  Constructive criticism goes a long way to 
improving open source projects.  Please write me directly if you have any 
questions.

Thanks in advance for your help,
Frank Jance

http://www.surfshopcart.com/
Setting up shop has never been easier!

Since 2003
__
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 Progress Bar Help

2013-12-05 Thread SSC_perl 
On Dec 5, 2013, at 10:35 AM, Philip Taylor wrote:
> Even CSS-list spammers should have the sense to realise that their so-called 
> "pro" solutions will be exposed for the amateurish rubbish that they really 
> are if they insist on posting unsolicited links here

Hi Philip,

Wow!  I really wasn't expecting a response like that.  Did I do 
something I wasn't supposed to?  If so, I didn't mean to.

If it's because you don't like the HTML/CSS of our cart, then I agree 
with you.  I realize that the UI of our cart has been neglected for awhile and 
looks very dated.  That's why I'm here.  I'm hoping to get some help in 
updating the front end of our cart.  So I'm sure I'll be asking a lot of 
questions.


On Dec 5, 2013, at 9:21 AM, digital.disc...@gmail.com wrote:
> Why don't do a focused example displaying the issue and link that?

O.K.  I'll do that next time unless it involves the rest of the code.

Thanks again to Greg and Jay.

Frank

http://www.surfshopcart.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] CSS Progress Bar Help

2013-12-05 Thread SSC_perl 
On Dec 4, 2013, at 8:03 PM, JAY TANNA wrote:

> .progbox {padding-left: 0; margin: 0 auto;}


Thanks, Jay.  That did the trick!

Frank

Setting up shop has never been easier!

http://www.surfshopcart.com/pro.php

__
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] CSS Progress Bar Help

2013-12-04 Thread SSC_perl 
Hello,

I'm new to CSS here, so forgive me if this is a basic question.  I just 
added a CSS progress bar to our open source shopping cart, SurfShopPRO.  It 
looks nicer than the graphics we were using before, but it could be better.

One of the things I need help with is that the progress bar is not 
centered left to right inside the border.  Can someone see what's wrong?

http://www.surfshopcart.com/cgi-bin/demos/2/shop.cgi

To see the progress bar, just place a test order and check out.  Choose 
"I will mail my payment" to go all the way to the receipt page without typing a 
credit card number.

Thanks,
Frank


Setting up shop has never been easier!

http://www.surfshopcart.com/pro.php

__
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/