Menu Problem with Opera 9.5

[Candoer]

I am new to both HTML and CSS. Several months ago my High School Alumni association web master died and they asked me to take over the web site. I had never worked with CSS but had some experience with HTML. The site was written strictly using HTML and had no CSS. So I decided to take on the task to convert it using CSS. For the past three months I have been lurking on this group and trying my best to absorb your suggestions to others and adhering to them in my switch over of the web site from plain HTML to CSS. (Understand this is a limited audience web site in that it gets less than 30 viewers a day.)

My statistics show that 50 percent of my users use IE 7, 15 percent use Opera, 15 percent use Safari, 19 percent use Firefox, 6 percent use IE6 and the others use various others.

I have gone up on W3C.org and tested my html and css. It passed the CSS in that it has no errors, but several warnings (that I don't understand). The html also has one or two errors - one that will always be there.

I did not use a strict doctype as you all prefer. Hopefully if I ever get good enough with this I will switch to strict.

The site is located at: www.bisonalitiesagain.com/bisonindex.html and the css is located at:
www.bisonalitiesagain.com/bison.css

Here is my main problem. On the page bisonindex.html and xindex.html I have menus. On bisonindex it is a list of dates that jumps you within the page to information posted on that day. On xindex.html it is the main menu that takes you to various pages throughout the site. It displays and looks exactly like I want it to on Exploder 7.0 (ain't that a hoot), Safari 3.1.1, Navigator 9.0.0.6, Flock 1.2.1, Firefox 2.0.0.14 and Seamonkey 1.1.9 but fails badly on Opera 9.27 and 9.50.

What am I doing wrong with my CSS to cause this problem, or do I have an HTML problem and need to go to the authoring.html group to get an answer?

Thanks for any help, criticism you may offer.

Bob Catlin -- Also known as, CANDOER Cat

[GTalbot]

On 13 juin, 14:14, "Candoer" <[e-mail]:

I am new to both HTML and CSS. *Several months ago my High School Alumniassociation web master died and they asked me to take over the web site. *I had never worked with CSS but had some experience with HTML. *The site was written strictly using HTML and had no CSS. *So I decided to take onthe task to convert it using CSS. *For the past three months I have been lurking on this group and trying my best to absorb your suggestions to others and adhering to them in my switch over of the web site from plain HTML to CSS. (Understand this is a limited audience web site in that it gets less than 30 viewers a day.)

My statistics show that 50 percent of my users use IE 7, 15 percent use Opera, 15 percent use Safari, 19 percent use Firefox, 6 percent use IE6 and the others use various others.

I have gone up on W3C.org and tested my html and css.

Good!

>*It passed the CSS in that it has no errors, but several warnings (that Idon't understand). *The html also has one or two errors - one that will always be there.

Good... but

On line 22
<img src="images/bison9t1.gif" alt="The Thundering Herd" border="0"
height="128" width="150" hsrc="images/flbhslogo.gif">
just remove the "h": it should be src, not hsrc

There is no need to declare border="0" as img by default do not have a
border. border="0" may make sense if it's a clickable-reactive image.

<centercan be replaced with either style="margin-left: auto; margin-
right: auto;" if the element to horizontally center is a block-level
element. If it's an inline element, then use style="text-align:
center;". For interactive demo of this:

CSS Horizontal alignment:
when to use margin-left, margin-right and when to use text-align
http://www.gtalbot.org/NvuSection/Nv...Alignment.html
That code of yours:
<td width="25%">
<div>
<center><img src="images/flbhslogo.gif" border="0"
alt="The Thundering Herd" height="128" width="150" hsrc="images/
bison9t1.gif"></center>
</div></td>

can be replaced more efficiently with

<td>
<img src="images/flbhslogo.gif" alt="The Thundering Herd" height="128"
width="150" src="images/bison9t1.gif"></td>

and by using <col>
and
col {width: 25%;}
so that way you can remove all of the width="25%" attribute
specification in each cells.

I glanced in your code and I think you need to know how to replace
efficiently all those <centerelements.

>
I did not use a strict doctype as you all prefer. *Hopefully if I ever get good enough with this I will switch to strict. *

The site is located at: *www.bisonalitiesagain.com/bisonindex.html*andthe css is located at:www.bisonalitiesagain.com/bison.css

Here is my main problem. *On the page bisonindex.html and xindex.html I have menus. On bisonindex it is a list of dates that jumps you within the page to information posted on that day. *On xindex.html it is the main menu that takes you to various pages throughout the site. *It displays and looks exactly like I want it to on Exploder 7.0 (ain't that a hoot), Safari 3.1.1, Navigator 9.0.0.6, Flock 1.2.1, Firefox 2.0.0.14 and Seamonkey 1.1.9 but fails badly on Opera 9.27 and 9.50.

Please describe the word "badly" because over here, Opera 9.50 build
10063, the menu looks just like in Firefox 3 and in Internet Explorer
8 beta 1. Hovering the mouse cursor over the links and the background
color changes and a small "advance" or "go" image appears.

Regards, Gérard

[Candoer]

"GTalbot" <ne*******@gtalbot.orgwrote in message
news:4c**********************************@79g2000h sk.googlegroups.com...
On 13 juin, 14:14, "Candoer" <[e-mail]:

I am new to both HTML and CSS. Several months ago my High School Alumni
association web master died and they asked me to take over the web site. I
had never worked with CSS but had some experience with HTML. The site was
written strictly using HTML and had no CSS. So I decided to take on the
task to convert it using CSS. For the past three months I have been
lurking on this group and trying my best to absorb your suggestions to
others and adhering to them in my switch over of the web site from plain
HTML to CSS. (Understand this is a limited audience web site in that it
gets less than 30 viewers a day.)

My statistics show that 50 percent of my users use IE 7, 15 percent use
Opera, 15 percent use Safari, 19 percent use Firefox, 6 percent use IE6
and the others use various others.

I have gone up on W3C.org and tested my html and css.

Good!

It passed the CSS in that it has no errors, but several warnings (that I
don't understand). The html also has one or two errors - one that will
always be there.

Good... but

On line 22
<img src="images/bison9t1.gif" alt="The Thundering Herd" border="0"
height="128" width="150" hsrc="images/flbhslogo.gif">
just remove the "h": it should be src, not hsrc

There is no need to declare border="0" as img by default do not have a
border. border="0" may make sense if it's a clickable-reactive image.

<centercan be replaced with either style="margin-left: auto; margin-
right: auto;" if the element to horizontally center is a block-level
element. If it's an inline element, then use style="text-align:
center;". For interactive demo of this:

CSS Horizontal alignment:
when to use margin-left, margin-right and when to use text-align
http://www.gtalbot.org/NvuSection/Nv...Alignment.html
That code of yours:
<td width="25%">
<div>
<center><img src="images/flbhslogo.gif" border="0"
alt="The Thundering Herd" height="128" width="150" hsrc="images/
bison9t1.gif"></center>
</div></td>

can be replaced more efficiently with

<td>
<img src="images/flbhslogo.gif" alt="The Thundering Herd" height="128"
width="150" src="images/bison9t1.gif"></td>

and by using <col>
and
col {width: 25%;}
so that way you can remove all of the width="25%" attribute
specification in each cells.

I glanced in your code and I think you need to know how to replace
efficiently all those <centerelements.

>
I did not use a strict doctype as you all prefer. Hopefully if I ever get
good enough with this I will switch to strict.

The site is located at: www.bisonalitiesagain.com/bisonindex.html and the
css is located at:www.bisonalitiesagain.com/bison.css

Here is my main problem. On the page bisonindex.html and xindex.html I
have menus. On bisonindex it is a list of dates that jumps you within the
page to information posted on that day. On xindex.html it is the main menu
that takes you to various pages throughout the site. It displays and looks
exactly like I want it to on Exploder 7.0 (ain't that a hoot), Safari
3.1.1, Navigator 9.0.0.6, Flock 1.2.1, Firefox 2.0.0.14 and Seamonkey
1.1.9 but fails badly on Opera 9.27 and 9.50.

Please describe the word "badly" because over here, Opera 9.50 build
10063, the menu looks just like in Firefox 3 and in Internet Explorer
8 beta 1. Hovering the mouse cursor over the links and the background
color changes and a small "advance" or "go" image appears.

Regards, Gérard

Gerard

I forgot to add the following to my last response:

I don't know if you noticed but the menu pages both have a picture of a
brown "Bison" on them. This was the symbol of the sports teams when I went
to that school in the 50's. In the 80's they changed the Bison symbol to a
blue Bison. If you move your mouse over the Brown Bison it turns to the
Blue Bison. The script to do that was given to me by a friend. The "hsrc"
is the only way that script works. If you change it to src the mouse over
does not work.

Again, Thanks for your suggestions and comments. I really appreciate them!

CANDOER cat

[GTalbot]

Hello,

Please only quote what you are replying to. There was no need for you
to quote my entire post, you know...

So what was badly rendered? What do you mean with

but fails badly on Opera 9.27 and 9.50

?

Regards, Gérard

[Candoer]

"GTalbot" <ne*******@gtalbot.orgwrote in message
news:13**********************************@z66g2000 hsc.googlegroups.com...
Hello,

Please only quote what you are replying to. There was no need for you
to quote my entire post, you know...

So what was badly rendered? What do you mean with

but fails badly on Opera 9.27 and 9.50

?

Regards, Gérard

Gerard

On the menu part, it spills out over the box lines on the right of each box.

CANDOER Cat

[Ed]

On 14/06/08 04:45, Candoer wrote:

>
On the menu part, it spills out over the box lines on the right of each box.

CANDOER Cat

The same problem also happens in my Firefox 2.0.0.13 and in K-Meleon
1.1.5 as well as Opera 9.27 when looking at
http://www.bisonalitiesagain.com/xindex.html
Ed

[dorayme]

In article <u7******************************@posted.plusnet >,
Ed <ex@directorywrote:

On 14/06/08 04:45, Candoer wrote:

On the menu part, it spills out over the box lines on the right of each box.

CANDOER Cat

The same problem also happens in my Firefox 2.0.0.13 and in K-Meleon
1.1.5 as well as Opera 9.27 when looking at
http://www.bisonalitiesagain.com/xindex.html

OP's code is very ... but never mind, Gerard has already given good
advice about it.

If the OP wants to just fix this business of the blue spilling and being
so far right, he might use some left and right padding on the UL. Try
1em. but this is fiddle fixing on the side of the road. get the poor
thing to a garage and strip it out and rebuild!

--
dorayme

[Bergamot]

Ed wrote:

On 14/06/08 04:45, Candoer wrote:

>On the menu part, it spills out over the box lines on the right of each box.

The same problem also happens in my Firefox 2.0.0.13 and in K-Meleon
1.1.5 as well as Opera 9.27 when looking at
http://www.bisonalitiesagain.com/xindex.html

It should be happening in any decent browser.

#navcontainer a {
display: block;
width: 100%;
padding: 4px;
}

100% + padding is always wider than the parent container.

--
Berg

[Candoer]

"Bergamot" <be******@visi.comwrote in message
news:6b*************@mid.individual.net...

>
Ed wrote:

>On 14/06/08 04:45, Candoer wrote:

>>On the menu part, it spills out over the box lines on the right of each
box.

The same problem also happens in my Firefox 2.0.0.13 and in K-Meleon
1.1.5 as well as Opera 9.27 when looking at
http://www.bisonalitiesagain.com/xindex.html

It should be happening in any decent browser.

#navcontainer a {
display: block;
width: 100%;
padding: 4px;
}

100% + padding is always wider than the parent container.

--
Berg

Berg

Your right about that. Will make a correction on that immediately!

Thanks

CANDOER Cat