разминаване при ИЕ5, 6 и 7

tini4ka · 11 Март 2012

Имам следния код, но под ИЕ5, 5 и 7 sidebar-a не е флоатнат , а отива пада отдолу, какъв може да е проблема?
[css]#wrapper{
width: 960px;
margin:0 auto;
border:8px solid #e8e6e7;
}

#header{
background:url('images/header.png') no-repeat;
height:240px;
width:960px;
}

#topmenu{
margin-top:1px;
background: url('images/topmenu-img.png') repeat-x;
height:50px;
width:960px;
}

#topmenu ul{
margin:0;
padding:0;
list-style:none;

}
#topmenu ul li{
float:left;

}

#topmenu ul li a{
text-decoration:none;
color:#fff;
text-align:center;
font-size:23px;
font-family: arial;
margin:0 30px 0 30px;
line-height:40px;
padding:0 10px 0 10px;
}

#topmenu li a:hover, #topmenu li a.active {
margin-top:1px;
background-color: #dad9d9;
color:#2a2a2a;
height:50px;
padding:7px 10px 11px 10px;
}

.clear{
clear:both;
}

#main{
background-color: #fff;
width:960px;

}
#content{
background-color: #fff;
float:left;

}

#content h1{
width:573px;
text-align:center;
color:#000;
font-size:23px;
font-weight:bold;
line-height:30px;
margin:30px 0 0 0;
font-family: 'arial';

}

#content h2{
width:573px;
text-align:center;
color:#000;
font-weight:bold;
line-height:30px;
margin:20px 0 0 0px;
font-family: 'arial';
font-size:20px;
}
#content h3{
width:573px;
text-align:center;
color:#000;
font-weight:bold;
line-height:28px;
margin:20px 0 0 0;
font-family: 'arial';
}

#content p{
position:relative;
left:30px;
top:20px;
color:#000;
width:573px;
text-indent:10px;
font-size:14px;
line-height:30px;
font-family: 'arial';
}
#content ul{
position:relative;
left:60px;
top:20px;
color:#000;
width:573px;
text-indent:10px;
font-size:14px;
line-height:30px;
font-family: 'arial';
list-style-type:circle;
}
#image{
background:url('images/image-content.png') no-repeat;
height:315px;
width:202px;
margin-top:30px;
float:left;
}
#sidebar{
margin:30px 0 0 60px;

width:185px;
height:180px;
float:left;
}
#top-img{
background:url('images/sidebar-top-img.png') no-repeat;
height:19px;
width:185px;
}

#middle-img{
background:url('images/sidebar-middle-img.png') repeat-y;
width:185px;
margin-left:1px;
}

#bottom-img{
background:url('images/sidebar-bottom-img.png') no-repeat;
height:21px;
width:185px;
margin-left:1px;
}
#middle-img p{
font-weight:bold;
font-size:14px;
margin:0 0 0 25px ;
}

#footer {
background: #fff;
font-size: 12px;
line-height: 16px;
margin: 0 auto;
margin-top:7px;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
width: 960px;
border-top:1px dotted #c7c5c5;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
color: #000000;
text-decoration: underline;
}
[/css]

HTML:

.......
<body>
	<div id="wrapper">
		<div id="header">
		</div>
		<div id="topmenu">
			<ul>
				<li>
					<a  class="active" href="index.html">Начало</a>
				</li>
				<li>
					<a   href="uslugi.html">Услуги</a>
				</li>
				<li>
					<a href="galeriq.html">Галерия</a>
				</li>
				<li>
					<a  href="zhelqzo.html">Ковано желязо</a>
				</li>
				<li>
					<a  href="contact.php">Контакти</a>
				</li>
			</ul>
		</div>
			<div class="clear"></div>
			
		<div id="main">	
			<div id="content">
				<div id="image"></div>
				<h1> Строителни ремонти до ключ!</h1>
				<h2>С нас всичко е лесно!</h2>
				<p>
					
					Текст....................... <br />
				  ...........................................<br />
					........................................................
..................................................................
					<a href="uslugi.html">тук</a>...
				</p>
					<br />
					<h3><b>Качесвенни материали, конкурентни цени и перфектно изпълнение ....</b></h3>
				
			</div>
			<div id="sidebar">
				<div id="top-img"></div>
				<div id="middle-img">
					<p>
						Контакти:<br /><br />
						Град СОФИЯ<br />
						тел: 0886 733002<br />
						тел: 0880 943011<br />
					</p>
				</div>
				<div id="bottom-img"></div>
			
			
				
			</div>
				<div class="clear"></div>
		</div>	
		<div class="clear"></div>
		<div id="footer">
			Copyright © 2012 До ключ. Всички права запазени.
			
		</div>
	</div>
</body>
....

goshkoy · 11 Март 2012

Код:

#wrapper{
        width: 960px;
        margin:0 auto;  
        border:8px solid #e8e6e7;
}

#header{
        background:url('images/header.png') no-repeat;
        height:240px;
        width:960px;
}

#topmenu{
        margin-top:1px;
        background: url('images/topmenu-img.png') repeat-x;
        height:50px;
        width:960px;
}

#topmenu ul{
        margin:0;
        padding:0;
        list-style:none;
        
}
#topmenu ul li{
        float:left;
        
}

#topmenu ul li a{
        text-decoration:none;
        color:#fff;
        text-align:center;
        font-size:23px;
        font-family: arial;
        margin:0 30px 0 30px;
        line-height:40px;
        padding:0 10px 0 10px;
}

#topmenu li a:hover, #topmenu li a.active {
margin-top:1px;
        background-color: #dad9d9;
        color:#2a2a2a;
        height:50px;
        padding:7px 10px 11px 10px;
}
        
.clear{
        clear:both;
}

#main{
        background-color: #fff;
        width:960px;
        
}
#content{
        background-color: #fff;
        float:left;
        
}

#content h1{
        width:573px;
        text-align:center;
        color:#000;
        font-size:23px;
        font-weight:bold;
        line-height:30px;
        margin:30px 0 0 0;
        font-family: 'arial';
        
}

#content h2{
        width:573px;
        text-align:center;
        color:#000;
        font-weight:bold;
        line-height:30px;
        margin:20px 0 0 0px;
        font-family: 'arial';
        font-size:20px;
}
#content h3{
        width:573px;
        text-align:center;
        color:#000;
        font-weight:bold;
        line-height:28px;
        margin:20px 0 0 0;
        font-family: 'arial';
}

#content p{
        position:relative;
        left:30px;
        top:20px;
        color:#000;
        width:573px;
        text-indent:10px;
        font-size:14px;
        line-height:30px;
        font-family: 'arial';
}
#content ul{
        position:relative;
        left:60px;
        top:20px;
        color:#000;
        width:573px;
        text-indent:10px;
        font-size:14px;
        line-height:30px;
        font-family: 'arial';
        list-style-type:circle;
}
#image{
        background:url('images/image-content.png') no-repeat;
        height:315px;
        width:202px;
        margin-top:30px;
        float:left;
}
#sidebar{
        margin:30px 0 0 60px;
        
        width:185px;
        height:180px;
        float:left;
        clear: both;
       display: block;
}
#top-img{
        background:url('images/sidebar-top-img.png') no-repeat;
        height:19px;
        width:185px;
}

#middle-img{
        background:url('images/sidebar-middle-img.png') repeat-y;
        width:185px;
        margin-left:1px;
}

#bottom-img{
        background:url('images/sidebar-bottom-img.png') no-repeat;
        height:21px;
        width:185px;
        margin-left:1px;
}
#middle-img p{
        font-weight:bold;
        font-size:14px;
        margin:0 0 0 25px ;
}

#footer {
        background: #fff;
        font-size: 12px;
    line-height: 16px;
    margin: 0 auto;
        margin-top:7px;
    padding-bottom: 10px;
    padding-top: 5px;
    text-align: center;
    width: 960px;
        border-top:1px dotted #c7c5c5;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #000000;
    text-decoration: underline;
}

а всъщност задал ли си DOCTYPE на html-a

tini4ka · 11 Март 2012

видях промяната тук:
#sidebar{
margin:30px 0 0 60px;

width:185px;
height:180px;
float:left;
clear: both;
display: block;
}

Но не е решение,искам sidebara да е до текста ми , а под Ие5 6 и 7 заминава долу?

vardana · 11 Март 2012

Да норамлно под ИЕ да има каквито и да е било проблеми, не се научиха да направят браузър като всички останали :Д

bytheway · 12 Март 2012

Виж първо каква част от посетителите ти влизат с тези версии.

Ако са 5 човека .. по-добре ги остави и не се занимавай. Кодирай за по-новите версии.

Ако по-голяма част обаче влизат с изброените версии, тогава имаш проблем с аудиторията :X

tini4ka · 12 Март 2012

то това е ясно, но .. идеята ми е така като гледате Scc-a има ли грешки, заради които може да се появява тоя проблем ?

bytheway · 12 Март 2012

Не съм гледал подробно, но може би е от margin-a, който имаш на sidebar-a

При IE 6 когато float-неш елемент и му дадеш margin, браузъра го удвоява.

Един начин да избегнеш това е да сложиш display:inline;

Или вместо margin използвай padding, защото този бъг се получава само, когато се използва margin.

Упсех

tini4ka · 12 Март 2012

ясно, но дори като махна изцяло маргина пак си остава долу, display:inline; не помага..
Направих го с отделни CSS файла за Ие6 и 7, но ако някой все пак забележи някакви грешки, ще се радвам да ги сподели

разминаване при ИЕ5, 6 и 7

tini4ka

Registered

goshkoy

Registered

tini4ka

Registered

vardana

Registered

bytheway

Registered

tini4ka

Registered

bytheway

Registered

tini4ka

Registered