问题描述:

I added a logo image and then the code below, in the header section, is no longer displayed when the html is viewed. The new image seems to overlap the old content. What changes should I make?

<!DOCTYPE html>

<html dir="ltr" lang="en-IN" class="js">

<head>

<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">

<link href="/static/css/common_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">

<link href="/static/css/list_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">

</head>

<body>

{% include "kooltopbar.html" %}

<div id="wrapper">

<h1 id="logo" class="sprite_index_in_in_en_logo spritetext"></h1>

<header>

<nav class="navbar nohistory">

<ul class="inlined">

<li>

<a href="/">{% trans %}Home{% endtrans %}</a>

</li>

<li class="current">

<a href="/customer_service.htm">{% trans %}Customer Service{% endtrans %}</a>

</li>

</ul>

</nav>

</header>

The CSS is

header .navbar {

padding-top: 12px;

}

header .navbar a {

text-transform: uppercase;

}

header {

display: block;

overflow: hidden;

padding-bottom: 8px;

margin-bottom: 16px;

position: relative;

}

header h1 {

margin: 0px;

}

header {

border-bottom: 3px solid #f2663b;

}

.sprite_index_in_in_en_logo {

margin-top: 35px;

width: 1024px;

height: 138px;

background: url(/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26) no-repeat -1010px -27px;

}

The problem occurs in google chrome but not in internet explorer. In internet explorer the page renders as expected.

网友答案:

Replace your class sprite_index_in_in_en_logo as mention below

<style>
header .navbar {
    padding-top: 12px;
}

header .navbar a {
    text-transform: uppercase;
}

header {
    display: block;
    overflow: hidden;
    padding-bottom: 8px;
    margin-bottom: 16px;
    position: relative;
}

header h1 {
    margin: 0px;
}

header {
    border-bottom: 3px solid #f2663b;
}


.sprite_index_in_in_en_logo 
{
margin-top: 35px;
width: 1024px;
height: 288px;
background: url(http://www.i2clipart.com/cliparts/4/8/0/e/clipart-simple-leaf-480e.png) no-repeat 0px;
}
</style>
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext"></h1>




<header>  

    <nav class="navbar nohistory">
        <ul class="inlined">
            <li>
                <a href="/">{% trans %}Home{% endtrans %}</a>
            </li>                 


            <li class="current">
                <a href="/customer_service.htm">{% trans %}Customer Service{% endtrans %}</a>
            </li>

        </ul>
    </nav>


</header>
网友答案:

It seems the problem is with your background image. Try removing -1010px and -27px.

For eg :

background: url(http://www.addnectar.co.in/ovenfresh/ovenfresh/images/gif1.gif) no-repeat;
相关阅读:
Top