I've tested a website I'm working on (http://www.rhythmandvibe.com/elbopa - HTML | http://www.rhythmandvibe.com/elbopa/design/style.css - CSS) in Firefox, Opera and IE. IE is the only browser that displays correctly, so you can use that as a guide to what I'm asking about. Problems:

I'm having in Firefox is that the menu that has links like "Link 1", "Link 2", ect. are lowered two pixels. the menu is 20px high and the white-washed bar is also 20px high, so the menu is supposed to sit on that perfectly, as seen in IE. Additionally, in Firefox, when you click on a menu item, a red submenu comes up. That is supposed to be centered, as seen in IE.

In Opera, the menu is aligned properly, but when you click on a menu item, the red submenu is also not centered and raised about 8px.

I don't know what exactly is wrong, nor how to fix it, so help would be appreciated.

Thanks,
Micah

Another thought: In IE and Opera (but NOT Firefox), the Home and Contact links were not aligned. The Contact link is a few pixels higher than the Home link. I don't know what that is about, either.

Oh, and that red bar will be gone, its just a marker to show you how things are in different browsers.

....ok, you didn't like it last time I suggested this... you seemed dead set on using pixel values. I'd forget it, drop em', go back and redesign using percentages or some other more reliable measure. This pixel outing has caused you endless problems by the sounds of things!

Maybe what you're saying is useful, but I don't understand. Please give me an example of how I would use that. It seems to me it would make no difference, not to mention that I have that is a picture, which cannot stretch to various browser sizes.

A picture will stretch! That's the idea - if you specify its width as "80%" it will occupy 80% of the screen width (or table cell if appropriate). This way, you end up with something that scales better cross browser/cross resolution...

Here's a good example - try resizing your browser window and note what happens to the large image...
http://www.mcli.dist.maricopa.edu/tu..._ex/test2.html

Cheers,
SC

I know an image will stretch, but this is a picture. It will be distorted if I stretch it. Do you see any reason that my website might be affected by using pixel values, and therefore be aided by using percentages? I don't really see any reason for it.

...what always concerns me about pixel values is client resolution. I'm viewing here in 1280x1024, the norm is probably 1024x768, most web designers still shoot for the 800x600 rule... though there are still people in 640x480. That said, I do agree - sometimes scaling images can just lead to distorted ugly sites.

Ok, I'm heading over to your site now...

The contact text isn't on the button, I can only see the top of the "link 1", "link 2"... text. I'm in IE yet it works for you.

...that's with text size set to "larger" (missus keeps bloody changing it to that!). In "medium" it looks fine. I'd be tempted to drop the text and add it to the image - then just make an image map. That way, you won't run into text-size problems!

There's an error in your CSS too...
http://jigsaw.w3.org/css-validator/v...usermedium=all

CSS validates now. I hadn't tested it with different text sizes, but my target audience is only around 45-50ish on average (Parent's of high school students), so I assumed medium is what everyone would be using. I suppose I could make those top links part of the image, and that would take care of that problem, but that still leaves the other two problems.

I still need to know how to make firfox align the menu on the white washed line, and how to center the submenu in firefox and opera. Shouln't "margin:0px auto 0px auto;" do the trick?

Okay, I've fixed it so now both IE and Opera both display the website correctly. Both my stylesheet and html validate correctly, however these problems still arise, in Firefox:
-The top menu where it says "Home" and "Contact", the "Contact" link is one pixel lower than it should be
-The menu appears two pixels lower than it should be
-The submenu appears three pixels lower than it should be

It is ironic, though, that my HTML lists those menus in the same order as they have more pixel problems. I don't know what it would have to do with anything, but it demanded my attention when I listed it's problems.

ive been having the same problem as you and hadn't figured out the answer. and i think the suggestion of using percentages is silly because the image would definitely get distorted. in addition percentages hardly guarantee that the site will look the same for everyone. plus css is supposed to let us position things where and how we want.

i subscribed to the thread, and if i figure out a solutions ill let you know.

Sounds good, monkey. I think I'm on to something, though, with that 1, 2 and 3 pixel difference.

security is right, you will be messing around for ages trying to position in pixels. And as you noticed it looks ok in 1 browser but not others. He also told you why it is doing that but you seem set on sticking with your current approach so I have a solution for you.

Make 1 css file for each browser, then using jscript catch what browser it is and load the correct CSS.

In the long run though your making work for yourself and as a programmer you should be aiming to be bone idle and do as little as possible.

I suppose the saying given time they will learn comes to mind.

Ibbo

I've just run you site in Firefox and Deer Park and it is fine the no problem withe moving pix.

Forgive my ignorance, but I seriously don't understand what that has to do with anything. Please explain what you would do in my situation, using percentages. I've tried tables, to avoid this problem, but I ran into a bunches of problems with that too.

alright i think i found a round about way you can accomplish this. check out this page http://www.stylegala.com/articles/no_more_css_hacks.htm essentially it gives you a way to use php to specify different styles based upon what browser they are using. simply figure out the correct css info for each browser, and then apply the style based on browser.

(Sorry this is a little overdue. I havn't had access to my computer for a day.) But, again, could somebody people explain why defining pixels is so drastically different from using percentages? If worst comes to worse, I'll probably use a Javascript version of what you're talking about, monkey, but I'd rather have a fix the the problem.

haha id still like to know the answer to all of this.