Jump to content
  • 0

Фоновой изображение PNG в IE 11

lavrentyev

Asked by lavrentyev,

 Share

Question

lavrentyev Explorer

lavrentyev

Posted
Posted (edited)

Доброго времени суток!

Я новичок в деле верстки, так что не судите строго. :) У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен! 

Вот код HTML:

<!DOCTYPE html>
<!-- html lang="ru" class="lt-ie9 lt-ie8 lt-ie7">
<html lang="ru" class="lt-ie9 lt-ie8">
<html lang="ru" class="lt-ie9">
<html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <title>MobileNews</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/main.css" tipe="text/css">
    <link rel="stylesheet" href="css/media.css" tipe="text/css">
    <link rel="shortcut icon" href="images/CloneMobile.png">
</head>
<body>
    <img class="arrow2" src="images/Arrow2.png" alt="Arrow2"/>
    <header>
        <div class="head">
        <img src="images/CloneMobile.png" alt="CloneMobile"/>
        <p class="logo">CloneMobile</p>
        <img class="arrow" src="images/Arrow1.png" alt="Arrow"/>
        </div>
    </header>
    <div class="line"></div>
    <nav>
        <ul class="main">
            <li><a href="#">Главная</a></li>
            <li><a href="#">Мобильные новинки</a></li>
            <li><a href="#">Форум</a></li>
            <li><a href="#">FM-радио</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </nav>
    <div class="maincont">
        <div class="sidebar">
            <aside class="first">
                <h1>Навигация</h1>
                <ul>
                    <li><a href="#">Игры</a></li>
                    <li><a href="#">Программы</a></li>
                    <li><a href="#">Темы и обои</a></li>
                    <li><a href="#">Смартфоны</a></li>
                    <li><a href="#">GPS навигаторы</a></li>
                    <li><a href="#">MP3 плееры</a></li>
                    <li><a href="#">Bluetooth гарнитуры</a></li>
                    <li><a href="#">Разное</a></li>
                </ul>
            </aside>
            <aside class="second">
                <a href="#"><img src="images/Register.png" alt="Register"/></a>
            </aside>
            <aside></aside>
        </div>
        <main>
            
        </main>
    </div>
    <footer>
        sdfsadfwfweeagf
    </footer>
    <script src="libs/html5shiv/es5-shim.min.js"></script>
    <script src="libs/html5shiv/html5shiv.min.js"></script>
    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
    <script src="libs/respond/respond.min.js"></script>
</body>
</html>

Вот CSS:

body {
    position: absolute;
    background-image: url(../images/Design.png);
    margin: 0;
    padding: 0;
    width: 80vw;
}
header, footer, nav, article {
    display: block;
}
header {
    width: 100%;
    position: relative;
    display: block;
    height: 90px;
    background-color: #fff;
    padding-right: 240px;
}
.head img {
    position: relative;
    height: 60px;
    top: 15px;
    left: 170px;
}
p.logo {
    position: relative;
    margin: 0;
    left: 240px;
    bottom: 35px;
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
}
img.arrow {
    height: 117px;
    left: 900px;
    position: absolute;
    top: 0;
}
img.arrow2 {
    height: 117px;
    left: 860px;
    position: absolute;
    top: 0;
}
.line {
    height: 3px;
    min-width: 100%;
    width: 100%;
    background-color: #9F9FA1;
     padding-right: 240px;
}
nav {
    height: 72px;
    width: 1000px;
    transform: translateX(145px);
    margin: 0 5px 5px;

}
.main li {
    display: inline;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.main li a {
    padding: 15px 25px;
    text-decoration: none;
    color: #070707;
    transition: border-radius 0.5s, background-color 0.5s, color 0.5s;
}
.main li a:hover {
    color: #070DFD;
    background-color: #AECCE5;
    border-radius: 3px;
}
ul.main {
    margin: 0;
    padding-top: 28.5px;
    padding-bottom: 28.5px;
    padding-left: 30px;

}
.maincont {
    height: 100%;
    width: 1000px;
    background-image: linear-gradient(to bottom, #F3F6F8, #D4E5F3) ;
    box-shadow: 3px 3px 3px #7F7C7C;
    transform: translateX(150px);
    padding-top: 9px;
    border-radius: 5px;
}
.sidebar {
    width: 250px;
    margin: 0;
    height: 100%
    border-right: 1px solid #8C8B8B;
}
aside.first {
    width: 100%;
    height: 470px;
}
.first h1 {
    margin: 21px 0 20px 20px;
    text-transform: uppercase;
    font-size: 21px;
    color: #1A62F6;
    font-family: Arial, Helvetica, sans-serif;
}
.first li {
    list-style-type: circle;
    font-family: Arial, Helvetica, sans-serif;
}
.first li a {
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 15px 15px;
    text-decoration: none;
    color: #070707;
    transition: border-radius 0.5s, background-color 0.5s, color 0.5s;
}
.first li a:hover {
    color: #070DFD;
    border-radius: 3px;
    background-color: #AECCE5;
}
.second img {
    padding-left: 25px;
}
.header {
    width: 100%;
}
footer {
    height: 80px;
    width: 100%;
    background-color: #666464; 
    padding-right: 240px;
    margin: 15px 0 5px 0;
}

 

Edited by lavrentyev
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
npofopr Trainee

npofopr

Posted
Posted

Воспользуйтесь песочницей, например, jsfiddle

Цитата

1. Ссылка на проблему.
1.1 Если проблема возникла на странице рабочего сайта — выложи ссылку на эту страницу.
1.2 Если проблема возникла в ходе разработки сайта, выложи сайт/страницу на любой бесплатный хостинг, и предоставь нам ссылку на проблемную страницу
1.3 Если проблема возникла в процессе создания блока/элемента страницы, выложи код сюда: jsfiddle.net

 

Link to comment
Share on other sites
  • 0
lavrentyev Explorer

lavrentyev

Posted
  • Author
Posted
36 минуты назад, lavrentyev сказал:
17 минуту назад, npofopr сказал:

Воспользуйтесь песочницей, например, jsfiddle

 

Доброго времени суток!

Я новичок в деле верстки, так что не судите строго. :) У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен! 

https://jsfiddle.net/2aw8h9xd/2/

  


 


 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept