Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Apr 2004
    Posts
    5
    Member #
    5630
    Hey everyone

    I made a page that has a menu div on the left. Within that div is a list of links that surround paragraphs, like this:
    <a href=""><p>blabla</p></a>

    A css file make the <p> element's background's colour change on mouseover:
    p:hover {background-color: #ffffff}

    In netscape the whole paragraph's background changes colour as designed and works as a link

    In IE, as I expected, colours don't change but that's fine because IE doesn't treat the whole <p> as link, only the text.

    The problem is that I can't set text decorations or colours for links using CSS (A:link, A:visited... {color:#ffffff} so the links are blue and in IE they are underlined

    Is there a way to define the colour and decoration? The glowing blue really kills the look of my page and makes it very hard to read the text.

    I understand that may be a silly question, and perhaps it has been awnsered before. I searched the forum without success but if the awnser is already there, please consider posting the link instead of kicking my very dear bucket.

    gros bibi,
    Greg

  2.  

  3. #2
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    So your question is how to style links with CSS?

    Well first of all, just so you know, IE does not support the :hover pseudoselector for anything other than links (a:hover).

    As for styling links all you need in your css file is this:

    a { styles go here }
    a:active { styles go here }
    a:visited { styles go here }

    If you want to style some links differently than others, define the different links with a class (i.e. <a class="differentlink"></a>) and i the css reference that class like this:
    a.differentlink { styles go here }

    I think that answered your question
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  4. #3
    Junior Member
    Join Date
    Apr 2004
    Posts
    5
    Member #
    5630
    Cheers, but I did that and the problem is css styles work with a purely textual link (<a>Bunny</a>) but not when the link is around a paragraph tag

    I'd like to keep the anchor around the paragraph for esthetic reasons, but I guess I can do without it.

    I actually checked the page on my brother's laptop and the stylings work...It's strange because he has the same version of IE (5).

  5. #4
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    This may sound stupid, but IE is stupid too, so...
    Change the order of the tags, in place of:
    Code:
    <a href="----"><p>Bunny</p></a>
    use:
    Code:
    <p><a href="----">Bunny</a></p>

  6. #5
    Junior Member
    Join Date
    Apr 2004
    Posts
    5
    Member #
    5630
    well I guess I have to dump my neat effect then...
    Anyway, I'll revert to a simple textual link like xarst suggests

    Maverick and Xarst, thanks for the help

  7. #6
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    What xarst means, I think, is to put the <p> tags outside the <a> tags, but you can still have the paragraph as a link I feel.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  8. #7
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Yes, that's what I mean. It doens't seems very smart, but so is IE anyway!

  9. #8
    Junior Member
    Join Date
    Apr 2004
    Posts
    5
    Member #
    5630
    justlivyalife, are you saying that even with a script such as:
    <p><a href="">bunny</a></p>
    I could have the entire paragraph work as a link?
    Thad would be nice, but how do I achieve this? Javascript trick? Or some browser hack with two links (one inside the paragraph for IE and the other outside for Netscape)?

  10. #9
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    I think u aren't understanding what they mean, the entire paragraph will still be a link, just in your code , the "a" tag will be nested inside of the "p" tag, instead of the other way around. Here is another example:

    <p><a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis. Morbi aliquam, nulla eu posuere vehicula, est nibh tincidunt magna, sodales hendrerit metus arcu a arcu. Etiam pulvinar, enim a pulvinar bibendum, massa ante dictum eros, ac scelerisque felis erat non wisi. Aenean dictum volutpat urna. Sed ut neque ac tellus tincidunt semper. Mauris egestas, pede non scelerisque dapibus, felis lacus porta odio, at nonummy quam urna ac massa. Nulla facilisi. Aliquam dolor odio, eleifend ut, faucibus quis, nonummy et, metus. In faucibus orci nec ligula tempus mollis. Donec eu nisl. Sed metus ipsum, vehicula et, euismod eget, lobortis eget, mi.</a></p>
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  11. #10
    Junior Member
    Join Date
    Apr 2004
    Posts
    5
    Member #
    5630
    yes that makes sense, sorry I think I didn't explain my problem properly (and probably came across as a fruit pastille in the process)

    I was referring to the entire space taken by the <p>, so that includes blank space around the text since the <p></p> tag spans across the entire div it is nested in. So the link isn't just text, but also the blank space around.

    I put an example online: www.tinkerknell.com

    Look at the left div with three links: Europa India and Asia. Each item is in a paragraph, and it stretches across the div. Under Netscape, the whole bar illuminates and I quite like that.

    The problem I have is that on two machines I've tested with IE (v5.50) the browser ignores the rules for the links and displays them blue and underlined. This only happens if the links are around the paragraph.

    It seems to be an isolated problem: I've tested the page on other IE browsers on other machines and it works fine. So it appears it is due to a browser hickup of some sort, and not bad html/css.

    Sorry about the misunderstanding, and thanks for your time everyone. Cheers.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:11 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com