We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

CSS IE cutting off top and bottom borders.

allanch08
allanch08 asked
on
Medium Priority
448 Views
Last Modified: 2012-06-21
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

Comment
Watch Question

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Which versions of IE are you asking about?

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

Open in new window

Author

Commented:
hello, it's ie7. I tried 'display: inline-block;' but Dreamweaver was saying this isn't supported by certain browsers.
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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

Author

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?

Author

Commented:
hi, tried that but links are all expanded and spilling out of the div container.
Hi, I've found out that setting the line-height: 30px; on the a:pagination has fixed the problem, works in IE7, Firefox, Chrome.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
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.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.