Jump to content
  • 0

Проблема с отображением модуля в IE7

Freeman Liberty

Asked by Freeman Liberty,

 Share

Question

20 answers to this question

Recommended Posts

  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted
thumbsup-title - вот этому диву например пропиши overflow:hidden; zoom:1;

Ничего не дало.

Нужный результат дает банальное

 .thumbsup-title {
  float: right;

Но тогда модуль не правильно отображается в Firefox

Может есть еще какие способы

Вот основной код:

.thumbsup-image img {
	padding:4px;
	border: 1px solid #f8c122;
	background: #f1f1f1;
	margin-right:4px;
	margin-top:-1px;
	}

.thumbsup-image {
	border-bottom: 0px #999 solid;
	margin-bottom:5px;
	padding-bottom:3px;
	padding-top:3px;
	padding-left:0px;
}

.thumbsup-title {
	font-size:12px;
	padding-bottom:2px;
}

.thumbsup-intro {
	font-size:11px;
	font-weight:normal;
	padding-bottom:4px;
}

.thumbsup-text {
	border-bottom: 0px #999 solid;
}

.thumbsup-text a {
	font-weight:normal;
}

.thumbsup-date {
	font-weight:normal;
	font-size:9px;
	padding-bottom:4px;
}

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

Решил проблему с помощью

.thumbsup-image img {
float:left;
overflow:hidden;

Спасибо Psywalker за подсказку.

Теперь бы еще разобраться откуда в IE7

такой большой промежуток между картинкой и текстом?

И как его убрать оставив все как есть в остальных браузерах?

b8c2510034c38669bc779126f79fd0ba.jpg

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

Сделал так 

thumbsup-image img {
display:inline;
float:left;
overflow:hidden;
	padding:4px;
	border: 1px solid #f8c122;
	background: #f1f1f1;
	margin-right:4px;
	margin-top:-1px;
	}

.thumbsup-image {
display:inline;
	border-bottom: 0px #999 solid;
	margin-bottom:5px;
	padding-bottom:3px;
	padding-top:3px;
	padding-left:0px;
}

В IE 7 никаких изменений.

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

margin-right:-4px;

Дает нужный эффект для IE 7

Но тогда во всех остальных браузерах текст налазит на картинку

align:left - не дает видимых изменений для IE 7 -выравнивание по левому краю задается float:left;

Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted (edited)

тьфу, совсем уже крыша едет. Забыл важную часть.

в HTML:

<!--[if (!IE) | (gt IE 7)]><!-->
    <body>
<!--><![endif]-->
<!--[if IE 7]>
    <body class="ie7">
<![endif]-->
<!--[if IE 6]>
    <body class="ie6">
<![endif]-->

в CSS: 

.ie7 .thumbsup-image img {margin-right:-4px;}

ЗЫ. Можно, конечно, делать для ie отдельные css или вставлять стили для ie в код страницы условными комментариями. Но данный способ хорош тем, что указав класс для body, легко делать стили для ie в том же файле стилей, что и для нормальных браузеров.

Edited by Kaylang
Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

Спасибо за совет Kaylang.

Вот если ты еще подскажешь где именно вставить этот код 

<!--[if (!IE) | (gt IE 7)]><!-->
<body>
<!--><![endif]-->
<!--[if IE 7]>
<body class="ie7">
<![endif]-->

Учитывая что это не статичная html страничка, а один из модулей сайта на Joomla.

Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted (edited)
Спасибо за совет Kaylang.

Вот если ты еще подскажешь где именно вставить этот код 

<!--[if (!IE) | (gt IE 7)]><!-->
<body>
<!--><![endif]-->
<!--[if IE 7]>
<body class="ie7">
<![endif]-->

Учитывая что это не статичная html страничка, а один из модулей сайта на Joomla.

index.php в твоем шаблоне.

Найди тэг <body> и замени его вышеприведеной конструкцией.

Edited by Kaylang
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