Hi I have a problem with these buttons, they are a UL List basically, they render fine in Chrome, and Firefox, but on IE the right buttons go about -5 pixels more Top than where they should be.
<ul id="buttonList">
<li id="analysis">
<img src="images/anaylsis.png" width="210" height="34" alt="analysis" />
</li>
<li id="calories">
<img src="images/calories.png" width="211" height="34" alt="calories" />
</li>
<li id="ingredients">
<img src="images/ingredients.png" width="210" height="35" alt="ingredients" />
</li>
<li id="feeding">
<img src="images/feeding.png" width="211" height="36" alt="feeding" />
</li>
</ul>
This is the CSS. The commented lines are what I tried before, they still don't work.
#buttonList
{
padding: 0px;
}
#analysis
{
position: relative;
padding: 0px;
margin: 0px;
}
#calories
{
position: relative;
padding: 0px;
margin: 0px;
}
#ingredients
{
/*position: relative;
left: 220px;
top: -77px;
*/
margin-left: 220px;
margin-top: -77px;
}
#feeding
{
/*
position: relative;
left: 220px;
top: -77px;
*/
margin-left: 220px;
margin-top: -0px;
}
I have this code set on top
*
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
font-family: Helvetica, Arial, sans-serif;
}
Why do the images have different height
/ width
attributes?
Surely you want images that are all the same dimensions to align them properly?
I changed all the img
height
attributes to 36
(and the width
s to 210
), and used float: left
and margin-right
to align the images:
Testded in IE6 / IE7, Chrome, FF
- DEMO: http://jsbin.com/obupe4
#buttonList
{
width: 430px;
list-style:none;
margin:0;
padding: 5px
}
#buttonList li {
margin: 5px 5px 0 0;
display:inline;
width: 211px;
height: 36px
}
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.