Weird CSS Problem

[chrishea]

I am classing this as a CSS problem because I don't know what else it could be.

The problem is that when I insert links into a page, only the first one (or maybe the second as in the example below) is recognized as a link (ie the pointer turns into a hand on a mouseover). Even though the links are set up correctly and they are valid and the css is highlighting it as a link, there is no reaction to a mouseover.

This is my first time setting up a page with just CSS. I copied a template that works fine and then changed it. It uses a mix of absolute and relative positioning and I am happy that everything is working as it should be except for this. This is part of a template for a CMS but I don't think any of that is relevant. I can take this same page and change the template back to the original version (that I copied) and all of the links work fine. There were some changes to the index.php file but they weren't significant.

This problem is consistent between my test system and the production server and across a number of different browsers. I read that transparent png backgrounds can cause problems so I removed one that I was using. I also put the CSS through a validator and corrected a few small problems. I have included a link to the CSS below. There is also an htc file (which hasn't changed from the original version) so I have included a link to that as well.

Here's a sample of some html with links where the first two work and the third doesn't. As you can see, the links are all the same:

<p>A <a href="http://localhost/wb_2.8.1_demo/pages/template-5/template-5a/template-5a1.php">link</a>&nbsp;and <a href="http://localhost/wb_2.8.1_demo/pages/template-5/template-5a/template-5a1.php">another</a>&nbsp;and <a href="http://localhost/wb_2.8.1_demo/pages/template-5/template-5a/template-5a1.php">one more</a></p> 
<p>&nbsp;</p>

CSS
HTC

Ultimately, if I don't come up with an answer, I will have to rebuild from the original version doing it step by step and checking the links as I go That will take some time so maybe someone has an idea what is going on.

[chrishea]

I went back and checked again to be sure and it is a bit different than I presented it above:
- Everything does seem to work in Opera. The layout is good and all of the links work.
- The layout is good in Firefox and Chrome but the links have the problem described above.
- IN IE8, the links all seem to work but the layout is messed up in various ways and the left-side pop-out menu doesn't work well. As you drag the mouse-pointer down the secondary menu list, the menu disappears so it is almost unusable.

Does anyone have some good references for css browser inconsistencies? It looks as if I have violated some specific browser requirements or I need some browser specific code.

[chrishea]

I've been continuing to research this and I found that Firefox and Chrome (and maybe others) have problems rendering links when they are within <div tags. Not sure why this would be but it seems to make css less useful than it should be. Continuing to figure out an alternative. Tried a <p with the style as a class but it didn't render the page properly.

[chrishea]

This is becoming more like a blog! Went back to an earlier version and almost everything worked ok. The only obvious problem is the positioning under IE and I guess I will need to do some more research on that. As time allows, I will try to figure out where I went wrong previously.

[macgurl70]

Which div does this snippet belong to? I see several different defined hovers for different areas in your css.

[signsamillion]

which snippet do you mean?

[chrishea]

I ended up rebuilding the .css file for all of the non-IE browsers and got everything working OK, then I went back and built a totally separate style definition for IE starting with the original file. In the index file (in php) I choose which style file to use based on the browser. This was simpler than trying to keep it integrated in one file.

Everything is pretty much working now. Most pages that I have built in the past using tables have the ability to expand and contract with the size of the screen but I found that this was a problem here because the floating right column would get pushed below the center block in some cases. I ended up using fairly fixed sizes and I used a min-width and max-width that are pretty much the same. As a result, when the window goes below the width of the blocks, it doesn't try to compress the content, it just doesn't show everything and adds a scroll bar at the bottom.

The current approach is a compromise that I'm not fully satisfied with. On a very wide screen, the page is left adjusted and could leave a lot of extra space on the right hand side. It might be better if it was able to expand somewhat or maybe if it was centered on the screen with free space on both sides.

If you'd like to see the current version you can see it here.