By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Problems with Opera and positioning

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a

"Ian Watts" <iw****@ntlworld.com> wrote in message
news:GF**************@newsfep1-gui.server.ntli.net...
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


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.
Jul 20 '05 #2

P: n/a

"Neal" <ne**@spamrcn.com> wrote in message
news:3f**********************@news.rcn.com...
<html xmlns="http://www.w3.org/TR/xhtml1" />


Ignore that, it was the man across the hall, I tell you...
Jul 20 '05 #3

P: n/a

"Neal" <ne**@spamrcn.com> wrote in message
news:3f**********************@news.rcn.com...
<html xmlns="http://www.w3.org/TR/xhtml1" />


Ah, I know what irked me about this.

<html xmlns="http://www.w3.org/1999/xhtml">
Jul 20 '05 #4

P: n/a
Neal wrote:
The heights in the CSS were the problem. Works so much better when you do it
in the img tag.
It works fine now on Opera (and in IE6) but not now in Mozilla 1.5 or
Firebird 0.7.
#wrapper {
width:100%;
text-align: center;
background-color: #333366;
}
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.
#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.
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.


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
Jul 20 '05 #5

P: n/a
Neal wrote:
The heights in the CSS were the problem. Works so much better when you do it
in the img tag.
It works fine now on Opera (and in IE6) but not now in Mozilla 1.5 or
Firebird 0.7.
#wrapper {
width:100%;
text-align: center;
background-color: #333366;
}
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.
#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.
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.


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
Jul 20 '05 #6

P: n/a

"Ian Watts" <iw****@ntlworld.com> wrote in message
news:oa*******************@newsfep1-win.server.ntli.net...
Neal wrote:
And you've repeated the id "right" - looks like a copy-paste error.


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.


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

P: n/a
Neal wrote:

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

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
Jul 20 '05 #8

P: n/a
Neal wrote:
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;
}

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
Jul 20 '05 #9

P: n/a
On Sat, 03 Jan 2004 15:10:12 +0000, Ian Watts <iw****@ntlworld.com> wrote:

...
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.


Opera 7 also understands :first-child. The current version at
<URL:http://homepage.ntlworld.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
Jul 20 '05 #10

P: n/a
Rijk van Geijtenbeek wrote:
On Sat, 03 Jan 2004 15:10:12 +0000, Ian Watts <iw****@ntlworld.com> wrote:

..
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.

Opera 7 also understands :first-child. The current version at
<URL:http://homepage.ntlworld.com/iwatts/testsite/> looks almost the
same in my copy of Opera 7 (7.5 test version) as in MSIE and Firebird
.7.


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 the Valid XHTML 1.1 button is partially hidden by a quote box in
Firebird and MSIE.

Thanks for the buttons - I've added the CSS W3C button too, and tidied
it up now.

Many thanks
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.