IE: float: right, position: relative, z-index and clickable a tags issues!

Discussion in 'CSS' started by dna_05, Jan 20, 2008.

  1. #1
    Hello everyone,

    as of today i considered myself a good css coder. But now i am really stuck on this and can't understand why is happening.
    I have tried everything from positioning to floating to z-indexing, but no matter what i do ie 5.5 and 6 won't render correctly.

    Now i am at the point were the elements are placed and positioned correctly, but one link won't be clickable!

    You can view my problems here: http://www.stefanobernardi.com

    I can get one of the 2 bottons clickable on IE, but not both of them!
    Please help me!
     
    dna_05, Jan 20, 2008 IP
  2. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #2
    hey bro.. use the other way around.. instead of using a:hover and making your button a background image.. why wont you use.. <img> tag to display image button and use javascript onmouseover ... as your replacement on css hover....
     
    donross, Jan 20, 2008 IP
  3. dna_05

    dna_05 Active Member

    Messages:
    316
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Thanks for the reply..

    i will not use that because the site won't be accessible and semantic. I want to use text replacement and i cannot understand why shitty IE doesn't want to make it work!
     
    dna_05, Jan 21, 2008 IP
  4. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #4
    use <img> with alt="" description... its still one way of semantic coding ...
     
    donross, Jan 21, 2008 IP
  5. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Your CSS is kind of Screwy. You should probably never change the background image on hover to create a "Rollover" effect. The rollover image will not be loaded until someone hovers over it, thus created a flicker until the image is cached. Since this is a site promoting your CSS and web design skills, that can look bad to professionals. Thus, hurting your career opportunities. I suggest using something like CSS sprites. It basically has a background image with both the hover style, and the non-hover style in the same image, then you just adjust the background-position property on hover. You will have no flicker when the image is first hovered.

    OK, next. What are you trying to accomplish with the -5000px text indent? I'm guessing that if that indent were removed, IE 6 would work. You may be wanting some text in the link for SEO purposes, but for a PDF of your resume? Just make it an image, or better yet make it text with a background image (forget the -5000px text indent). If you text is completely off the screen, there is no point of even having it there.

    I also recommend doing away with the varying colors on the text "ITA" and "ENG". It is kind of a neat idea (considering that these are different country colors), but it fails hard because it is difficult to read on the black background. It will be a much impressive for those people looking at your site (especially if they are graphic design people) if your site is readable. It is a huge deal for graphic design people to have things be easy to read and navigate.
     
    ChaosFoo, Jan 21, 2008 IP