PDA

View Full Version : Image ok in FF but not in IE, CSS positioning


jasonc310771
Dec 8th, 2008, 04:40 PM
the 'logo' image is correctly placed in Firefox but in IE it is on the other side of the page.

can anyone please suggest a fix to my code to get the image to show up in the same place IE and FF?






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table class="mytable">
<tr>
<td class="header">
<div class="headertitle"><div class="headerlogo"></div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<table align="center" width="760">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


css


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
color: #0066CC;
text-align: center;
}

.mytable {
margin: 0 auto;
width:1000px;
border-collapse: collapse;
border-width: 0px;
}

.header {
width: 900px;
height: 180px;
background: url(images/img02.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #F49500;
}

.headertitle {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 36px;
text-align: right;
margin: 0 140px;
white-space: nowrap;
}

.text_align_centre {
margin-bottom: 5px;
margin-right: 5px;
text-align: centre;
}

.footer {
float: right;
}

.headerlogo {
background: url(images/logo.png);
background-repeat: no-repeat;
background-position: center center;
width: 145px;
height: 100px;
}
Excavator
Dec 8th, 2008, 05:17 PM
Hello jasonc310771,
The image is going to the right because you have text-align:right; on .headertitle ...I'm not sure why it's not happening in FF but there are better ways to do this.

First, I'm not sure what your building the site for but you don't need tables to do any of this.
Second, I'm assuming logo.png is 145px x 100px because that's the size of the div you made for it. You don't need a div around your image. Easy to get divitis... just put the image in with a line like <img src="images/logo.jpg" width="145" height="100" alt="logo" />

Something like this might be a good start. You could add a class to the image and position it where you need -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color: #FFF;
text-align: center;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
}
#header {
width:900px;
height: 180px;
margin: 0 auto;
font-size: 36px;
text-align: right;
background: #f49500 url(images/img02.jpg) no-repeat center center;
}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png" width="145" height="100" alt="logo" />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>