Ссылка Изображение не сплошное

Question

Я не знаю, как объяснить, что происходит, но у меня есть изображение логотипа на моем сайте, и когда вы наведите указатель мыши на некоторые из них, он работает правильно, но если вы наведите указатель мыши на некоторые другие части он не действует как ссылка. Он действует на него случайным образом, так что это не похоже на то, что половина изображения - это просто не ссылка или что-то похоже на зависание над буквой «P», над которой он работает. «В ней» он не работает над «kT», он работает снова (логотип говорит «Pink Tangerine»).

Это png с прозрачным фоном, поэтому мне интересно, есть ли у него что-то с этим, но это не имеет никакого смысла. Я никогда раньше не сталкивался с такой проблемой, не могли бы вы сказать мне, что случилось?

HTML5

<div id="main-banner"> 
    <header> 
     <a id="image" href="index.html"> 
      <img alt="Logo" src="Images/PT-logo.png"> 
     </a>   
     <nav> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="About_Us/about.html">About Us</a></li> 
       <li><a href="Contact_US/contact.html">Contact Us</a></li> 
      </ul> 
     </nav> 
    </header> 
</div> 

CSS3

Я не думаю, большинство моих CSS должна быть актуальной, но я включил все описание ссылки и главный заголовок/баннер материал только в случае. Один класс, который имеет отношение к изображению, находится в нижней части CSS, и он только делает это, поэтому я не получаю странную границу, когда я наводил изображение.

/*Link Info */ 

a { 
    text-decoration: none; 
    color: #DB7093; 
} 

a:link, a:visited { 
    text-decoration: none; 
    color: #FFC0CB; 
} 

a:hover, a:active { 
    text-decoration: none; 
    background-color: #DB7093; 
    color: #F0F8FF; 
} 

/*Banner Navigation*/ 

#main-banner { 
    width: 100%; 
    height: 110px; 
    padding: 25px 0 0; 
    background-color: #FFC0CB; 
} 

#main-banner header { 
    width: 70%; 
    margin: auto; 
} 

#main-banner header img { 
    width: 300px; 
    height: 100px; 
    float: left; 
    margin-left: 10%; 
} 

#main-banner header nav { 
    position: relative; 
    height: 20px; 
    left: 105px; 
    top: 50px; 
} 

#main-banner header nav ul { 
    list-style: none; 
    margin: auto; 
} 

#main-banner header nav ul li { 
    float: left; 
    display: inline; 
} 

#main-banner header nav li a:hover { 
    background-color: #DB7093; 
    color: #F0F8FF; 
    text-shadow: none; 
} 

#main-banner header nav ul li a { 
    color: #DB7093; 
    display: block; 
    padding: 3px 15px; 
    height: 12px; 
} 

/*Image Links*/ 

a#image { 
    background-color: transparent; 
} 

Answer 1

Так что вопрос является нав тегов и стиль CSS левый/верх/высота, потому что контейнер является таким же, как связь изображения так, есть перекрытие.

удаляющий левый/верхний/высота исправляет его, как видно here. Это зависит от того, какова ваша конечная цель, насколько выглядит взгляд, чтобы исправить ситуацию и по-прежнему иметь внешний вид, который вы хотите.

#main-banner header nav { 
    position: relative;  
} 

EDIT: Я думаю, используя некоторый запас, чтобы переместить элемент будет получить, что вы хотите, просто не знает, где размещение должно идти.

Answer 2

Понял это благодаря чему-то, что указал Charles380. Я сделал изображение абсолютным и просто военно-морским родственником, поэтому я мог перемещать его так, как я хотел. Спасибо за помощь ребята.