Forum Moderators: not2easy
I have put together a demo to illustrate my problem:
if you view this page in IE6 you will see: <edited>
and in opera you will get: <edited>
The effect that I actually want to acheive is the IE6 version where the heading occupies 100% of the available width (which is less if there is an image).
Two questions then: Which of the browsers in rendering the content correctly and What do I have to do to please both of them?
All code is below, hope you can help.
Thanks
Phil
CSS
#container {
width: 750px;
border: 1px gray solid;
margin: 10px;
padding: 10px;
}
.contentHead {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
background-color: #A1B7C5;
width: 100%;
padding: 2px;
border: 1px dashed #999999;
}
#testimage {
float: right;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mousesoft: ¦ CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id='container'>
<img src='../picture/mousesoft.jpg' id='testimage'>
<div class='contentHead'>This is a test heading</div>
</div>
</body>
</html>
[edited by: tedster at 6:04 am (utc) on May 6, 2005]
If the effect you're trying to achieve is that of the IE version, where the heading's right edge stops at the image, then you can do one of two things:
1. Set the #contentHead to float:left as well, forcing it to respect the #testimage div.
2. Eliminate the two divs altogther and float the image inline. e.g:
Change:
<div id='container'>
<img src='../picture/mousesoft.jpg' id='testimage'>
<div class='contentHead'>This is a test heading</div>
To:
<div id='container'>
<p class='contentHead'>This is a test heading</p>
<img src='../picture/mousesoft.jpg' id='testimage'>
You could, of course use an <h1> tag instead of <p>, which would be logical.
One other thing is that the single quotes in your html source should be double quotes. Otherwise you'll choke some browsers.
HTH
Phil
