Я переделываю свой веб-сайт и сталкиваюсь с двумя проблемами, с которыми мне хотелось бы помочь, если это возможно.
Ссылка на тестовый сайт: http://elovideo.com/test/index.html
1) Я добавляю встроенное видео с постером, чтобы оно не загружалось при загрузке страницы. Когда я просматриваю страницу в Firefox и нажимаю на фильм, наведение все еще работает на других моих гиперссылках. Мои ссылки загораются, появляется подчеркивание или видна рука, указывающая, что эти элементы можно выбрать.
Однако в Safari при выборе видео мой курсор не работает. Я все еще могу нажимать на ссылки, но для кого-то новичка на моем сайте они не поймут, что часть текста является гиперссылкой. Наведение отлично работает до выбора видео для просмотра / загрузки.
2) Пунктирная рамка появляется вокруг моей программы просмотра видео, когда фильм воспроизводится в Firefox. Я хотел бы быть в состоянии остановить это. В Safari этого не происходит.
Я совершенно уверен, что ошибка заключается в ошибке пользователя, поскольку я не очень хорошо умею писать код. Любая помощь будет принята с благодарностью. Если я делаю что-то не так, пожалуйста, дайте мне знать.
Спасибо!
Erica
Таблица стилей CSS Code НИЖЕ - HTML можно посмотреть на сайте, указанном выше.
html, body , ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.more {
text-align: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
body, h1, h2, h3, form {
font: 14px tahoma, arial, sans-serif;
margin: 0;
padding: 0;
color: #7a895d; repeat-x;
}
body {
background: #7a895d url(images/headerback.jpg) repeat-x;
text-align: left;
}
#bodyinner {
background: url(images/white.jpg) repeat-y;
width: 960px;
margin: 0;
padding: 10px 30px 20px 10px;
z-index: 2;
}
#wrapper {
text-align: left;
margin: auto;
width: 1000px;
background: #7a895d ;
}
#header {
height: 100px;
position: absolute;
}
#header h1 {
margin-top: 0px;
}
#header h1 img {
display: block;
}
#bnav {
margin-top: 0px;
margin-left: 200px;
}
#bnav img {
float: left;
}
#nav {
margin-top: -80px;
margin-left: 200px;
}
#nav img {
float: left;
}
#headline {
padding: 210px 0px 0px 10px;
}
#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #a5b87c;
padding: 2px;
}
#photo img {
display: block;
}
#search-news {
float: right;
width: 240px;
}
#search-news div {
padding: 0px 0px 0px 0px;
}
#search-news #q {
width: 240px;
border: 1px solid #859D31;
margin: 1em 0 0 1em;
}
#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 0px 3px 3px 3px;
margin: 0.2em 0 0.4em 1em;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 1em;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin: 1em 0 0.4em 1em;
background: #7a895d repeat-x;
}
a {
font-weight: bold;
color: #5C5C5C;
}
#body-left {
float: left;
margin: 20px;
width: 408px;
}
#body-right {
float: right;
margin: 20px;
width: 450px;
}
#body-full {
float: left;
width: 1000px;
}
#body-left ul.plussbullets {
margin-top: 245px;
margin-left: 120px;
padding: 0;
font-weight: bold;
position: relative;
}
#body-left ul.plussbullets li {
background: top left url(images/bullet_plus.gif) repeat-x;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
position: relative;
}
#body h2, #body p {
margin: 0.3em 0;
}
#body-right p {
margin-right: 2em;
}
#body a.green {
color: #9AAB68;
font-weight: normal;
text-decoration: underline;
}
#gallery img {
float: left;
padding: 0 0 5px 5px;
}
#footer {
color: #FFFFFF;
background: #42453D url(images/footer_bg.gif) repeat-x;
padding: 10px 10px 10px 10px;
font-weight: bold;
}
#footer p {
margin: 0;
text-align: center;
padding: 0px;
}