How to style images in a list with CSS - html

I'm trying to make all the images I have in a list the same size and remove the bullet that gets placed beside them.
This is the HTML I'm using:
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

I set the hardcoded values as squares because I don't know what your actual images look like.
ul {
list-style: none;
}
ul img {
width: 100px;
height: 100px;
}
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

I use of !important for override on each other style.
#imageList {
list-style: none !important;;
}
#imageList img {
width: 50px !important;;
height: 50px !important;;
}
<ul id = "imageList">
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Dunkirk"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Big Sick"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Lovers"> </li>
</ul>

Related

List wont appear Inline when CSS Rule is added

Here is my HTML:
<div class="info">
<ul class="items">
<li>
<img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
<p>Facebook Premier Level Agency Partner</p>
</li>
<li>
<img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
<p>Google Endorced Marketing Partner</p>
</li>
<li>
<img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
<p>Forbes Agency Council Member</p>
</li>
<li>
<img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
<p>Inc. 5000 Fastest Growing Company</p>
</li>
<li>
<h1>$100M</h1>
<p>In Annual Digital Ad Spend</p>
</li>
<li>
<h1>15+</h1>
<p>Years of Facebook Avertising Experience</p>
</li>
</ul>
</div>
My CSS:
.info {
margin-top: 70px;
display: flex;
flex-direction: row;
align-items: center;
}
.items li {
list-style: none;
display: inline;
}
Here is also a JSFiddle:
https://jsfiddle.net/5xy7zqm6/2/
Basically, I use the same code on my Navbar menu and it works, but here it just wont budge.
you should add display: flex to the ul
<div class="info">
<ul class="items" style="
display: inline-flex;
">
<li>
<img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
<p>Facebook Premier Level Agency Partner</p>
</li>
<li>
<img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
<p>Google Endorced Marketing Partner</p>
</li>
<li>
<img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
<p>Forbes Agency Council Member</p>
</li>
<li>
<img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
<p>Inc. 5000 Fastest Growing Company</p>
</li>
<li>
<h1>$100M</h1>
<p>In Annual Digital Ad Spend</p>
</li>
<li>
<h1>15+</h1>
<p>Years of Facebook Avertising Experience</p>
</li>
</ul>
</div>

Making image gallery only populate l and right instead of up and down

I have follow image gallery that I am trying to turn into a slider with CSS.
As you can see it is populating the images up and down inside its outer container. I want to force it to be a certain height and then scroll. I thought by making the container display:flexbox; overflow-x:scroll; height:100px; width:500px that would solve that issue. However here is what it looks like if I do that:
The problem is that no matter what I do it wont scroll or overflow. It will adjust the pictures in height and width to fit inside the container. What am missing?
The code for the container and its contents:
<ol class="flex-control-nav flex-control-thumbs">
<li><img src="filepath.jpg" class="flex-active" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
</ol>
Here is a working snippet:
body {
overflow: none;
}
.container {
display: flex;
width: 500px;
height: 120px;
overflow: auto;
}
.container li {
list-style-type: none;
}
.container li img {
width: 100px;
margin-left: 40px;
}
<div class="container">
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
<li>
<img src="https://via.placeholder.com/400" />
</li>
</div>

How to show many div side by side in css family tree?

I want to show only one person from each branch in same degree in family tree. Css knowledge is not very good. Although I use float:left or display: inline-block the tree appears downwards. Where is my mistake?
Fiddle Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Times New Roman', Arial;
font: 10px;
}
#container {
margin: 0 auto;
width: 100%;
}
.tree {
width: 100%;
padding-top: 20px;
position: relative;
float: left;
display: inline-block;
overflow: hidden;
}
.tree img {
display: block;
margin: 0 auto;
margin-bottom: 1rem;
width: 80px;
}
.tree ul {
padding-top: 20px;
position: relative;
display: inline-block;
float: left;
margin: 0;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin: 0;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree ul div {
border: 1px solid #ccc;
padding: 5px;
text-decoration: none;
width: min-content;
color: #666;
font-size: 11px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s;
}
#media all and (max-width: 1475px) {
.tree {
width: 100%;
padding-top: 20px;
position: absolute;
float: left;
}
}
<div id="container">
<ul class="tree">
<li>
<div>OFFICES</div>
<ul>
<li>
<ul class="tree">
<li>
<div>Center</div>
<ul>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
<br>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
try display: flex/inline-flex;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Times New Roman', Arial;
font: 10px;
}
#container {
margin: 0 auto;
width: 100%;
}
.container .tree {
width: 100%;
padding-top: 20px;
position: relative;
}
.container .tree > li {
text-align: center;
width: 100%;
}
.tree img {
display: block;
margin: 0 auto;
margin-bottom: 1rem;
width: 80px;
}
.tree ul {
padding-top: 20px;
position: relative;
display: inline-flex;
margin: 0;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin: 0;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree ul div {
border: 1px solid #ccc;
padding: 5px;
text-decoration: none;
width: min-content;
color: #666;
font-size: 11px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s;
}
#media all and (max-width: 1475px) {
.tree {
width: 100%;
padding-top: 20px;
position: absolute;
float: left;
}
}
<div id="container">
<ul class="tree">
<li>
<div>OFFICES</div>
<ul>
<li>
<ul class="tree">
<li>
<div>Center</div>
<ul>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
<br>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

My <ul> only displaying a bullet point for the first list item, not the rest

I'm having an issue with my <ul> not displaying bullet points after the first list item.
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
<p>Human Resources </p>
<p>Other </p>
</li>
</ul>
</div>
No idea what I'm doing wrong, could someone please advise?
ul li {
padding: 5px;
}
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
IT Services
</li>
<li>
Human Resources
</li>
<li>
Other
</li>
</ul>
</div>
You have put only one <li>.
I have removed p tag, instead of having p you can give css to ul and li based on your needs.
Hope this helps.
Do you want this?
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
</li>
<li>
<p>Human Resources </p>
</li>
<li>
<p>Other </p>
</li>
</ul>
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
</li>
<li>
<p>Human Resources </p>
</li>
<li>
<p>Other </p>
</li>
</ul>
</div>
This should work
ul li {
padding: 5px;
}
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
IT Services
</li>
<li>
Human Resources
</li>
<li>
Other
</li>
</ul>
</div>

Strange border line in IE8 that I didn't add

Same HTML, CSS, and image file, but in IE8 I have this weird border line.
HTML:
<div id="admin_link_div">
<ul id="vertical_menu">
<li>
<a href="/admin/appointment_list">
<div id="sidebar_left_box">
Room List
</div><img id="admin_arrow_img_roomlist" src="/images/arrow_off_icon.gif"></a>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
User Management
</div><img id="admin_arrow_img_userlist" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
User List
</li>
<li>
User Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Company Mangement
</div><img id="admin_arrow_img_register" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Company List
</li>
<li>
Company Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Service Management
</div><img id="admin_arrow_img_service" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Server Management
</li>
<li>
Barbie Management
</li>
</ul>
</li>
</ul>
</div>
CSS:
#admin_arrow_img_userlist{
margin-left: 10px;
margin-bottom: 2px;
}
Any good reason???
add this to your image #
outline:none;
border: none;
because IE sets a border for images by default!!
Try this CSS on image
img
{
border:0;
outline:none;
}
Use border 0 Check link more appropriate.