CSS tags stepping on each other

[GaijinPunch]

I've got one last (hopefully) issue with my site tweak. This one is a head scratcher though. After editing up a pre-written horizontal popout, I've noticed that some of the CSS included (and quite necessary) for the popout interferes w/ my "a:link, a:hover, and a:visited" tags.

The link below is an example.

http://www.gamengai.com/main_beta_ffgd.php

Here is an example of the workaround:

http://www.gamengai.com/main_beta_ff.php

I've encapsulated any <a href> tag within another div, called <link>, which has the link,hover, and visited markup. This seems more like a hack though. The menus on the right, and about 98% of the <a hrefs> on the entire site are generated from PHP, so changing them is trivial. There are, some pieces here and there in the database, which would require changing, or a quick PHP function which would just add to already somewhat convoluted code.

Opinions?

 

[Foamcow]

I think the first step is to make the code less convoluted.
Sorry to say that, but otherwise you are just patching rather than making it right.
Patches have a tendency to come off when you aren't looking.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[GaijinPunch]

Indeed, I will not deny that a cleanup is a good idea, but even cleaning up the code as much as possible (which I'm sorry to say won't help that much -- bilingual site makes for interesting code) won't solve this seemingly silly issue. The CSS sheets I'm using at the moment bare minimum, and the PHP code for that particular page is at highest, novice.

 

[ChrisHunt]

Since you don't actually say what exactly the problem is, it's hard to suggest a fix. The technique to use if you want to limit a CSS effect to a particular bit of your page is to give a class or an id to that part of the page (as you're already doing):

<div id="menu">
<ul>
  <li><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></li>
  ... etc ...

Then you can limit the effect like this:

a:hover {color: red}
#menu a:hover { color: green }

(which says that links go red on hover, except links in the menu <div>, which go green. That's not a hack, it's standard CSS.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[GaijinPunch]

If you look at the dropdown menu on the first link, you'll see the problem. I can only describe it as wacky.

I've since gone with another popout which seems to work as one would expect, across all browsers as well (although I've only tested Firefox and IE7)

http://www.gamengai.com/main_beta_inv.php

 

[GaijinPunch]

Thanks for the detailed explanation.

Removing the height from there solves the problem. But, the question is why do you need it anyway?

Well, I didn't write the original CSS. I might've added a few things here and there but I mainly just edited. I'm sure I didn't add this though.

 

[Vragabond]

Your problem...

height: 5px;

set at the general a:link, a:hover, a:visited links. Why? Because you force your links to be only 5px in size, so only a tiny fraction of whatever it is written is shown. Removing the height from there solves the problem. But, the question is why do you need it anyway?

Also, maybe I should explain why it only affects the links in the menu. Because link by default is inline element which cannot have the height defined. If you define a height on the anchor element it will get ignored. Unless you make that anchor a block level element. So, everywhere on the site, the height is ignored and in the menu it is respected.

Remove the height. If you think removing the height from those declarations is not possible, you can add [tt]height: auto;[/tt] to the :link, :hover, :visited declarations inside the menu.

 

[1DMF]

Note: I cannot select any of the 'omake' sub menu in IE7, as you move down to select an option the drop down menu vanishes.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.