CSS Button fail

[drum118]

Trying to make some CSS buttons, but they fall apart in Firefox and
IE.

The first set of buttons work fine in IE, but in Firefox they double
in size when mouseover.

The second set is too wide in both IE and Firefox compare to 1st set
of buttons. In Firefox, the button becomes an insert opposite to IE
and will not jump to the link page like it does in IE.

How do I get set one to work correctly for both browsers?

How do I reduce the excess space in set 2 and they are the same width?

What ever happens on this page will become a template for about 30
other pages.

I will be using a <link rel="STYLESHEET" type="text/css" href="../../
css/button.css"in place of the code that is shown on this page now.

On another note, I am updating my sight after 6 years as well not
looking at it and I am finding things that work back in 2000
correctly, but are breaking down now.

I am using class="num" in <pto centre items on the page that is
call .num {text-align:center;}. Since they fail to work, I have try
style="text-align:center" with no luck in Firefox. When I did the
testing for IE, Netscape and Opera back in 2000, everyone work
correctly then.

Why am I having this problem now with Firefox of all things?

The other thing I have notice, IE is blocking a <script type="text/
javascript" src="../../js/update.js"></scriptthat is calling the
current date view as well another telling when the page was updated.
Any reason why IE would block this script as a popup when it is not a
popup in the first place as I want it to be shown like it is on
Firefox?

The test page can be view at davidfisher.biz/oakville.html

I write strict xhtml.
Thanks

[John Hosking]

drum118 wrote:

Trying to make some CSS buttons, but they fall apart in Firefox and
IE.

But how do they look in the *important* browsers? :-)

>
The test page can be view at davidfisher.biz/oakville.html

I had trouble with your URL, and not just because it wasn't a URL.
I edited your string into my browser's address bar, but it seems that
that page is not on the server.

I then went to http://www.davidfisher.biz/, which was a big mistake,
because it's filled with 16 images, each around 2MB. (Hint: make true
thumbnails for a page like this.) I couldn't find a link to anything
"Oakville"-looking on the index page, nor did I see any CSS buttons. In
fact, I didn't find any CSS at all.

Sorry I can't help you.

--
John

[Johannes Koch]

John Hosking schrieb:

drum118 wrote:

>The test page can be view at davidfisher.biz/oakville.html

I had trouble with your URL, and not just because it wasn't a URL.

It _is_ a URL, a relative one. But what is the base to resolve it?
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

[drum118]

On Mar 16, 4:36 am, Johannes Koch <[e-mail]:

John Hosking schrieb:

drum118 wrote:

The test page can be view at davidfisher.biz/oakville.html

I had trouble with your URL, and not just because it wasn't a URL.

It _is_ a URL, a relative one. But what is the base to resolve it?
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

Try the link now.

[John Hosking]

drum118 wrote:

>
Try the link now.

Link? What link was that, exactly?

Ah, just being rude, no problem, I'll supply it for you and others:
http://davidfisher.biz/oakville.html.

Having arrived at an actual page with buttons, I note the following:

The buttons fail to exhibit the size-doubling problem you claimed in
your OP. I do notice when comparing IE6 to FF1.0.7 that the buttons in
IE are "squarer", because the texts are wrapped. But the font size looks
the same to me. FF is certainly not twice the size, even on hover. Tried
with JavaScript on and off.

Your code does not validate. Until that happens, all bets are off.

Among the errors are duplicate uses of id="mybutton". I don't see why
this would affect text size in the buttons, though.

Your embedded CSS doesn't validate, but I don't expect the errors to
have anything to do with the problems you mentioned.

All 3 of your external CSS files are missing. Are they the ones causing
the doubling problem you're seeing? If so, we'd need them too. ;-)

You've got a bunch of unused (hence irrelevant) styles in your CSS and
code in your XHTML. Since this is obviously a simplified test case, why
not simplify it completely?

If you don't like the widths of the lower button set, why not set widths
on them? Like input {text-align: center; width:8em;} or something?
Beware: I am thinking that there is some problem with setting widths on
<inputelements (not from my own experience, but because of things I
think I've seen in NGs like this one). Try googling, and/or making tests
of just applying width styles to <input>s. That being said, it worked on
my FF.

The buttontext and buttonover styles' text colors are both different
from the default. So the top buttons' texts go from black (or something)
when your page loads to yellow while I hover to white when I move away.

And lastly, this is a completely unrelated item, but maybe it'll help
you (sometime). It's just about markup. Try starting your page's code with

<body>
<div style="text-align:center;">
<h1 style="position:absolute; top:5px; width:99%; font-size:3.3em;
font-weight:bold; color:silver;">Oakville Transit</h1>
<h1 style="position:absolute; top:0px; width:99%; font-size:3.3em;
font-weight:bold;">Oakville Transit</h1>
</div>

<p style="text-align: center; margin-top:11em;">

An <h1makes more sense than some DIV, and empty paragraphs for spacing
are nasty. You're using CSS already; so *use* it! :-) (Of course, all
these in-line styles could be embedded or external instead, and your
markup would be cleaner. But I guess you're still fiddling with test
pages. Yes?)

Summary of main points: Simplify (weed out) XHTML and CSS (and JS),
validate both, and try again.

HTH
--
John

[drum118]

On Mar 16, 9:48 pm, John Hosking <[e-mail]>
wrote:

drum118 wrote:

Try the link now.

Link? What link was that, exactly?

Ah, just being rude, no problem, I'll supply it for you and others:http://davidfisher.biz/oakville.html.

Having arrived at an actual page with buttons, I note the following:

The buttons fail to exhibit the size-doubling problem you claimed in
your OP. I do notice when comparing IE6 to FF1.0.7 that the buttons in
IE are "squarer", because the texts are wrapped. But the font size looks
the same to me. FF is certainly not twice the size, even on hover. Tried
with JavaScript on and off.

Your code does not validate. Until that happens, all bets are off.

Among the errors are duplicate uses of id="mybutton". I don't see why
this would affect text size in the buttons, though.

Your embedded CSS doesn't validate, but I don't expect the errors to
have anything to do with the problems you mentioned.

All 3 of your external CSS files are missing. Are they the ones causing
the doubling problem you're seeing? If so, we'd need them too. ;-)

You've got a bunch of unused (hence irrelevant) styles in your CSS and
code in your XHTML. Since this is obviously a simplified test case, why
not simplify it completely?

If you don't like the widths of the lower button set, why not set widths
on them? Like input {text-align: center; width:8em;} or something?
Beware: I am thinking that there is some problem with setting widths on
<inputelements (not from my own experience, but because of things I
think I've seen in NGs like this one). Try googling, and/or making tests
of just applying width styles to <input>s. That being said, it worked on
my FF.

The buttontext and buttonover styles' text colors are both different
from the default. So the top buttons' texts go from black (or something)
when your page loads to yellow while I hover to white when I move away.

And lastly, this is a completely unrelated item, but maybe it'll help
you (sometime). It's just about markup. Try starting your page's code with

<body>
<div style="text-align:center;">
<h1 style="position:absolute; top:5px; width:99%; font-size:3.3em;
font-weight:bold; color:silver;">Oakville Transit</h1>
<h1 style="position:absolute; top:0px; width:99%; font-size:3.3em;
font-weight:bold;">Oakville Transit</h1>
</div>

<p style="text-align: center; margin-top:11em;">

An <h1makes more sense than some DIV, and empty paragraphs for spacing
are nasty. You're using CSS already; so *use* it! :-) (Of course, all
these in-line styles could be embedded or external instead, and your
markup would be cleaner. But I guess you're still fiddling with test
pages. Yes?)

Summary of main points: Simplify (weed out) XHTML and CSS (and JS),
validate both, and try again.

HTH
--
John

Thanks for the feed back.

The codes for the buttons are out of a book.

I have removed all the CSS not related to the buttons as well the 3
links.

I forgot to add the code for the 2nd style button and is on the page
now.

The width is set for the 2nd button as requested, but does not work in
FF.

The first button in IE should be like FF.

One button is right in each browsers, but not the other and that is
the problem as they should be the same.

There is no JS code for the buttons.

[John Hosking]

drum118 wrote:

On Mar 16, 9:48 pm, John Hosking <[e-mail]>
wrote:

>>http://davidfisher.biz/oakville.html.

The buttons fail to exhibit the size-doubling problem you claimed in
your OP.

Still no doubling for me.

>>Your code does not validate. Until that happens, all bets are off.

You apparently didn't read this the first time.
Visit http://validator.w3.org/

>>Since this is obviously a simplified test case, why
not simplify it completely?

>>
Summary of main points: Simplify (weed out) XHTML and CSS (and JS),
validate both, and try again.

>
Thanks for the feed back.

You're welcome.

>
I forgot to add the code for the 2nd style button and is on the page
now.

That'll have an effect... ;-)

The width is set for the 2nd button as requested, but does not work in
FF.

Ah, well, .Button is not the same as .button. The case in your CSS has
to match the case in your XHTML.

>
The first button in IE should be like FF.

Although they are two different browsers (and you are feeding them
invalid XHTML)? I do not know why IE breaks the text while FF does not.

>
One button is right in each browsers, but not the other and that is
the problem as they should be the same.

There is no JS code for the buttons.

Then get it out of the sample page you're providing and "testing" with.

--
John

[Bergamot]

drum118 wrote:

>>
http://davidfisher.biz/oakville.html.

There is no JS code for the buttons.

You are mistaken.

<span ID="mybutton"
onMouseOver="this.className='buttonover';"
onMouseOut="this.className='buttontext';">

Mouse events are only done through JavaScript. When JS is disabled,
nothing happens. Use :hover instead.

--
Berg