?
Solved

CSS IE cutting off top and bottom borders.

Posted on 2009-02-09
7
Medium Priority
?
438 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

0
Comment
Question by:allanch08
  • 4
  • 3
7 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 23595893
Which versions of IE are you asking about?

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

Open in new window

0
 

Author Comment

by:allanch08
ID: 23597936
hello, it's ie7. I tried 'display: inline-block;' but Dreamweaver was saying this isn't supported by certain browsers.
0
 
LVL 43

Expert Comment

by:David S.
ID: 23597947
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:allanch08
ID: 23598023
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
 

Author Comment

by:allanch08
ID: 23601512
hi, tried that but links are all expanded and spilling out of the div container.
0
 

Accepted Solution

by:
allanch08 earned 0 total points
ID: 23601771
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
 
LVL 43

Assisted Solution

by:David S.
David S. earned 200 total points
ID: 23604632
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month13 days, 20 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question