Problems with Opera and positioning

**Neal** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

"Ian Watts" <iwatts@ntlworl d.com> wrote in message
news:GFgJb.148$ CG5.86@newsfep1-gui.server.ntli .net...[color=blue]
> Hi
>
> I am developing a website for a friend, currently at
>
> http://homepage.ntlworld.com/iwatts/testsite/
>
> and it is pretty much doing what I want in Mozilla 1.5, Mozilla Firebird
> 0.7 and IE 6, but when I try it in Opera, I get a large expanse of space
> above the horizontal links under the header.
>
> I have used CSS for positioning throughout (the style sheet is at
> http://homepage.ntlworld.com/iwatts/testsite/test.css )
>
> I have tweaked the CSS to no avail and can't work this out at all - if
> anyone has any ideas, help would be much appreciated.
>
> Thanks
>
>
> Ian Watts
>[/color]

The heights in the CSS were the problem. Works so much better when you do it
in the img tag.

#wrapper {
width:100%;
text-align: center;
background-color: #333366;
}

#left_head {
float: left;
}

#right_head {
float: right;
}

.. . .

<html xmlns="http://www.w3.org/TR/xhtml1" />

.. . .

<div id="wrapper">

<div id="left_head" > <img src="left.gif" alt="Church Revival Network"
height="180" width="200" /> </div>

<div id="right_head" > <img src="right.jpg" alt="[Image of fire]"
height="180" width="200" /> </div>

</div>

And you've repeated the id "right" - looks like a copy-paste error.

**Neal** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

"Neal" <neal@spamrcn.c om> wrote in message
news:3ff5ee46$0 $6761$61fed72c@ news.rcn.com...[color=blue]
> <html xmlns="http://www.w3.org/TR/xhtml1" />[/color]

Ignore that, it was the man across the hall, I tell you...

**Neal** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

"Neal" <neal@spamrcn.c om> wrote in message
news:3ff5ee46$0 $6761$61fed72c@ news.rcn.com...[color=blue]
> <html xmlns="http://www.w3.org/TR/xhtml1" />[/color]

Ah, I know what irked me about this.

<html xmlns="http://www.w3.org/1999/xhtml">

**Ian Watts** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

Neal wrote:
[color=blue]
> The heights in the CSS were the problem. Works so much better when you do it
> in the img tag.[/color]

It works fine now on Opera (and in IE6) but not now in Mozilla 1.5 or
Firebird 0.7.[color=blue]
>
> #wrapper {
> width:100%;
> text-align: center;
> background-color: #333366;
> }[/color]

I figured that I needed to set the wrapper height as I wanted the block
of colour in the middle to match the height of the images. What I wanted
was to create the illusion of a banner across the width of the screen,
no matter what that was, so that the 'banner' would shrink no matter
what the screen width was. I also wanted to achieve this by using
relative positioning, and no tables.[color=blue]
>
> #left_head {
> float: left;
> }
>
> #right_head {
> float: right;
> }
>
> . . .
>
> <html xmlns="http://www.w3.org/TR/xhtml1" />
>
> . . .
>
> <div id="wrapper">
>
> <div id="left_head" > <img src="left.gif" alt="Church Revival Network"
> height="180" width="200" /> </div>
>
> <div id="right_head" > <img src="right.jpg" alt="[Image of fire]"
> height="180" width="200" /> </div>
>
> </div>
>
> And you've repeated the id "right" - looks like a copy-paste error.[/color]

No error - I was just showing the person I was devloping the sight for
that there could be a number of boxes down the right - just being lazy
and not changing content.[color=blue]
>
>[/color]

thanks - you have given me something to play with anyway - I will play
more tomorrow (too much red wine now). I may get back to you when I have
looked at this more.

Thanks again

Ian

**Ian Watts** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

Neal wrote:
[color=blue]
> The heights in the CSS were the problem. Works so much better when you do it
> in the img tag.[/color]

It works fine now on Opera (and in IE6) but not now in Mozilla 1.5 or
Firebird 0.7.[color=blue]
>
> #wrapper {
> width:100%;
> text-align: center;
> background-color: #333366;
> }[/color]

I figured that I needed to set the wrapper height as I wanted the block
of colour in the middle to match the height of the images. What I wanted
was to create the illusion of a banner across the width of the screen,
no matter what that was, so that the 'banner' would shrink no matter
what the screen width was. I also wanted to achieve this by using
relative positioning, and no tables.[color=blue]
>
> #left_head {
> float: left;
> }
>
> #right_head {
> float: right;
> }
>
> . . .
>
> <html xmlns="http://www.w3.org/TR/xhtml1" />
>
> . . .
>
> <div id="wrapper">
>
> <div id="left_head" > <img src="left.gif" alt="Church Revival Network"
> height="180" width="200" /> </div>
>
> <div id="right_head" > <img src="right.jpg" alt="[Image of fire]"
> height="180" width="200" /> </div>
>
> </div>
>
> And you've repeated the id "right" - looks like a copy-paste error.[/color]

No error - I was just showing the person I was devloping the sight for
that there could be a number of boxes down the right - just being lazy
and not changing content.[color=blue]
>
>[/color]

thanks - you have given me something to play with anyway - I will play
more tomorrow (too much red wine now). I may get back to you when I have
looked at this more.

Thanks again

Ian

**Neal** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

"Ian Watts" <iwatts@ntlworl d.com> wrote in message
news:oanJb.451$ lR1.1944319@new sfep1-win.server.ntli .net...[color=blue]
> Neal wrote:[color=green]
> > And you've repeated the id "right" - looks like a copy-paste error.[/color]
>
> No error - I was just showing the person I was devloping the sight for
> that there could be a number of boxes down the right - just being lazy
> and not changing content.[/color]

Yes error - you cannot have two elements on the same page with identical
id's. Change it to a class, you're set.

**Ian Watts** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

Neal wrote:

[color=blue]
> Yes error - you cannot have two elements on the same page with identical
> id's. Change it to a class, you're set.[/color]

Yes, your right - sorry about that. I'd not noticed that (even more so
as it seems to work, though I guess that's not the point). The more I
get into CSS, the more complex it seems. Things work right, but aren't
correct, or seem correct, but don't always work.

I am still struggling to get this to work in Opera, IE6 and Mozilla 1.5
and Firebird. If I do as you suggest and put the heights into the image
tag, it seems to stretch the wrapper to the same height, in |IE6 and in
Opera, but not in mozilla, 1.5 or firebird 0.7 - in mozilla the
horizontal links seem to shoot up inbetween the two images - as below

http://homepage.ntlworld.com/iwatts/testsite2/

http://homepage.ntlworld.com/iwatts/testsite2/test.css

to compare to the original (which works with mozilla and IE6, but not Opera)

http://homepage.ntlworld.com/iwatts/testsite/

http://homepage.ntlworld.com/iwatts/testsite/test.css

I can see me spending the rest of the day trying to solve this - I'll
let you know if I do.

Thanks

Ian

**Ian Watts** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

Neal wrote:
[color=blue]
> The heights in the CSS were the problem. Works so much better when you do it
> in the img tag.
>
> #wrapper {
> width:100%;
> text-align: center;
> background-color: #333366;
> }
>
> #left_head {
> float: left;
> }
>
> #right_head {
> float: right;
> }
>[/color]
Hi Neal

thanks for all your help - a friend of mine has cracked getting it to
work with all three browsers, by adding

body > :first-child#wrapper {
height:180px
}

Only Mozilla recognises the :first-child pseudo-class, and so all three
work fine now.

Again, thanks for all your help

Ian

**Rijk van Geijtenbeek** · Jul 20 '05, 09:08 PM

Re: Problems with Opera and positioning

On Sat, 03 Jan 2004 15:10:12 +0000, Ian Watts <iwatts@ntlworl d.com> wrote:

...
[color=blue]
> thanks for all your help - a friend of mine has cracked getting it to
> work with all three browsers, by adding
>
> body > :first-child#wrapper {
> height:180px
> }
>
> Only Mozilla recognises the :first-child pseudo-class, and so all three
> work fine now.[/color]

Opera 7 also understands :first-child. The current version at
<URL:http://homepage.ntlwor ld.com/iwatts/testsite/> looks almost the same
in my copy of Opera 7 (7.5 test version) as in MSIE and Firebird .7. It
seems you forgot the background color for the page itself, and the Valid
XHTML 1.1 button is partially hidden by a quote box in Firebird and MSIE.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

**Ian Watts** · Jul 20 '05, 09:09 PM

Re: Problems with Opera and positioning

Rijk van Geijtenbeek wrote:[color=blue]
> On Sat, 03 Jan 2004 15:10:12 +0000, Ian Watts <iwatts@ntlworl d.com> wrote:
>
> ..
>[color=green]
>> thanks for all your help - a friend of mine has cracked getting it to
>> work with all three browsers, by adding
>>
>> body > :first-child#wrapper {
>> height:180px
>> }
>>
>> Only Mozilla recognises the :first-child pseudo-class, and so all
>> three work fine now.[/color]
>
>
> Opera 7 also understands :first-child. The current version at
> <URL:http://homepage.ntlwor ld.com/iwatts/testsite/> looks almost the
> same in my copy of Opera 7 (7.5 test version) as in MSIE and Firebird
> .7.[/color]

In Opera 7.23 the version you quoted above still has the vast expanse of
space above the horizontal links. The following

http://homepage.ntlworld.com/iwatts/testsite2/

works fine in all three. I'll have to have a look at 7.5 - it might be
different.

It seems you forgot the background color for the page itself

As the page is white, do I need to specify (or do some browsers diplay a
default other colour)
, and[color=blue]
> the Valid XHTML 1.1 button is partially hidden by a quote box in
> Firebird and MSIE.
>[/color]
Thanks for the buttons - I've added the CSS W3C button too, and tidied
it up now.

Many thanks

Problems with Opera and positioning

Problems with Opera and positioning

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment