Paging navigation displays incorrectly in IE7

HTML & CSS
1

The paging navigation demo that I have set up here looks fine in Safari, IE8, Opera, Firefox but is wrong in IE7. I have tried to debug the CSS, but it seems that IE7 only wants to display this page incorrectly. Any would be appreciated.

here is the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Jquery Cycle Plugin with Paging</title>
		<link rel="stylesheet" type="text/css" href="sample_cycle_a.css">
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
		<script src="sample_cycle_a.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="bodywrapper">
			
			<h2 id="sample">Jquery Cycle Plugin with Paging</h2>
				<div id="promomain">
					<div class="promogallery">
						<img src="117427934569752sm.jpg" width="580" height="350" alt="Center_1"/>
						<img src="117428128343967sm.jpg" width="580" height="350" alt="Center_2"/>
						<img src="117428291462196sm.jpg" width="580" height="350" alt="Center_3"/>
						<img src="117428380391871sm.jpg" width="580" height="350" alt="Center_4"/>
					</div>
				</div>
			
		</div>
		<div id="push"></div>
		<div id="footer"><!-- begin footer section -->
			<div id="ftrcontent">
			<p>&copy; Copyright 2005-2009.  All Rights Reserved.</p>
				<div id="ftrnav">
				<ul id="ftrlinks">
					<li><a href="#">Sample Test</a></li>
					<li><a href="#">Sample</a></li>
					<li><a href="#">Sample</a></li>
					<li><a href="#">Sample</a></li>
					<li><a href="#">Sample</a></li>
				</ul>
			</div>
			</div>
		</div><!-- End footer section -->
	</body>
</html>



/* ---------- ---------- ---------- reset ---------- ---------- ---------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
 /* TINY MCE RESET */
body.mceContentBody {
text-align: left;
color: #000;
background: #ffffff url();
}
body, html {
background: transparent url('bkgrnd2.png') repeat-x scroll 0 0;
height: 100%;
}
* html #bodywrapper {
height: 100%;
}
#bodywrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -133px;
width: 960px;
}
#sample {
position: relative;
top: 180px;
left: 180px;
padding-bottom: 10px;
color: #8f8f8f;
font: Arial, Helvetica, sans-serif;
width: 400px;
}
 /* this styles the background for the picture container */
#promomain {
background: transparent url('headshadow.png') no-repeat scroll center top;
height: 366px;
left: 180px;
padding-top: 1px;
position: relative;
width: 596px;
z-index: 5;
margin-top: 200px;
}
 /* #promogallery { margin-left:8px; margin-top:7px; position:relative; visibility:hidden; */
.promogallery {
height: 350px;
width: 580px;
margin: auto
}
.promogallery img {
margin-top: 7px;
margin-right: 1px;
border: none;
position: relative;
}
.promogallery a {
background: transparent;
text-decoration: none;
color: #a60000;
font: normal 11px / 1.2em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
#push {
height: 133px;
}
#footer {
background: transparent url('footer2.png') repeat scroll 0 100%;
height: 133px;
width: 100%;
}
#ftrcontent {
background: transparent;
font: normal 11px / 1.2em Arial, Helvetica, sans-serif;
}
#ftrnav {
background: transparent none repeat scroll 0 0;
border: medium none;
color: #f9f9f9;
line-height: 1.22em;
right: 145px;
margin-top: -31px;
padding: 15px;
position: absolute;
}
#ftrnav li {
display: inline;
padding: 5px 3px;
}
#ftrnav a {
color: #f9f9f9;
text-decoration: none;
border-right: 1px dotted #f9f9f9;
margin: 0;
padding-right: 5px;
}
#footer p {
text-align: justify;
padding: 60px 0 0 160px;
color: #f9f9f9;
}
 /* promonav styling */
#promonav {
margin: 5px 0;
text-align: left;
position: absolute;
top: 25px;
right: 50px;
z-index: 10;
}
#promonav a, #promonavcyle strong {
margin: 0 2px;
padding: 3px 5px;
border: 1px solid #ccc;
background: transparent;
text-decoration: none;
color: #fafafa;
font: normal 11px / 1.2em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
#promonav a.activeSlide {
background: #ddd;
color: #a60000;
}
#promonav a:focus {
outline: none;
}
#output {
text-align: right;
}
2

hmmm, I would have set the a tag to display:block and used gif sprite sheets as a background image with a set height / width using overflow: hidden to keep ie6 from suffering when padding is added.

I think the ie’s have issues with rendering inline stuff like text with padding and borders.

Someone else might have a hack or fix but I usually just use that method as it works pretty well.

Hope that helps!

3

Hi,

You can fix it by adding position:relative here:


#promonav a, #promonavcyle strong { 
margin: 0 2px; 
padding: 3px 5px; 
border: 1px solid #ccc; 
background: transparent; 
text-decoration: none; 
color: #fafafa;
font: normal 11px/1.2em    "Lucida Grande","Lucida sans", Arial, Helvetica, sans-serif;
[B]position:relative;
}[/B]

IE very often won’t show padding or borders on inline elements unless position:relative is added.

Your sticky footer is broken because the push element is in the wrong place (and you are using an old method anyway which breaks in IE7,8 and opera.)

The push should be inside the bodywrapper otherwise it’s of no use.


        <div class="promogallery"> <img src="http://capnhud.host22.com/examples/117427934569752sm.jpg" width="580" height="350" alt="Center_1"> <img src="http://capnhud.host22.com/examples/117428128343967sm.jpg" width="580" height="350" alt="Center_2"> <img src="http://capnhud.host22.com/examples/117428291462196sm.jpg" width="580" height="350" alt="Center_3"> <img src="http://capnhud.host22.com/examples/117428380391871sm.jpg" width="580" height="350" alt="Center_4"> </div>
    </div>
[B] <div id="push"></div>[/B]
</div>
<div id="footer">
    <!-- begin footer section -->
    <div id="ftrcontent">

For the ultimate sticky footer solution look here. :slight_smile:

4

IE very often won’t show padding or borders on inline elements unless position:relative is added

This little bit of css has been wrecking my brain for hours. Thank you for pointing out my error. And I will definitely will implement the sticky footer you suggested.