Forum Moderators: not2easy
I'm getting some funny padding (I think) issues with IE. The list items appear fine in FF and Safari.
I am trying to produce a tabbed jquery box. Two list items (with curved images as backgrounds - a left curve on the 'li' and a right curve on the 'a') will control the content that is displayed.
In IE it seems to add extra top and bottom padding to the 'li' but not to the 'a'. I've changed the background images to be borders as you won't be able to access the images and the same issue is happening with them too so it can serve as a good example.
Here is the html/css:
<html>
<head>
<style>
#box{
width:400px;
border:1px solid #ccc;
margin:4px 0 0 0;
padding:0}
ul.ul-list{
list-style:none;
margin:0;
padding:0
}
ul.ul-list li{
display:inline;
margin:0;
padding:5px 0 4px 10px;
border:1px solid red;
}
ul.ul-list a{
padding:5px 15px 4px 6px;
border:1px solid green;
}
p{padding:10px;}
</style>
</head>
<body>
<ul class="ul-list">
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
</ul>
<div id="box">
<p>Paragraph one...</p>
<p>Paragraph two...</p>
</div>
</body>
</html>
Does anyone have any ideas? Thanks...
inline lists don't have the same formatting freedoms because of the x-browser handling of padding on inline items.. so make them block level items, you do this by using floats to get the side by side look and using the <a> only to generate the "internal" padding
quick CSS example:
#box{
width:400px;
border:1px solid #ccc;
margin: 0px 0 0 0;
padding:0;
clear: both; /* or clear: left; */
}ul.ul-list{
list-style:none;
margin:0;
padding:0;
float: left;
width: 100%;
}ul.ul-list li{
float: left;
/*padding:5px 0 4px 10px;*/
padding: 0 0 0 10px;
margin: 0;
border: 1px solid red;
}ul.ul-list a{
padding: 5px 15px 4px 6px;
border:1px solid green;
display: block;
}p{padding:10px;}
entire <ul> is floated left at 100% width to contain the child <li> floats
the <li> elements are floated left with no width so they "shrink to fit", but put the left padding on here to show your left curve image
the <a> elements then are made into a block so their top/right/bottom padding dictates the final size of the whole tab
then finally the "box" div will need to be given clearance to sit below the tabs, this will either be both or left depending on your requirements for elements following after the box
hth
