Internet explorer css problem. (Hidden padding)
Question
I have created a little slider using jQuery UI, and it's works fantastically in Firefox, exactly as it should. However, in IE, it seems to put padding in between objects. Take a look and you'll see:
http://www.grant[deletethis]unwin.co.uk/slider/slider1.html
I understand that different broswers have different page margins and paddings set automatically, so I tried to use:
* {
padding: 0px;
margin: 0px;
}
But the problem persists.
The Question:
how can I eliminate the gaps between the pictures on my slider (In IE)?
5 answers
solution1
4 ACCPTED 2011-04-14 20:15:40
Your page is rendering in Quirks Mode , because you aren't using a doctype (..that will trigger Standards Mode).
Your first line is currently this:
<html>
Add a doctype as the very first line, such as the HTML5 doctype:
<!DOCTYPE html>
It will be magically fixed.
solution2
1 2011-04-14 20:15:17
Please add a valid Doctype because your website is being viewed in Quirks mode in IE.
<!DOCTYPE html>
<html> .... </html>
Additionaly
Remove float for the img element itself and set display: block;
.scroller_item {
float: left;
height: 238px;
width: 192px;
}
.scroller_item .image {
display: block;
height: 238px;
width: 192px;
}
solution3
1 2011-04-14 20:16:10
I suggest using a reset to put all the styles back to zero in all browsers. Using that should fix your problem. Eric Meyer's Reset
solution4
0 2011-04-14 20:14:29
Try adding:
*
{
padding: 0px;
margin: 0px;
border: none;
}
#sliding_section
{
overflow: auto;
}
You'll have to tweak the * properties, as this will be bad for a production site, but it might work.
solution5
0 2011-04-14 20:30:01
尝试在CSS类的“ .scroller_item .image”定义中删除“ float：left”。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.