I need to position this update button on www.euroworker.no/order (you'll have to add an item to the cart, use the Kjøp button to add and Handlevogn to view the cart). Works in FF and IE. (Although there is another alignment problems with IE) but not in Chrome or Safari. I had it working before, but the only thing I can think of to do is target safari and Chrome. Is this possible?
Here's the CSS and HTML(Smarty) for you.
HTML(Smarty):
{capture assign="cartUpdate"}
<div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </div>
{/capture}
{assign var="cartUpdate" value=$cartUpdate|@str_split:10000}
{php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}
{form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}
CONTENT
{/form}
And the CSS:
#oppdatersubmit {
background-image:url(../../upload/oppdater.png);
background-repeat:no-repeat;
background-position:left;
background-color:none;
border:none;
overflow:hidden;
outline:none;
white-space: nowrap;
width:77px;
height:25px;
cursor:pointer;
position:absolute;
}
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:580px;
bottom:130px;
}
Need to change these for Chrome and Safari.
Thanks.
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*Chrome CSS here*/
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:660px;
bottom:40px;
}
}
Fixed the problem :)
UPDATE
This resource works better: CSS browser/OS selectors with JS.