Looking for a CSS solution

Question

I've been developing an E-Commerce store for a client and I've gotten to a junction of which I cannot find a solution for. If you look at the first row of products in the link, below each product picture are the product name, description and then (from right to left) the word "price" (hebrew), the actual price (NIS/ILS) and then the words "per kilo" (hebrew. What I want to do is have the border that currently only surrounds the product price will surround the product price and the words "per kilo". I tried this for example :

span.amount, span.amount > span.amount:after{
        background: #f7f7f7; 
    border: 1px solid #eaeaea;
    border-style: solid; 
    border-radius: 3px 0px 0px 3px;
}

Any ideas?

Think I just get a holding page at the provided link! Can you reproduce the problem in a http://jsfiddle.net/ instead? — AndrewPolland, Jun 24 '14 at 11:22
Hey guys, sorry for the late reply. Here is the link to the development site - [link](http://www.best-foods-for-fat-burning.com/wordpress/cat/עוף) The link before was broken, here it is again. Please let me know what you think — OAK, Jun 27 '14 at 09:15

score 1 · Answer 1 · answered Jul 02 '14 at 09:17

1

So, currently you have:

ul.products li.product .price:before {
    content: 'מחיר ';
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 11px 4px;
    background: #f7f7f7;
    text-align: right;
    border: 1px solid #eaeaea;
    border-style: solid;
    border-radius: 0;
}

I suggest changing the declaration to ul.products li.product .price .amount:before and take out the border styling here, and also add a display:inline; so you would have this instead:

ul.products li.product .price .amount:before {
    content: 'מחיר ';
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 11px 4px;
    text-align: right;
    display:inline;
}

Then you need to change the styling for the .amount span to be display:inline; and add your desired padding. So something like this:

.woocommerce .amount{
    display:inline;
    padding:5px 10px;
}

Not thoroughly tested. But seems to work fine in Firefox. If you're overriding the CSS, you may need to make them for slightly more specific declarations.

answered Jul 02 '14 at 09:17

AndrewPolland

3,041
4
28
39

Ok, I'll test that and let you know. I appreciate it. I have another question in the same regard - in the there's an element with a NodeName = "#text" which I want to change its style. How can I attempt to change it ? I tried the following to "grab" the element but with no success: var x=document.getElementsByName("#text"); alert(x.length); var y=document.getElementById("#text"); alert(y.length); var z=document.getElementsByTagName("#text"); – OAK Jul 02 '14 at 11:06
@user1889418 I think you're probably best posting that as a separate question as it's a different subject to this one. Post a link to it when you do though and I'll do my best to answer it. Or try checking out this post to see if it helps you http://stackoverflow.com/questions/4106809/in-jquery-how-can-i-change-an-elements-text-without-changing-its-child-elements – AndrewPolland Jul 02 '14 at 11:14
@user1889418 Did this answer your question? If so, would you mind marking it as the accepted answer. If not, let us know. Thanks. – AndrewPolland Jul 08 '14 at 09:07
thanks for your answer, that worked with a little bit of tweaking ! Thanks again !! – OAK Jul 08 '14 at 12:43

Looking for a CSS solution

1 Answers1