Jump to content
  • 0

Проблема с плавающим фреймом

Gamer

Asked by Gamer,

 Share

Question

Gamer Explorer

Gamer

Posted
Posted (edited)

Здравствуйте!

На странице имеются плавающий фрейм (чат) и скрипт для его сокрытия/показа по клике на ссылку. Все прекрасно работает во всех браузерах, кроме Лисы. Почему-то, при назначении свойства display:none через атрибут style непосредственно диву с фреймом последний тут же куда-то уезжает. Причем в остальных случаях (например, при вытаскивании свойства через айдишник и подвешивания на наведение/убирание мыши) никаких проблем не возникает.

Прошу помощи в поиске мистической связи свойства с глюком и способов его решения.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>...</title>
<style>
* {padding:0px;margin:0px;}
html {background:url('фон');background-repeat:repeat-x;}
</style>  
<script type="text/javascript">

function showchat(id){
display = document.getElementById(id).style.display;

if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</head>

<body>

<div style="text-align:center;height:500px;background:url('фоновое изображение');  background-repeat:no-repeat;background-position:center top;">

<div id="chat" style="display:none;margin:auto;padding:5px 20px 0px 0px;position:relative;top:50px;width:558px;height:330px;background:url('фон для чата');  background-repeat:no-repeat;">

<iframe style="width:550px;height:330px;" frameborder="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="/чат">Здесь чат, но поскольку у вас отключены ifram'ы, вы не видите его.</iframe>

</div></div>

<div><p style="text-align:center;"><a href="#" onclick="showchat('chat'); return false">Чат</a></p></div>

</body>
</html>

Собственно, примеры:

Как должно быть... | И как в Лисе

Edited by Gamer
Link to comment
Share on other sites

28 answers to this question

Recommended Posts

  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted (edited)
  Quote
Такой доктайп используется только при использовании тега frame.

Хмм... Сменю.

  Quote
Глюка в FF не заметил. Доступа на форум по ссылке, чтобы посмотреть детально, нет.

Держите: ссылка

—

Что скажете, дохтур? ^_^

Edited by Gamer
Link to comment
Share on other sites
  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted (edited)

?? У меня все открывается, под всеми браузерами.

  Quote
Не открывается у меня ссылка.

Что вам пишет браузер?

Уважаемые форумчане, кто смотрит эту тему, пожалуйста, проверьте, открывается ли ссылка у вас? Ссылка

Edited by Gamer
Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted

ссылка у меня открылась...:lol:)

а работает действительно странно, в ИЕ появляется полоса прокрутки и всё нормально там у вас, а в ФФ нет, и контент обрезается...

по мойму проблема вот в этой строчке...

<table class="mchat" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" style="table-layout:fixed;height:100%">

http://www.htmlbook.ru/css/table-layout.html

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  Gamer said:
Убрал :lol:

Чат также криво отображается в Лисе, но теперь еще и со скроллером :huh:

Погодите, что значит криво? Отображается ровно то, что написано.

Чтобы не было скроллера, контент фрейма должен спокойно влазить в 300 пикселей.

И второе, 100% высоты от auto = auto.

Link to comment
Share on other sites
  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted
  Quote
Погодите, что значит криво? Отображается ровно то, что написано.

Положим.

  Quote
Чтобы не было скроллера, контент фрейма должен спокойно влазить в 300 пикселей.

Во всех остальных браузерах этого скроллера нет. Контент, надо думать, влезает?

  Quote
И второе, 100% высоты от auto = auto.

Мм... Не совсем понял, разъясните, пжл)

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  Gamer said:
Положим.

Не положим, а так оно и есть.

  Gamer said:
Во всех остальных браузерах этого скроллера нет. Контент, надо думать, влезает?

Это не значит, что все остальные отображают страницу правильно.

  Gamer said:
Мм... Не совсем понял, разъясните, пжл)

Вас попросили вырастить растение, которое достает до неба. Какой высоты будет ваше растение?

Link to comment
Share on other sites
  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted
  Quote
Вас попросили вырастить растение, которое достает до неба. Какой высоты будет ваше растение?

Высотой до неба, в стратосферу, надо думать, не полезет.

Йа до сих пор не догоняю, в чем корень зла и где вообще ошибка. Почему такая реакция на дисплей? И выходит это Лиса оказалась правильней всех, при том, что только у нее "криво" получается? :lol:

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  Gamer said:
Высотой до неба, в стратосферу, надо думать, не полезет.

Правильный ответ - сколько бы не выросло вверх, все будет доставать до неба. Потому что понятие "небо" неопределенное.

Если вы указываете 100% высоты от контейнера, который высоту не имеет, то вы получаете высоту контента (растения), а не высоту неба.

  Gamer said:
Йа до сих пор не догоняю, в чем корень зла и где вообще ошибка. Почему такая реакция на дисплей? И выходит это Лиса оказалась правильней всех, при том, что только у нее "криво" получается? :lol:

Корень зла - в тотальном незнании матчасти. "Криво" получается в вашей голове, потому что вы принимаете симптомы за "правильное".

<div id="mchatDiv"> имеет высоту 100%. От какого значения браузер должен взять высоту?

Link to comment
Share on other sites
  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted
  Quote
Корень зла - в тотальном незнании матчасти. "Криво" получается в вашей голове, потому что вы принимаете симптомы за "правильное".

Тогда уж еще и у разработчиков хостинга. Это их стандартный чат я пытаюсь привести в божеский вид. Самое плохое, что далеко не все позволено редактировать. Мда. Походу, придется искать чат "на стороне".

  Quote
<div id="mchatDiv"> имеет высоту 100%. От какого значения браузер должен взять высоту?

От значения высоты ячейки?

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  Gamer said:
А правда, чему? 0_0 Я в ступоре.

Равна значению auto. Это значит, что высота ячейки будет равна высоте контента, который в нее помещен.

Но вы хотите скроллер, это значит, что нужно явно указать высоту контейнера для <div id="mchatDiv">

Link to comment
Share on other sites
  • 0
Gamer Explorer

Gamer

Posted
  • Author
Posted
  Quote
Равна значению auto. Это значит, что высота ячейки будет равна высоте контента, который в нее помещен.

Но вы хотите скроллер, это значит, что нужно явно указать высоту контейнера для <div id="mchatDiv">

Ясно. Намного проще, как оказалось, подключить альтернативный чат поскольку встроенный править не дают)

Всем большое спасибо за помощь)

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  Gamer said:
Ясно. Намного проще, как оказалось, подключить альтернативный чат поскольку встроенный править не дают)

Всем большое спасибо за помощь)

Тоже вариант, но может все-таки разберетесь как правильно делать?

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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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