SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with IE's formating of hrefs

    I noticed something really strange with ie and links.

    Depending on letters in href attribute in a tag, IE6 does or does not apply css rules.

    Namely:
    a href="./" does not work
    a href="./defau.aspx" works
    a href="./default.aspx" does not (only one letter difference)

    a href="bportalTabele.aspx?tabela=novosti" works
    a href="portalTabele.aspx?tabela=novosti" does not

    Have anyone had similar troubles?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you will have to show us an example as the code seems to work fine for me .

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul{list-style:none;}
    a{background:red;}
    a:hover{background:#ffffcc}
    </style>
    </head>
    <body>
    <ul>
    	<li><a href="./">works</a></li>
    	<li> <a href="./defau.aspx"> works</a></li>
    	<li><a href="./default.aspx">works</a></li>
    	<li><a href="bportalTabele.aspx?tabela=novosti"> works</a></li>
    	<li><a href="portalTabele.aspx?tabela=novosti"> works</a></li>
    </ul>
    </body>
    </html>
    What styles don't get applied ?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still trying to find when this happens. For instance, I uploaded files to server and wanted to give you link, but on server it works ok. At least for now.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    but on server it works ok. At least for now
    If you can find an example then I'll take a look but in reality it should make no difference what the links are in the href as the styles should still be executed. I am wondering if you aren't confusing it with another issue such as visited and normal states which will change depending on what you have set. Or whether you have inadvertantly introduced some invisible chatacters that could confuse the browser.

    If you can find an example then we will take a look with interest

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This was an IE bug related to display: none;
    It was solved using visibility: hidden;
    :-)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This was an IE bug related to display: none;
    It was solved using visibility: hidden;
    Don't forget that they are totally different things

    Visibility just hides the content but still leaves it there but just invisible. Display:none completely removes any trace of the element from the page.

    If it solves your problem then no worries

    I would still like to see an example of code

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understad the difference, but hey It works.

    You can check menu at: http://cssplay.co.uk/menus/final_drop.html.
    Stu repaired it after I reported this problem.

    Here is version which had problems with IE (slightly changed, to suit my needs):
    .menu {
    font-family: verdana, sans-serif;
    width:950px;
    font-size:0.85em;
    z-index:1000000;
    }
    .menu ul {
    padding:0;
    margin:0;
    list-style-type: none;

    }
    .menu ul li {
    float:left;
    position:relative;
    }
    .menu ul li a, .menu ul li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    height:3em;
    color:#000;
    border:1px solid #fff;
    border-width:1px 1px 0 0;
    background:#e7b7a5;
    padding-left:10px;
    padding-right:10px;
    line-height:3em;
    }
    .menu ul li a:hover {
    text-decoration: none;
    }
    * html .menu ul li a, * html .menu ul li a:visited {
    /*width:149px;
    w\idth:139px;*/
    display: inline;
    padding: 11px;
    }
    .menu ul li ul {

    display: none;
    }
    .menu table {
    position:absolute;
    top:0;
    left:0;
    border-collapse:collapse;
    font-size:1em;
    }
    .menu table td {
    text-align: left;
    padding: 0;
    }
    .menu ul :hover {
    color:#fff;
    background:#d37862;
    }
    .menu ul :hover > a {
    color:#fff;
    background:#d37862;
    }
    .menu ul :hover ul {
    display:block;
    position:absolute;
    top:3em;
    margin-top:1px;
    left:0;
    width:150px;
    }
    * html .menu ul :hover ul {
    margin-top:0;
    }
    .menu ul :hover ul li ul {
    visibility:hidden;
    position:absolute;
    height:0;
    width:0;
    }
    .menu ul :hover ul li a {
    display:block;
    background:#eecabe;
    color:#000;
    height:auto;
    line-height:1.2em;
    padding:5px 10px;
    width:229px;
    }
    * html .menu :hover ul li a {
    width:150px;
    w\idth:129px;
    }
    .menu ul :hover ul li a.drop {
    background:#faeec7 url(../../graphics/drop.gif) bottom right no-repeat;
    }
    .menu ul :hover ul :hover {
    background:#d37862;
    color:#000;
    }
    .menu ul :hover ul a.drop:hover {
    background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
    }
    .menu ul :hover ul :hover > a.drop {
    background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
    }
    .menu ul :hover ul :hover ul {
    visibility:visible;
    position:absolute;
    left:150px;
    top:0;
    width:250px;
    }
    .menu ul :hover ul :hover ul.left {
    left:-150px;
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Stu repaired it after I reported this problem.
    If you had given me that code earlier I would have fixed it for you when you first posted lol There was no mention of any of the above in tour first post.

    Visibility:visible just makes an element invisible. Its still there occupying the same space like the invisible man would.

    Display:none collapses all the space the element occupied so effectively there is no trace of it and it has no effect.

    In your example you can use both because you are using position:absolute which means the elemnt is already removed from the flow so whether its hodden or none isn't so much of an issue.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If you want you can

    If want,
    you can help me now

    Please take a look at http://81.93.74.18/berzanova with firefox. You can see that top menu is shorter (narrower) than page. How to fix this?

    Also take a look with Opera...

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really understand what to clear. I copied your code, but it doesn't solve problem.

    Please tell me more

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Sorry for the delay my phonelines been down all week.

    The background isn't showing on the ul because the list elements have floated out of it and therefore the height collapses to zero. You need to either clear the floats as All4nerds has already said or you could simply give a height to the ul taht matches the list items.

    Code:
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;height:21px
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •