0

I have a div nested within an anchor, to make the entire div clickable. This works fine on a desktop and also on an iPhone, the issue is when I click on it. It must be something to do with the :visited tag, but my css does not include anything like that, and it only happens on the iphone.

Here are some screenshots of the link before and after I click on it.

Before Click After Click

CSS

.Widget{
padding: 0 0 10px 0;
}
.Widget span.Title{
padding: 10px;
padding-right: 30px;
display: block;
background: rgba(255, 203, 110, 0.6);
font-size: 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
}
.Widget span.Content{
display: block;
padding: 5px;
border: 2px solid rgba(255, 203, 110, 0.6);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
}
.EnquiryLink{
color: #000000;
text-decoration: none;
}

HTML

<a href="/Contact/" class="EnquiryLink">
    <div class="Widget EnquireWidget">
        <span class="Title">Enquire:</span>
        <span class="Content">Make an enquiry here with our contact form.</span>
    </div>
</a>

I believe it to be changing the border colour of span.Content, but I don't know why. The only :hover classes within my code are specific to there relevant elements.

Kara
  • 6,115
  • 16
  • 50
  • 57
user2879284
  • 1
  • 2

4 Answers4

1

Faced the same issue in my iPad (Opera Mini, Safari, Firefox). For some reason my style has been replaced with some own style in links.

I've added "!important" to my styles to prevent this. It helps.

.some-block a {
    border: none !important;
}

a.orange-button {
    border: 2px solid #FF6449 !important;
}
rappongy
  • 957
  • 8
  • 10
1

Add background-clip: padding-box; to the problem element inside the a tag.

John Doesoph
  • 21
  • 1
  • 6
0

Do you have any CSS rules for hover applying? ios can apply the hover on first touch.

RichTea
  • 1,462
  • 10
  • 16
  • 24
0

Add 

outline: 0;

to the class .EnquiryLink

I always use this as default css on anchors to remove the outline on anchor tags:

a, a:active, a:focus, a:hover{
outline: 0;
}
ElBrm
  • 326
  • 3
  • 14
  • Unfortunately that hasn't worked. It seems to be the span.Content border that is changing, and it just doesn't make sense. – user2879284 Jan 24 '14 at 10:32
  • Ah i see. It's the span.Content indead. I think it has to deal with the border colour. Maybey you could try this answer to make it crossbrowser: http://stackoverflow.com/questions/4062001/css3-border-opacity – ElBrm Jan 24 '14 at 10:52