выравнивание по правому краю в IE

Dasha · July 18, 2012

Еще пара часов потеряно, рецепт так и найден.

Есть две маленькие картинки.

одну нужно расположить справа вверху страницы.

Вторую- справа внизу страницы.

И все это должно оставаться на месте в при прокрутке станицы.

Я написала вот что:

#up{

position:fixed;

top:0%;

right:0%;

}

#down{

position:fixed;

bottom:0%;

right:0%;

}

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

Подскажите, пожалуйста, как сделать так, чтобы и в IE работало.

Edited July 18, 2012 by Dasha

hypnocolor · July 18, 2012

А зачем в процентах? Оставьте просто нули. И непонятно, кстати, про какой именно IE идет речь.

Edited July 18, 2012 by hypnocolor

Catherine · July 18, 2012

IE6 и ниже значение fixed не поддерживает ссылка. В IE7 и выше все работает нормально. Пример.

Dasha · July 18, 2012

IE6 и ниже значение fixed не поддерживает ссылка. В IE7 и выше все работает нормально. Пример.

Спасибо за ссылочку. КАКИЕ-ТО ЧУДЕСА творятся.

по вашей ссылке, которую я открываю в IE как раз, а он у меня 8 версии, все показывается именно так, как нужно, справа вверху и справа внизу.

Создаю свой .html файл, запускаю его в IE8 и опять 25, фон красный вверху растянут на всю ширину экрана, и картинки опять прижались к левому боку и не отлепляются оттуда (( практически хнык

текст хтмлки моей

<style>

#up, #down {
background: red;
position:fixed;
}
#up{
top:0;
right:0;
}
#down{
bottom:0;
right:0;
}
</style>

<body>

<div id='up'><img src="https://r.bstatic.com/static/img/b25logo/booking_header.png"></div>
<div id='down'>down</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus tempus lectus, eu commodo lorem tempor id. Vestibulum at sapien tortor. Pellentesque non odio erat, nec imperdiet risus. Aliquam fermentum bibendum libero vel tempus. Pellentesque vehicula dui ut magna placerat vehicula. In consectetur magna et neque eleifend faucibus a sed ante. Proin laoreet mattis purus pellentesque adipiscing. Donec sed justo eget massa fringilla fermentum.

Ut eu metus varius ante sollicitudin pharetra id ut ligula. Pellentesque vehicula enim ut nunc porttitor sed pulvinar felis hendrerit. Aenean faucibus vehicula nunc eu bibendum. Quisque sit amet convallis dolor. Nam massa est, hendrerit eu viverra eu, vulputate id magna. Nunc arcu magna, posuere lobortis tempus at, consequat non neque. Duis scelerisque, dolor eu placerat vestibulum, neque turpis luctus tellus, eu vulputate leo orci viverra mi. Aenean fermentum, dui sed pellentesque dignissim, libero urna euismod lectus, mattis tincidunt neque tortor a mi. Nunc mauris enim, accumsan vitae dapibus sit amet, adipiscing quis eros. Sed quis turpis et risus fringilla convallis quis sed tortor. Sed eu ligula sed elit egestas ullamcorper. Phasellus aliquet lorem in justo tincidunt ut sodales sem lacinia. Quisque at massa neque. Pellentesque nec magna erat, id adipiscing libero. Duis quam risus, scelerisque in porta at, rutrum in ipsum. Proin urna risus, eleifend eu dignissim vitae, tempor rhoncus magna.

Quisque posuere venenatis diam, nec accumsan dolor euismod vitae. Suspendisse vel tortor sem. Fusce pulvinar rutrum eros, sed viverra velit commodo pulvinar. Proin quis quam quis orci cursus luctus eget quis ipsum. Nam aliquet semper metus vel placerat. Quisque a odio quis ligula egestas iaculis sit amet vel ante. Mauris et dolor velit, non sollicitudin magna. Proin imperdiet tincidunt quam, sed vehicula felis porta eget. In non urna vitae nisi vulputate sodales. Suspendisse potenti. Curabitur gravida, augue quis vestibulum mattis, sem erat aliquet lacus, non lobortis nulla elit et nisl. Suspendisse at nisl odio. Nam fermentum egestas quam, non accumsan orci tempus nec. Pellentesque sed sem nibh, vitae auctor orci. Etiam eu laoreet elit.

Cras eros nisl, blandit bibendum posuere id, fringilla ac tortor. Curabitur et libero eget sem ultrices mattis. In a mauris libero, eget ultrices dolor. Vestibulum ornare cursus urna, vel fermentum odio cursus quis. Suspendisse potenti. Etiam eleifend mauris sed diam dapibus luctus. Fusce consectetur, est eget placerat faucibus, enim velit tempus leo, vitae laoreet arcu dui vitae nulla.

Donec nulla sem, porttitor fringilla blandit in, accumsan quis enim. Curabitur posuere aliquam porta. Quisque rutrum, purus nec suscipit commodo, ipsum est elementum dui, sit amet varius odio leo dapibus sem. Sed placerat euismod mi id fermentum. Vivamus hendrerit tincidunt felis, sed convallis leo semper nec. Curabitur quis lorem mauris. Vestibulum accumsan rutrum mauris, non fermentum augue mattis vel. Pellentesque et elit enim, sed placerat nulla. Mauris lorem tortor, aliquam at posuere nec, semper vel urna. Cras tortor tortor, lacinia vitae accumsan a, tincidunt at mi. Vivamus vel justo augue. Proin non blandit tellus. In hac habitasse platea dictumst.</div>

</body>
</html>

Я не понимаю, как одно и тоже может по-разному отображаться у меня на компьютере и со стороннего сайта.

В чем ошибочка, не подскажите?

Modestes · July 18, 2012

у вас head не закрыт </head> и в начале документа пропишите <!DOCTYPE html>



<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#up, #down {
    background: red;
    position:fixed;
}
#up{
    top:0;
    right:0;
}
#down{
    bottom:0;
    right:0;
}
</style>
<body>

<div id='up'>
	<img src="https://r.bstatic.com/static/img/b25logo/booking_header.png">
</div>

<div id='down'>down</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus tempus lectus, eu commodo lorem tempor id. 
Vestibulum at sapien tortor. Pellentesque non odio erat, nec imperdiet risus. Aliquam fermentum bibendum libero vel tempus. 
Pellentesque vehicula dui ut magna placerat vehicula. In consectetur magna et neque eleifend faucibus a sed ante. 
Proin laoreet mattis purus pellentesque adipiscing. Donec sed justo eget massa fringilla fermentum.
Ut eu metus varius ante sollicitudin pharetra id ut ligula. Pellentesque vehicula enim ut nunc porttitor sed pulvinar felis hendrerit. 
Aenean faucibus vehicula nunc eu bibendum. Quisque sit amet convallis dolor. Nam massa est, hendrerit eu viverra eu, vulputate id magna. 
</body>
</html>

Edited July 18, 2012 by Modestes

Dasha · July 18, 2012

у вас head не закрыт </head> и в начале документа пропишите <!DOCTYPE html>

Извиняюсь за свою невнимательность, добавила изменения, которые вы привели, заработало.

Catherine, спасибо за рабочий вариант.

Только вот еще небольшой вопросец - в нижний слой (#down) я вставила картинку, также, как и в верхний (#up).

Верхний слой прижался плотно к правому верхнему углу, а НИЖНИЙ к правому углу плотно прижался, а к нижнему с отступом пикселей в 5 на глаз.

Как бы это исправить, чтобы #down к низу плотно прижался?

Edited July 18, 2012 by Dasha

Sign In

выравнивание по правому краю в IE

Question

Dasha

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

Dasha

Link to comment

Share on other sites

Modestes

Link to comment

Share on other sites

Dasha

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information