Форматирование виджета Twitter в Internet Explorer и Firefox

Я загрузил код JavaScript с http://twitter.com, чтобы встроить виджет Twitter в блок на главной странице этого сайта. : http://www.fareham.vm.bytemark.co.uk/.

Блок отображается нормально в Google Chrome (10.0.648.133) и Opera (11.01), но в Internet Explorer (7.0.5730.13CO) и Firefox (3.6.15) блок отображается неправильно, скрывая блок последних новостей.

Код CSS загружается с: http://widgets.twimg.com/j/2/widget.css:

.twtr-widget {
    position:relative;
    font-size:12px!important;
    font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
    zoom:1;
}
.twtr-fullscreen {
    font-size:220%!important;
}
.twtr-fullscreen .twtr-new-results {
    _display:none!important;
}
.twtr-inactive {
    display:none;
}
.twtr-widget a img {
    border:0!important;
}
.twtr-doc {
    overflow:hidden;
    width:100%;
    text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.twtr-bd {
    padding:0 1px;
}
.twtr-widget .twtr-tweet-wrap {
    padding:6px 8px;
    overflow:hidden;
    zoom:1;
}
.twtr-fullscreen .twtr-tweet-wrap {
    padding:20px;
}
.twtr-widget .twtr-tweet {
    border-bottom:1px dotted #ddd;
    overflow:hidden;
    zoom:1;
}
.twtr-widget-profile img.twtr-profile-img {
    display:block;
    float:left;
    width:31px;
    height:31px;
    border:0!important;
}
.twtr-widget h3,.twtr-widget h4,.twtr-widget p {
    margin:0!important;
    padding:0!important;
    line-height:1.2!important;
    width:auto!important;
}
.twtr-widget-profile h3,.twtr-widget-profile h4 {
    margin:0 0 0 40px!important;
}
.twtr-widget h3 {
    font-size:11px!important;
    font-weight:normal!important;
}
.twtr-widget h4 {
    font-size:16px!important;
}
.twtr-widget em,.twtr-widget .twtr-new-results {
    font-size:9px;
    font-style:normal;
    display:block;
    margin-top:2px;zoom:1;
}
.twtr-widget .twtr-new-results {
    text-align:center;
    padding:3px;
    margin:0 auto -10px auto!important;
    display:block;
    position:relative;
    bottom:5px;
    line-height:.9;
}
.twtr-results-inner {
    line-height:1;
    font-size:100%;
    padding:4px 0;
    position:relative;
    bottom:-2px;
    width:40%;
    margin:0 auto;
    z-index:2;
    text-align:center;
}
.twtr-results-hr {
    width:100%;
    position:relative;
    z-index:1;
    height:1px;
    border-bottom:1px dotted #ddd;
    bottom:7px;
    background:none;
    overflow:hidden;
}
.twtr-new-results span {
    position:relative;
    z-index:3;
    top:-14px;
    display:block;
    font-size:9px!important;
}
.twtr-fullscreen .twtr-new-results span {
    font-size:24px!important;
}
.twtr-hd {
    padding:10px;
    position:relative;
    zoom:1;
    overflow:hidden;
}
.twtr-fullscreen .twtr-hd {
    height:0;
    padding:0;
}
.twtr-timeline {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
    z-index:2;
    height:225px;
}
.twtr-scroll .twtr-timeline {
    overflow-x:hidden;
    overflow-y:auto;
}
.twtr-widget .twtr-tweet:last-child {
    border-bottom-width:0;
}
.twtr-ft {
    position:relative;
}
.twtr-ft div {
    overflow:hidden;
    padding:10px;zoom:1;
}
.twtr-ft span {
    float:right;text-align:right;
}
.twtr-ft a {
    float:left;display:block;
}
.twtr-ft a img {
    position:relative;
    top:2px;
}
.twtr-ft span a {
    float:none;
}
.twtr-avatar {
    width:40px;
    height:40px;
    float:left;
    overflow:hidden;
    display:block;
}
.twtr-fullscreen .twtr-avatar {
    width:80px;
    height:80px;
}
.twtr-img {
    height:25px;
    width:25px;
}
.twtr-img img {
    width:30px;
    height:30px;
}
.twtr-fullscreen .twtr-img img {
    width:72px;
    height:72px;
}
.twtr-fullscreen a.twtr-join-conv {
    display:none;
}
.twtr-tweet-text {
    margin-left:40px;
}
.twtr-fullscreen .twtr-tweet-text {
    margin-left:90px;
}
.twtr-popular {
    font-size:10px;
    padding:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:inline-block;
    margin-top:3px;
    opacity:.8;
}
.twtr-doc a {
    text-decoration:none!important;
}
.twtr-doc a:hover {
    text-decoration:underline!important;
}

css internet-explorer twitter firefox positioning
person unpossible    schedule 18.03.2011    source источник
comment
Много overflow:hidden; на этом, когда он деактивирован в FF, он идет туда, где должен быть. Попробуйте поиграться с настройками переполнения в CSS.   -  person Kyle    schedule 18.03.2011

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, ваша проблема не имеет ничего общего с позиционированием.

Ваш элемент <h2>, который появляется непосредственно перед лентой твиттера...

<h2>Twitter Timeline</h2>

... на него влияет следующее правило CSS: (demo.css, строка 10)

.promo-center-2cols .block h2 {
    float:left;
    width:320px
}

Бросьте float:left. Проблема в том, что вскоре после него есть div... (class="twtr-doc")

<h2>Twitter Timeline</h2>
<div class="content">
    <div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
        <div class="twtr-doc" style="width:100%;">

... на который нацелено следующее правило: (widget.css строка 12)

.twtr-doc {
    overflow:hidden;
    width:100%;text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

Эти float и overflow вместе создают вашу проблему. Вам придется изменить один из них, и, поскольку widget.css происходит от widgets.twimg.com (Twitter), я предполагаю, что вы не можете его изменить, поэтому измените значение float в demo.css.

person Richard JP Le Guen    schedule 18.03.2011
comment
Спасибо за помощь, ЛегуРи, ты звезда. Я закомментировал оскорбительный код, и теперь блок отображается правильно. - person unpossible; 18.03.2011