CSS Positioning Problem in Safari and Chrome Only

[limelites]

Hi all,

I have positioned a currency drop down in my header menu. It appears there in IE8, FF and OPERA exactly as it's supposed to.

However, in CHROME and SAFARI it is about 80px; further right and overlapping the main wrapper.

Can anyone see anything wring with the CSS in this positioning using Firebug?

[mprough]

Hi all,

I have positioned a currency drop down in my header menu. It appears there in IE8, FF and OPERA exactly as it's supposed to.

However, in CHROME and SAFARI it is about 80px; further right and overlapping the main wrapper.

Can anyone see anything wring with the CSS in this positioning using Firebug?

Well taking a look is not an option as your site is offering me a login auth... see image



~Melanie

[limelites]

That's very, very strange. Is it still doing this? It isn't doing it to me and I'm still getting sales, so it's certainly not doing it to everyone.

Can you please try http://www.limelites.co.uk again just to see if it had been some strange glitch?

[s_t_e_v_e]

Your currency drop down is within a Table cell, then you position a span within that table relative....
to troubleshoot, I would give the table some CSS styling - borders for example, so you can see whereabouts the table is being displayed in those browsers, maybe all is needed it to control the position of the table with some CSS..

may be position the whole table relative, not just the span within it...

[limelites]

Hi Steve,

Do you mean div#dropMenu ul as the table I should be looking at? I'm using the inspect function in Firebug to try and figure out what you mean but I'm pretty hopeless at deciphering code

What rule would I add to my stylesheet to place a border round the table so I could view it in Safari?

[mprough]

Site works fine this morning.. that is odd.

~Melanie

[limelites]

Yeah, that's very odd :-) Glad you can get on now though..... Don't suppose you managed to figure out the strange alignment issue with my currency drop down in Safari and Chrome browsers :-)

[s_t_e_v_e]

Your page source has a div that contains a table, which contains the span that your are moving relatively...

if you can edit your template that includes the DIV to give it an ID, it can be styled with CSS..

You could try moving the inline style that you have on the SPAN to the TABLE tag...

<div>
  <table align="center">
    <tbody>
      <tr>
        <td align="center">
          <span style="z-index: 3000; position: relative; left: 410px; top: -36px;" id="currency_select">
            ... ... ... ...
          </span>
       </td>
    </tr>
   </tbody>
  </table>
</div>

hope this helps...

[limelites]

OK, so I have this inserted in my tpl_header.php:

<div>
<table align="center">
<tr>
<td align="center">
<span id="currency_select" style=" z-index:3000; position:relative; left:410px; top:-36px;" ></span><br/><span id="dc_box"></span>
</td>
</tr>
</table>
</div> 

Should I try change it to this:

<div>
<table align="center">
<tr>
<td align="center" id="currency_select" style=" z-index:3000; position:relative; left:410px; top:-36px;" >
<span id="dc_box"></span>
</td>
</tr>
</table>
</div> 

[s_t_e_v_e]

First I would give the Div and Table a vivid background and see if they are positioned differently in the other browsers....

<div id="currencyDiv" style="background:#f00;">
<table align="center" id="currencyTable" style="background:#0f0;">
<tr>
<td align="center" id="currency_select" style="z-index:3000; position:relative; left:410px; top:-36px;" >
<span id="dc_box"></span>
</td>
</tr>
</table>
</div>

I would try the position:relative on the whole table, rather than just the span.

when all is displaying properly, I would remove the inline styles and put them in the stylesheet.css