{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 看我几分像从前 的问题《IE7 display issues (adding extra top margin)》','https://www.manongdao.com/q-424402.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am having a really tough time figuring out why IE7 adds extra padding to the this page!
This is what IE7 is doing: http://imgur.com/lwyRI.png
The correct page would have the three black tabs connected to the graphic above. This is how its supposed to look: also stored on imgur: 64qbf.png (i am only allowed one link)
The page link can be found in the img. (again i can only post one link)
please help!
css code:
<style type="text/css">
#background{
background-image: url(/images/store/vaporIronBK.jpg);
background-repeat:no-repeat;
height:auto;
width:665px;
margin-top:125px;
margin-left:228px;
padding-top:5px;
font-size:15px;
}
#background a {
color: #ffffff;
text-decoration: none;
}
#background a:hover {
color: #de156d;
}
#videoLinks {
margin-top:52px;
height: 100px;
}
#buy{
width:400px;
float:left;
clear:both;
padding-left:235px;
color:#000000;
}
#video {
float: right;
left: 683px;
margin-left: 35px;
margin-top: 166px;
width: 200px;
color: #000000;
}
#video a {
text-decoration: none;
color: #000000;
}
#video a:hover {
color: #de156d;
}
#footnotes {
color:#ffffff;
margin-top: 37px;
}
#bottom-text {
margin-left:40px;
margin-top:445px;
width:575px;
}
#bottom-text a {
color: #de156d;
text-decoration: none;
}
#bottom-text a:hover {
color: #000000;
}
#bottom-text p {
text-align: justify;
}
#bottom-text h2 {
font-size: 25px;
color: #000000;
padding-bottom: 10px;
}
#bottom-text h3 {
padding-bottom: 5px;
}
#bottom-text p {
padding-bottom: 20px;
}
#bottom-text .header-text {
padding-bottom: 25px;
}
#bottom-text p.taylor-image {
text-align: center;
}
.tabs {
height: 30px;
width: 180px;
float: left;
margin-left: 30px;
padding-top: 10px;
}
</style>
I do this to every page:
It's called a conditional comment. It's IE proprietary, but acts like a comment to other browsers and validators.
Now you can specify IE specific rules using .ie ancestor.
get some .ie #whatever{position:relative;} going on and put those boxes where they're supposed to be!
Generally speaking, especially for IE7, but for better practice anyway, always specify all sides w/padding or margin...in other words don't just use margin-top:?px (? for whatever) and assume the rest is fine. Better to use margin:?px 0 0 0 or whatever values.
Another general idea, especially with IE 7 and below is to not use margin and padding on the same element.
Also, anything floated needs a width and as to the double-margin bug, it only occurs when you have margin on the same side as the side the element is floated.....so if you're declaring float:right on something, you don't want to have margin: 0 20px 0 0 on the same thing... it will get doubled. Better to use padding on the containing element.
Not sure but try this out in your CSS do
http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp
alternatively would like to see some code as posted by others.
Try removing
margin-top:from #background and instead add aclear:bothorclear:rightfor #background.use:
Hope this helps.