|
|
Posted by Ben C on 10/18/06 07:19
On 2006-10-18, John Dalberg <nospam@nospam.sss> wrote:
> I am creating a header which consists of two adjacent images and filling
> the rest of the header width with a solid color so that different
> resolutions have the same header. The effect works fine in IE (my users use
> IE only) but there's a gap between the header and the rest of the page
> which I can't get rid off. (The effect is also broken in Firefox but that's
> not important)
>
> How can I remove the gap (and make it work in FF also if possible )?
[source snipped]
If what you have here works in IE, you're relying on IE bugs. This is
not a good starting point especially when you then need to ask how do I
get rid of this or that gap.
The description of what you want to achieve is quite straightforward
though, and can be done with floats, as you are aiming to do.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#A
{
background-color: #5d7fa4;
float: left;
}
#B
{
float: left;
}
#C
{
float: right;
}
</style>
</head>
<body>
<div id="A">
<img src="left.png" id="B">
<img src="right.png" id="C">
<div style="clear: both"></div>
</div>
Content here
</body>
</html>
If it does what you want (I may have not understood right), and if it
works in IE, maybe it will be a better starting point!
Navigation:
[Reply to this message]
|