Pre-Nav logo issues on iPhone

Nin / 2011-12-20 08:35:38   

Hi,

I've seen other people having this same issue in the past but they all had mis-spellings in their codes and unfortunately, my problem is not coming from that...

My logo shows on all browsers except on iPhones!
The weirdest thing is that it works on safari (on a computer...) but just not on iPhones...

Here's what I have in my pre-nav (with no spaces in tags):

  1. < a href="http://anais.antonio.free.fr">< /a>< div id="logo">< /div> 

and this in my Css:

  1. #logo {
  2. background: url('http://anais.antonio.free.fr/files/tilelogo2.png')  no-repeat scroll transparent;
  3. cursor: pointer;
  4. height:100%;
  5. width:100%;
  6. }

Now my problem is that my logo shows on iPhone only if I had the closing "a href" tag

  1. < /a>

but then, if I do so, the link of my logo that is suppose to bring you back to my home page doesn'nt work anymore.

I tried to place the closing tag somewhere else but it nothing seems to work:

  1. < div id="logo">< /div>< a href="http://anais.antonio.free.fr">< /a> 

Or

  1. < a href="http://anais.antonio.free.fr">< div id="logo">< /a>< /div> 

Or this

  1. < a href="http://anais.antonio.free.fr">< div id="logo">< /div>< /a> 

But in any case, I have to choose between an invisible logo on iPhone or a logo that shows evrywhere but with an broken redirection link...!?

Any idea??

--> My website

Thanks!

pernin / 2011-12-20 09:22:04   

you forgot one last alternative, the link *within* the div:

<div id="logo"><a href="http://anais.antonio.free.fr">blabla</a></div>

pernin / 2011-12-20 09:53:00   

and why do you have your logo as a background? Isn't it easier with this in your pre-nav?:

<a href="http://anais.antonio.free.fr"><img src='http://anais.antonio.free.fr/files/tilelogo2.png' /></a>

Nin / 2011-12-20 11:46:49   

Yah sorry Pernin, I forgot to mention it but I did try this one too...
It was my first try actually...

I'm having it right now if you want to check... The link is still broken...

Now, I know it's easier to have this code in my pre-nav:

  1. < a href="http://anais.antonio.free.fr">< img src='http://anais.antonio.free.fr/files/tilelogo2.png' /></a> 

But my problem is, when I've been using it, the onmouseover cursor of my logo answered to the same one as my images witch is a custom arrow cursor... and it looks weard...

The only way I found to get rid of this was to create a logo div and call it from my pre-nav so then I could specify the "pointer" cursor...

Am I wrong?

Nin / 2011-12-20 11:57:13   

Actually now that I re-read your post, I think you're probably right about this!

I'm having this logo issue since I changed my image onmouseover icon...
That is not showing on safari neither!?

I might done something wrong in this process and probably screwed up something in the pre-nav... This is what I've done -> in this thread

Thx.

A.

pernin / 2011-12-20 15:09:17   

you can still have a div wrapped around the href and img src, and style the cursor in the css. You don't need to have it as a background image

there are some things that will work in some browsers and not in others, because some browser reinterpret what you write even though it's wrong

I guess this is one of those, the div should go on the outside of the a href

Nin / 2011-12-20 17:56:04   

Ok sorry, I didn't know making my logo as background will be wrong.
I tried a lot of different things that failed and this styling seamed to give the same results so I naively adopt it instead of posting "again and again" a dumb question in this forum...

Unfortunately, I already tried to do what you adviced right above (wrapp the href and img src in my logo div) but still...

My "a img div" custom cursor was still overwriting my specific "logo div" pointer cursor...

Anyway, I decided to move my custom cursor to my container div instead of the "a img" one...

I guess it should be fine for the moment...

Thanks for your time.

A.

Vaska A / 2011-12-20 19:16:02   

Serve an alternate (or additive) stylesheet for mobile.

Nin / 2011-12-20 20:10:12   

Yes, you're probably right... Actually, I'm sure you are!

'Cause if tomorrow I want to create a new exhibition without image, I'll be oblige to move out my custom cursor from my container div an face the exact same problem as above...

I don't have a clue of how to do that though...

Since today, I thought iPhones were behaving just like Safari..

Anyway, I found this on the web: mobile stylesheet

I'll try to follow this up...

Thx for your help!

A.

This thread has been closed, thank you.