Hello everyone,

I'm putting together a web site at loverde.org (the version in question, however, is [deleted]). I've run into a number of issues with my CSS. Some of these "problems" are minor, while others are befuddling, major issues. I'll start out with the real problems.

You'll notice that I have a bar at the bottom which link descriptions appear in (wave your cursor over the menu). The link descriptions are enclosed inside SPAN tags that are absolutely positioned. There are two issues here.

First, Mozilla (plus anything else based on Gecko, I'd imagine), and IE do not display these SPANs in the same place. This is just pixel counting! "Put the contents of this tag X pixels from the top." Apparently there's more to it than that...

Second, (and perhaps this question should be answered before a resolution to #1 is sought), those can only be absolutely positioned if I know the location of the status bar. That will change, depending on the length of the current page's content. So it can't stay in the CSS ([deleted]) the way it is right now. I don't know of a way to grab the correct location every time.

I could completely eliminate this problem by using JavaScript to write to the innerHTML of the DIV tag, but I want to avoid using JavaScript. If I use JS, I might as well say "screw designing with web standards" and write the menu in JS, too. I'm hoping some CSS wiz out there has an alternative idea.

That concludes my major problems. Now onto nitpicking...

In Mozilla, the column borders form a perfect intersection with the menu. In IE, the borders are a few pixels off. I believe the cause of this is similar to the first issue I listed. IE and Mozilla/Netscape just DO NOT appear to count pixels the same (??).

I'll graciously welcome any and all suggestions. Thanks.

[EDIT]
I just realized that the placement of the link descriptions are coded specifically to my resolution. I can't believe I did that; a user running in 800x600 isn't going to need them indented 265 pixels from the left. Nevertheless, IE and Mozilla are still not seeing eye-to-eye. Still seeking a solution to the original problem.

---------------
EDIT: removed links, as they are now dead. The server logs were getting ridiculous. Solution was found -- no further replies necessary.

Thanks,
Kurt
---------------

hey kloverde,

i played with this for a bit. try this in your editor and see if its any help:

hey kloverde,

ie 6 and firefox are okay with this but not opera

the above may be a start, and then you can modify your menu as you wish or you can ignore this post and wonder what the hell was that guy thinking?

Quote:

That would be a little too brutal.

I appreciate your reply, but I am profoundly confused. What did that fix?

hey kloverde,

okay did an edit so post is not so long. when i tested i could not get your site to display properly so i could see what was happening with span display, it was to the side and out of window and there was a lot of css and descriptions of why it was there so to make sense i just simplified to see what was happening.

Quote:

I believe I know what you're talking about. The link descriptions are appearing too far to the right for you. That's because, as I mentioned in my [EDIT] block, I did the indentation based upon my screen resolution. It indents 265 pixels. You're most likely running in a lower resolution than me. People running in a higher resolution will see it appear too far to the left.

That's something I hadn't thought of when I had indented it, but it is not one of the problems I am currently being bothered by. IE and Mozilla display the SPANs in different places.

kloverde, go ahead with it.

I ever played with this pixel-cross-browser problem for sometime and could not find an ideal solution.

Share your solution once you find one.

I ended up using JavaScript to change the text. I might remove this functionality in the future; as content is added, it becomes increasingly unlikely that the user will be able to see the footer and menu at the same time.

Sorry for dragging up an old thread by making this post; I felt it was the right thing to do, given the edit I just made in the first post.

Easiest solution I know is to place different CSS codes in the different .css files. Many of the themes will have:
@import url(style.css);
in the styleNN.css file. Anything you add after that line will override what was imported from style.css. You only need to add lines that need to be different which isn't very much.

So if your code for Mozila needs to be slightly different to match IE you place that line in styleNN.css.

Another solution is to use CSS hacks that give different code to differenc browsers. This lets you eliminate browser detection. I know XOOPS does it by default but I disabled it on my site and went to a single CSS file in my theme.

Here are some resources for you to check out:

css-discuss: Box Model Hack
W3C CSS2 Box Model
Centricle's CSS Hacks Master List