Mozilla padding problem & IE display problem

[Thresh]

Hi all, two problems that I've been wrestling with:

1) I've got some images on a site that are links. I've got them set for 2px
of padding, and a 1px border. The color changes upon hover. This works fine
in IE v6 (amazingly), but it doesn't work correctly in Mozilla v1.7! It's
getting the left and right padding correct, but the top padding is 7px
instead of 2, and the bottom padding is 5 (instead of 2). It looks exactly
right in IE, however. Any clues here? I thought about this one for half
of the day today, and I've officially given up!

2) I've got another site I'm working on (http://tumbleweed.net) that is
using all text in the navigation area. What I want is for the default state
to have a - next to each link in the navigation area until you mouseover it -
then it changes to a +. Works great in Mozilla, but shows both - & + in IE.
If anyone would like to check out the code on that one and give me some
advice, I'd be much obliged!

thanks for any help!

[Neal]

On 24 Jun 2004 05:02:51 GMT, Thresh <uc*@ftc.gov> wrote:

Hi all, two problems that I've been wrestling with:

1) I've got some images on a site that are links. I've got them set for
2px
of padding, and a 1px border. The color changes upon hover. This works
fine
in IE v6 (amazingly), but it doesn't work correctly in Mozilla v1.7! It's
getting the left and right padding correct, but the top padding is 7px
instead of 2, and the bottom padding is 5 (instead of 2). It looks
exactly
right in IE, however. Any clues here? I thought about this one for half
of the day today, and I've officially given up!
Without a URL of the problem, we can't get into it enought to give up.
2) I've got another site I'm working on (http://tumbleweed.net) that is
using all text in the navigation area. What I want is for the default
state
to have a - next to each link in the navigation area until you mouseover
it -
then it changes to a +. Works great in Mozilla, but shows both - & + in
IE.
If anyone would like to check out the code on that one and give me some
advice, I'd be much obliged!

thanks for any help!

Holy shit...

Dude, you are making up markup out of thin air. I can't fix this page. No
one here can. Learn HTML and get rid of bullshit like <bullet></bullet>
and <arrow></arrow> before you try again.

If you were in an XML environment, sure, you can create elements. But you
develop a DTD to account for them. You've stated you are using HTML 4.01
Transitional, which allows all the elements in the list at
http://www.w3.org/TR/html4/interact/...ml#edef-BUTTON (except those
marked with F for Frameset) and that's all you can use. <arrow>, <button>,
they don't exist. You're in a goddamn dream world...

[Neal]

On Thu, 24 Jun 2004 01:29:13 -0400, Neal <ne*****@yahoo.com> wrote:

On 24 Jun 2004 05:02:51 GMT, Thresh <uc*@ftc.gov> wrote:

2) I've got another site I'm working on (http://tumbleweed.net) that is
using all text in the navigation area. What I want is for the default
state
to have a - next to each link in the navigation area until you
mouseover it -
then it changes to a +. Works great in Mozilla, but shows both - & + in
IE.
If anyone would like to check out the code on that one and give me some
advice, I'd be much obliged!

thanks for any help!

Holy shit...

Dude, you are making up markup out of thin air. I can't fix this page.
No one here can. Learn HTML and get rid of bullshit like
<bullet></bullet> and <arrow></arrow> before you try again.

If you were in an XML environment, sure, you can create elements. But
you develop a DTD to account for them. You've stated you are using HTML
4.01 Transitional, which allows all the elements in the list at
http://www.w3.org/TR/html4/interact/...ml#edef-BUTTON (except those
marked with F for Frameset) and that's all you can use. <arrow>,
<button>, they don't exist. You're in a goddamn dream world...

Ok, maybe I was a little harsh... but I'd still like to know who foisted
those bullshit elements on you. Get your money back and then some.

1) Learn the rules for the DTD you chose. The list I gave you links
directly to the specs. Study them well.

2) Check out http://validator.w3.org/ - it is your best friend. Follow its
instructions. What it tells me about your page is that you left out the
type attribute on your script tag, and those two BS elements. And a few
other problems that occur as a result. Use it.

3) If you want the link to change on hover (and i assume active as well),
use CSS. I think, if you change your <arrow> and <bullet> markup to <span
class="arrow"> and <span class=bullet"> and style .arrow instead of arrow
and .bullet instead of bullet, it might work.

I do still want to know where you got this arrow and bullet crap. I'll
have their kneecaps broken over this.

[Neal]

On Thu, 24 Jun 2004 01:39:48 -0400, Neal <ne*****@yahoo.com> wrote:

http://www.w3.org/TR/html4/interact/...ml#edef-BUTTON

Wow I screwed that up. I intended
http://www.w3.org/TR/html4/index/attributes.html

[Thresh]

>> 1) I've got some images on a site that are links. I've got them set

for 2px
of padding, and a 1px border. The color changes upon hover. This
works fine
in IE v6 (amazingly), but it doesn't work correctly in Mozilla v1.7!
It's getting the left and right padding correct, but the top padding
is 7px instead of 2, and the bottom padding is 5 (instead of 2). It
looks exactly
right in IE, however.

Without a URL of the problem, we can't get into it enought to give up.

Whoops, sorry: http://tumbleweed.net/testing.html

I've stripped it to the bare minimum for testing, and it's still doing the
same thing. Works in IE but not Mozilla. I think I'm in Bizarro world or
something, cuz that's just plain backwards from normal CSS behaviour.

[Neal]

On 24 Jun 2004 17:32:56 GMT, Thresh <uc*@ftc.gov> wrote:

1) I've got some images on a site that are links. I've got them set
for 2px
of padding, and a 1px border. The color changes upon hover. This
works fine
in IE v6 (amazingly), but it doesn't work correctly in Mozilla v1.7!
It's getting the left and right padding correct, but the top padding
is 7px instead of 2, and the bottom padding is 5 (instead of 2). It
looks exactly
right in IE, however.

Without a URL of the problem, we can't get into it enought to give up.

Whoops, sorry: http://tumbleweed.net/testing.html

I've stripped it to the bare minimum for testing, and it's still doing
the
same thing. Works in IE but not Mozilla. I think I'm in Bizarro world or
something, cuz that's just plain backwards from normal CSS behaviour.

Well, when IE is different, it's usually because it's wrong.

Someone else might wander in and see it right off, but near as I can
figure: you're setting a border on an inline element (<a>) which is not
predictable. I can't say I see the precise error.

But that's after I cleaned up your code, even. Didn't validate it, hmm?
:-\ In this case, it didn't affect anything, but it easily can.

1) Transitional DTD should be <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - that yields
more consistent results.

2) Empty tags only get a terminal slash in XHTML. Should NOT do this in
HTML 4.01. <img>, <meta>

3) <style> needs attribute type - in this case, type="text/css"

4) The id attribute may be used more than once on a page so long as the
value differs. You have 4 instances of id="roller" which is an error. Use
class instead of id when you want it more than once.

5) Not necessarily an error, but it's senseless to set CSS for body and
also presentation attributes. Use one or the other, and in nearly every
case CSS is better cross-browser.

After I fixed all these, it still is acting unexpectedly. Opera is
behaving strangely as well. I'm not drunk yet, so it must be some quirk I
haven't accounted for.

[Phil Evans]

Thresh wrote:

1) I've got some images on a site that are links. I've got them set
for 2px
of padding, and a 1px border. The color changes upon hover. This
works fine
in IE v6 (amazingly), but it doesn't work correctly in Mozilla v1.7!
It's getting the left and right padding correct, but the top padding
is 7px instead of 2, and the bottom padding is 5 (instead of 2). It
looks exactly
right in IE, however.

Without a URL of the problem, we can't get into it enought to give up.

Whoops, sorry: http://tumbleweed.net/testing.html

I've stripped it to the bare minimum for testing, and it's still doing the
same thing. Works in IE but not Mozilla. I think I'm in Bizarro world or
something, cuz that's just plain backwards from normal CSS behaviour.

Afraid I haven't got time to play properly, but I had a fiddle with the
font-size (set to 10px for the sake of argument) and that certainly
reduced the gap at the top - looks promising

P