|
|
Posted by John Dalberg on 10/18/06 16:41
Ben C <spamspam@spam.eggs> wrote:
> 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]
>
Thanks for your reply.
> 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.
It's not an absolute rule that if something works in IE but not in FF that
this IE is buggy. FF is not a perfect browser either. Do you what the buy
is exactly in my code.
>
> 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!
What I want is this.
image | image | rest of width filled with background color.
I tried your style but it didn't work. There's a gap between the images. I
had this problem when I was working on my style. I don't know why there's a
gap if the second image has float: left which means it should be tangent to
the first image to its right.
Your clear: both means it will put that div below the images which is not
the desired effect. Plus I am sure an empty div does anything. However the
content has a clear: both (not shown in my code) so that the content
renders below the header. My problem was that there's gap between the
header and the content which I don't know why it's happening in IE.
John Dalberg
Navigation:
[Reply to this message]
|