...

View Full Version : Image is skewed in IE



borosarchangel
05-15-2011, 06:48 PM
The following produces the exact results I am looking for in Chrome and Firefox, but the image in IE is pushed up ~2px:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Home</title>
<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">

<div id="header">
<img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png" class="center" ALT="Image Missing">
</div>

<div id="nav">
<ul>
<li><h4 class="center"><a href="index.html" class="nav">Home</a></h4></li>
<li><h4 class="center"><a href="info.html" class="nav">Info</a></h4></li>
<li><h4 class="center"><a href="staff.html" class="nav">Staff</a></h4></li>
<li><h4 class="center"><a href="contact.html" class="nav">Contact</a></h4></li>
<li><h4 class="center"><a href="about.html" class="navend">About</a></h4></li>
</ul>
</div>

<div id="contentheader">
<h1 class="center">Home</h1>
</div>

<div id="content">
<div id="leftcolumn">
<p>Left side</p>
</div>
<div id="rightcolumn">
<p>Right side</p>
</div>
</div>

<div id="footer">
<p class="footer">Footer</p>
<img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/validator.png" class="botright" ALT="Valid HTML 4.01 Strict/CSS">
</div>

</div>

</body>

</html>

#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

#header
{
width: 900px;
height: 145px;
border: 1px solid orange;
background-color: orange;
}

#nav
{
line-height: 50px;
width: 902px;
height: 50px;
background-color: blue;
}

#contentheader
{
text-align: center;
width: 900px;
line-height: 50px;
padding-top: 10px;
border-left: 1px solid black;
border-right: 1px solid black;
text-transform: capitalize;
}

#content
{
width: 900px;
height: 90%;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
padding-bottom: 25px;
float: left;
}

#leftcolumn
{
width: 43%;
float: left;
margin: 7px 0px 0% 3%;
background-color: white;
padding: 15px 7px 15px 7px;
/*border: 1px solid black;*/
}

#rightcolumn
{
width: 43%;
float: right;
margin: 7px 3% 0% 0px;
background-color: white;
padding: 15px 7px 15px 7px;
/*border: 1px solid black;*/
}

#footer
{
height: 62px;
width: 902px;
line-height: 56px;
background-color: orange;
color: black;
clear: both;
margin: auto;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li
{
margin: auto;
float: left;
}

a.nav
{
display: block;
width: 178px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
margin-top: -10px;
}

a.navend
{
display: block;
width: 179px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
margin-top: -10px;
}

a:hover,a:active
{
background-color: black;
}

img.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}

img.botright
{
display: block;
margin-left: 813px;
margin-right: 0px;
margin-top: -72px;
width: 88px;
height: 62px;
}

p
{
display: block;
margin-top: -5px;
margin-left: -1px;
}

p.footer
{
text-align: center;
}

h1.center
{
display: block;
margin: auto;
}

h4.center
{
margin-top: 10px;
}

Is there a better method of inserting an image in the footer and position it to the bottom right (or center right, since it fills the height of the footer)?

Thanks!

EDIT: I have tried using a conditional for IE, but nothing I have come up with works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum