Проблема положения CSS для горизонтального меню в Safari / Chrome текста - PullRequest
Новая
       41

Проблема положения CSS для горизонтального меню в Safari / Chrome текста

0 голосов
/ 31 марта 2011

Я искал высокий и низкий ответ на этот вопрос - я попробовал несколько вещей, таких как удаление charset UTF 8, добавление clear обоих, обеспечение установки ширины всех контейнеров и так далее.

Может ли кто-нибудь из вас заметить проблему, хотя в CSS и HTML ниже, почему, когда я преобразовал эту пользовательскую тему из html в Wordpress, он вдруг решил, что она будет по-разному отображать меню в браузерах webkit?На Firefox он по-прежнему работает нормально.

Любая помощь будет очень признательна, поэтому я могу немного поспать!

Это для http://silvermoths.com

Это HTMLдля заголовка 

<body>
<div id="wrapper">
<div id="header">

<div id="social">
<ul>
<li id="spotify"><a href="http://open.spotify.com/artist/4Adcr34XrVCTVJbfvJGBxQ"></a>
<li id="myspace"><a href="http://myspace.com/silvermoths"></a>
<li id="twitter"><a href="http://twitter.com/silvermoths"></a>
<li id="facebook"><a href="http://www.facebook.com/silvermoths"></a>
</ul>

<form id="email" action='http://madmimi.com/signups/subscribe/29549' method='post'>

   <label for='signup_email'>Enter Email:</label> 
<input id='signup_email' class="text" name='signup[email]' type='text' /><br />

<input name='commit' class='button' type='submit' value='Signup now to keep informed' />


</form>

</div><!--end of social-->

<div id="banner">
<a href="http://silvermoths.com"><img src="<?php echo(get_bloginfo('template_directory')); ?>/images/logo.png" width="468" height="189" alt="Silvermoths" class="logo" />
<h1>Silvermoths</h1>

</div><!--end of banner-->


<div id="nav">
<ul>
<?php wp_page_menu('show_home=1'); ?>
</ul>
</div><!--end of navigation-->


</div><!--end of header-->

Это CSS: 

    /*
Theme Name: Silvermoths 
Theme URI: http://silvermoths.com
Description: Custome theme for Silvemroths  
Author: Rylan Holey
Version: 1.0 
Tags: orange, social buttons, two coloumn

License:
License URI:

General comments (optional).
*/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}





/* CSS Document */

@font-face {
    font-family: 'DejaVuSerifBook';
    src: url('DejaVuSerif-webfont.eot');
    src: local('☺'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontO0VgJAHF') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TendernessRegular';
    src: url('Tenderness-webfont.eot');
    src: url('Tenderness-webfont.eot?iefix') format('eot'),
         url('Tenderness-webfont.woff') format('woff'),
         url('Tenderness-webfont.ttf') format('truetype'),
         url('Tenderness-webfont.svg#webfontaYPTm82W') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
    margin: 0;
    padding: 0;
    background:url('images/body_bg.jpg');
    background-color:#f05323;
    background-repeat:no-repeat;
    background-position:center top;
    font-family:Georgia, "Times New Roman", Times, serif;
    width: 100%;
    display: table;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.wp-caption {
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* optional rounded corners for browsers that support it */
    margin: 10px;
    padding-top: 4px;
    text-align: center;
}
.wp-caption img {
    border: 0 none;
    margin: 0;
    padding: 0;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

#wrapper {
    position:relative;
    text-align:left;
    width: 960px;
    margin-right: auto;
    margin-left:auto;   

    border-bottom: #e87529 solid 10px;
    }

#header {
    width:960px;
    height:350px !important;

}   



#banner{

    height: 189px;
    width: 468px;
}

#banner img{
    border-style: none;

}

#banner h1{
    float:left;
    text-indent: -9999px;
}



#banner .logo {
    float:left;
    width:468px;
    margin-top: 45px;
    margin-left: 20px;

}

#description h2{
    text-indent: -9999px;  
}

#social{ 
    clear:both;
    width:320px;
    float:right;
    margin-right: 10px
}

#social li, #social a {
    height:64px;
    display:block;

}


#social ul {
    list-style:none;
    margin:15px 0 0 0;
    padding:0;
}

#social  li {   
    display:inline;
    float:right;
    text-align:left;
    margin-left:16px;
    height:64px;
    width:64px;
    display:block;

    }

#social a:link, #social a:visited {
    text-decoration: none;
    border-style: none;
}


    #twitter {left:0px;width:64px;}
    #twitter {background:url('images/twitter_sprite.png') 0 0;}
    #twitter a:hover{background: url('images/twitter_sprite.png') 0 -65px;}
    #twitter a:active{background: url('images/twitter_sprite.png') 0 -130px;}

    #facebook {left:0px;width:64px;}
    #facebook {background:url('images/facebook_sprite.png') 0 0;}
    #facebook a:hover{background: url('images/facebook_sprite.png') 0 -65px;}
    #facebook a:active{background: url('images/facebook_sprite.png') 0 -130px;}


    #spotify {left:0px;width:64px;}
    #spotify {background:url('images/spotify_sprite.png') 0 0;}
    #spotify a:hover{background: url('images/spotify_sprite.png') 0 -65px;}
    #spotify a:active{background: url('images/spotify_sprite.png') 0 -130px;}

    #myspace {left:0px;width:64px;}
    #myspace {background:url('images/myspace_sprite.png') 0 0;}
    #myspace a:hover{background: url('images/myspace_sprite.png') 0 -65px;}
    #myspace a:active{background: url('images/myspace_sprite.png') 0 -130px;}



#social img
{  border-style: none;
}

form#email
{
    clear:both;
    width:300px;
    height:102px;
    float:right;
    display: block;
    margin-top: 29px;
    margin-bottom: 29px;
    text-align: center;
    padding:24px 0 0 0;
    background-image: url(images/content_bg.png);
    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    font-size:22px;


    }

label
    {

    color:#FFF;


}



#email .button {
    margin-top:15px;
    width:238px;
    height:37px;
    font-weight: bold; 
    font-size: 15px; 
    font-family:Arial, Sans serif;
    color: white;
    border: none;
    background: url('images/signup_button.png') 0 0;
    }

#email .button:hover {
    margin-top:15px;
    width:238px;
    height:37px;
    font-weight: bold; 
    font-size: 15px; 
    font-family:Arial, Sans serif;
    color: white;
    border: none;
    background: url('images/signup_button.png') 0 -38px;
    }

#email .button:active {
    margin-top:15px;
    width:238px;
    height:37px;
    font-weight: bold; 
    font-size: 15px; 
    font-family:Arial, Sans serif;
    color: white;
    border: none;
    background: url('images/signup_button.png') 0 -77px;
    }

#email .text {
    height:30px;

}


#nav {
    float:left;
    clear:both;
    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    color: #e5e8e6;
    font-size:30px;
    height:70px;
    width:960px;    
    text-align:left;
    background-image: url('images/content_bg.png');
    z-index:0;

}

#nav ul {
    list-style:none;
    margin:17px 0 0 0;
    padding:0;
}

#nav  li {  
    display:inline;
    float:left;
    text-align:left;
    margin-left:0;
    height:70px;
    z-index:100;



    }

#nav a:link, #nav  a:visited {
    padding: 15px 0.5em 15.5px 0.5em;
    color: #e5e8e6;
    text-decoration:none;
}

#nav a:hover {
    color:#FFF;

}
#nav a:active {
    color:#FFF;
    font-weight:bold;
}


#sidebar {

    float:right;
    width:260px;
    margin:15px 10px 15px 10px ;
    padding:20px;
    background-image: url('images/content_bg.png');
    height: 100%;

}

#single img {
    border:none;
    background:none;
}

#content {

    clear:both;
    float:left;
    width:580px;
    margin:15px 10px 15px 10px;
    padding:20px;
    background-image: url('images/content_bg.png');

}

#content .post-image img {
    float:left;

    margin:15px 15px 15px 10px;

    border-top: 1px solid #555;
    padding: 10px;
    background: #3c3a3a;
    -webkit-box-shadow: 5px 5px 6px #242424;
-moz-box-shadow: 5px 5px 6px #242424;
box-shadow: 5px 5px 6px #242424;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}






#placeholder {

    height:350px;
    border: 1px solid  #bb3e26;
    margin-top:10px;
    background: #FFE7CF;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

#placeholder .meta {

    margin: 150px 10px 0 10px;
    text-align:left;
}   

#placeholder h3 {

    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    color: #bb3e26;
    font-size:18px;
    margin-top:0;
    margin-bottom:0;
    font-style: italic;

}

#text {

    clear:both;

}


#footer h1, #sidebar h1, #content h1 {
    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size:50px;
    margin-top:0.3em;
    margin-bottom:0;
    font-weight:bold;



}

#sidebar h2, #content h2 {
    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size:30px;
    margin-top:0;
    margin-bottom:0;
    font-weight:bold;

}

#sidebar h3, #content h3 {
    font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size:22px;
    margin-top:0;
    margin-bottom:0;
    font-weight:bold;

}

#sidebar h1+p, #sidebar h2+p, #content h1+p, #content h2+p, #placeholder h3+p  {
    margin-top:0;
}

#sidebar p, #content p {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size:14px;

}


#content a:link, #content a:visited {

    color: #bb3e26;
    text-decoration:none;
}

#content a:hover {
    color:#5e1f12;
}



#post {
    padding-top:0.5em;
    border-bottom:2px solid #5e1f12;
    height:125px;
}

#post .thumb {

    float:right;
    border-style:solid;
    border-color:#5e1f12 ;
    border-width:2px;
    margin:5px 10px 2px 5px;
}

#content a:link, #content a:visited {
    color: #1D4896;
    text-decoration:none;
}

#content a:hover {
    color:#FFF;
    background-color:#3c3a3a;
}

#content .post {
border-style: none;

}

#sidebar ul {
    list-style:none
}


#searchform input {
    margin-left:45px

}



#footer {

    clear:both;
    width:920px;
    height:150px;
    background-color:#f05323;
    font-family:Georgia, "Times New Roman", Times, serif;
    color: #fff;
    padding:20px;
}

#footer .copyright {

    float:right;

}

1 Ответ

1 голос
/ 31 марта 2011

Похоже, что проблема вызвана фантомной пустой ссылкой внутри <div class="menu"> чуть выше <ul>. Смотрите прикрепленное изображение.

enter image description here

Это странно, потому что его нет в исходном коде, что заставляет меня думать, что оно генерируется WordPress?

Если вы используете плагин разработчика Chrome, вы можете проверить элемент , чтобы увидеть, где генерируется ссылка.

...