CSS IE cutting off top and bottom borders.

Hello Experts.

I'm trying to format some pagination links. It works in Firefox and Chrome but IE is shaving the top and bottom borders. I've fiddled about about with the CSS. Can anyone tell me what the problem is? thanks
// CSS
 
.container {
	background-color: #FFFFFF;
	margin: 0 auto; /* Set left and right margins to auto so that #container is centered. */
	padding: 0;
	width: 780px;
	border: 5px solid #EEEEEE;
}
.pagination {
	border: 1px solid #999999;
	width: 700px;
	margin: 10em auto;
	height: 200px;
}
.pagination_left {
	float: left;
	width: 150px;
	padding: 0;
	margin: 5em 0;
}
.pagination_center {
	float: left;
	width: 400px;
	padding: 0;
	margin: 5em 0;
	text-align: center;
}
.pagination_right {
	float: left;
	width: 150px;
	padding: 0;
	margin: 5em 0;
	text-align: right;
}
a.pagination:link {
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
	margin: 2px;
	padding: 3px 5px;
	border: 1px solid #999999;
	background-color: #EEEEEE;
}
a.pagination:visited {
	color: #999999;
}
a.pagination:hover {
	color: #FFFFFF;
	text-decoration: none;
	border: 1px solid #FF9966;
	background-color: #FF9966;
}
 
//HTML
<body>
<div class="container">
	<div class="pagination">
		
		<div class="pagination_left">
			<a class="pagination" href="#">First</a>
			<a class="pagination" href="#">Previous</a>
		</div>
		
		<div class="pagination_center">
			<a class="pagination" href="#">1</a>
			<a class="pagination" href="#">2</a>
			<a class="pagination" href="#">3</a>
			<a class="pagination" href="#">4</a>
			<a class="pagination" href="#">5</a>
			<a class="pagination" href="#">6</a>
			<a class="pagination" href="#">7</a>
			<a class="pagination" href="#">8</a>
			<a class="pagination" href="#">9</a>
			<a class="pagination" href="#">10</a>			
		</div>
		
		<div class="pagination_right">
			<a class="pagination" href="#">Next</a>
			<a class="pagination" href="#">Last</a>		
		</div>
 
	</div>
	<br class="clearfloat" />
 
</div>
</body>

Open in new window

allanch08Asked:
Who is Participating?
 
allanch08Author Commented:
Hi, I've found out that setting the line-height: 30px; on the a:pagination has fixed the problem, works in IE7, Firefox, Chrome.
0
 
David S.Commented:
Which versions of IE are you asking about?

Try adding this rule:
* html a.pagination {
  display: inline-block;
}

Open in new window

0
 
allanch08Author Commented:
hello, it's ie7. I tried 'display: inline-block;' but Dreamweaver was saying this isn't supported by certain browsers.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
David S.Commented:
Oh. I posted the one for IE6. The one for IE7 is below.

Yeah, Firefox 2 doesn't support it and IE5-7/Win's support for it is only partial. Firefox 3 and IE8 support it though, but in this case we just care about IE7.
*:first-child+html a.pagination {
  display: inline-block;
}

Open in new window

0
 
allanch08Author Commented:
Thanks, will try this when I get home. Do you know why IE does this? Also when you say 'Firefox 2 doesn't support it and IE5-7/Win's support for it is only partial' will it display correctly in these browsers?
0
 
allanch08Author Commented:
hi, tried that but links are all expanded and spilling out of the div container.
0
 
David S.Commented:
Congratulations on finding a solution.

>> Do you know why IE does this?

IE is buggy. I'm not aware of a particular reason for this issue.

>> will it display correctly in these browsers?

The "*:first-child+html" at the beginning of the complex selector is a CSS filter that is only applied in IE7. Other browsers will safely ignore it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.