Unexpected CSS Result Using IE8 with Styling Links

Unexpected CSS result using IE8 with styling links

Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link first, then :visited, then :hover, then :active for consistent cross-browser results.

Additionally, any style applied to :link doesn't need to be reapplied to :visited, :hover, or :active unless you want to override it with a different value. For example, when you declare text-decoration:none for :link, you don't need to put that in any other definitions except for :hover, where you want to override it to none. Since all of the styles except for :hover are the same, you can kind of bypass the LVHA order here:

a:link, a:visited, a:active {
    color: #0064cc;
    font-family: Arial;
    font-size: 13px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Hope this helps!

Edit

Although your issue isn't related to your use of !important, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.

HTML href - Hover not systematic

Look at your style for visited links:

A:visited {color: #1c1c1c;text-decoration:none;}

I would be willing to bet the ones you are not seeing change color are links you have already visited.

I can confirm this behavior (in Chrome). Once I visit one of the links in your example, it no longer reacts with the hover style.

The order in which you declare the rules matters. You can make the :hover state take precedence by altering the order of the rules and putting :hover after :visited:

A:link {color: #1c1c1c;text-decoration:none;}
A:visited {color: #1c1c1c;text-decoration:none;}
A:hover {color: #3d62e7;}

CSS bugs in FF and IE? Transition including borders yielding unexpected results in both. Or how would I align the behavior?

To have a round div you set the border to 50% of the width/height, more might cause unpredictable result, which might explain the border differences.

If you change the border from 99px to 9px and set the border-radius to 100px it seems to work in IE/Edge/FF/Chrome equally, though the dotted border differs.

And according to this, Firefox has a border/radius bug, https://bugzilla.mozilla.org/show_bug.cgi?id=382721, where when you combine border-radius and dotted style, it shows a solid border instead of a dotted.

How can I find the css error when I run a jquery plugin on IE8?

i think there is noany way to find exactly where or in which line your error is... just try to know about IE8 tag using or check this link may be it helps you..

http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

LinkButton color not changing

Ok this is a very interesting question and I should say that I've found a trick to do this, which is quite possible to use it across the whole application, so here is my solution:

You can use the same OnPreRender="LinkButtons_PreRender" on your link buttons only once and then you will have something like this on your aspx:

 <asp:LinkButton ID="LinkButton1" runat="server" 
        OnClick="LinkButton1_Click" OnPreRender="LinkButtons_PreRender">LinkButton</asp:LinkButton>

 <asp:LinkButton ID="LinkButton2" runat="server" 
        OnClick="LinkButton2_Click" OnPreRender="LinkButtons_PreRender">LinkButton</asp:LinkButton>

and in your code behind you can fix this like the code below:

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Session[((LinkButton)sender).ID + "visited"] = System.Drawing.Color.Purple;
        // your code here
    }

    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        Session[((LinkButton)sender).ID + "visited"] = System.Drawing.Color.Purple;
        // your code here
    }

    protected void LinkButtons_PreRender(object sender, EventArgs e)
    {
        LinkButton lnkbtn = (LinkButton)sender;
        lnkbtn.ForeColor = (System.Drawing.Color)(Session[lnkbtn.ID + "visited"] ?? System.Drawing.Color.Blue);
    }

And that's it! here is the result:

(Performance hint: always kill the sessions when you don't need them)

Unexpected result from CSS and jQuery

If use > will denote children only

#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}

Also note looking for <a> of last child <li>

DEMO

Why does this simple negative text-indent on list items works in all browsers except IE8?

UL and LI elements are block level elements... that's probably why its unpredictable on a browser level. How about wrapping that text in a p tag and then applying the text-indent since it's not intended for block level elements.

<style type="text/css">
    .indent { text-indent: -20px; padding-left: 20px; }
</style>

<ul>
    <li><p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis mi sit amet mauris varius ut viverra magna eleifend. Aliquam viverra, magna sed mollis adipiscing, libero mi adipiscing ante, ut hendrerit lacus leo id elit. Nulla commodo mi nec nulla ornare congue.</p></li>
</ul>

EDIT

So just in case my response was unclear... list items are used for a number of things besides containing text. Some sites use them for layout. List items also have padding and properties like list-style which allow you to control the image used for each list item.

So with that being known, it would seem that asking a list item to text-indent could be handled a couple ways. You could indent any containing text or maybe the indent is referring to the list item itself, including the image ;) I bet this decision is left up to the browser and therefore is subject to be handled differently between versions.

Hope that helps to clarify where I was going with that.

---

Related Topics