Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with text-decoration: underline in WebKit

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #32099
    Arde
    Participant

    Why doesn’t underline behave correctly in WebKit browsers, is this a bug or feature? In Firefox it works just fine.

    It just shows it as a 1px underline even with a big font? How to fix this? I’m trying to add shadows to H1 and it looks like i have to add bottom border to fix this. But when i want to add shadow to this bottom border to make it look smart i would have to put it in div. So it this the only way to go?

    Sample code:





    text-decoration-underline







    text-decoration: underline



    #54432
    TheDoc
    Member

    I’m pretty sure that’s just how it works.

    For me, it’s much preferred, but I can understand where you’re coming from.

    #54436
    TheLeggett
    Member

    You could use border-bottom instead to create a thicker underline. It would be a bit more tricky to add a drop shadow to the border though (I’m thinking you might be able to make something work with box shadow).

    Here’s one way you could do it with pseudo classes:

    h1 {
    display:inline-block;
    text-shadow:1px 3px 5px #ccc;
    font-size:36px;
    }
    h1::after {
    display:block;
    height:5px;
    background:#000;
    content:'';
    width:100%;
    clear:both;
    box-shadow:1px 3px 5px #ccc;
    }
    #53775
    Arde
    Participant

    @TheLeggett I can not get the shadow show up on your solution. Maybe i’m doing something wrong. I’m pretty new with preudo classes.

    My clumsy solution to the problem where like this:





    text-decoration-underline






    text-decoration: underline



    #53776
    TheLeggett
    Member

    That works too, it’s just a bit more syntax heavy. As far as I’m concerned though, if that’s a style you need, and that’s the only way you can implement is in all the browsers you’re designing for, it’s a good solution.

    #53778
    Arde
    Participant

    @TheLeggett my bad.. Your solution works just fine on WebKit. For some reason I looked at it only in Firefox, and your code did not have moz shadow :) I am still wondering how this pseudo class solution works with IE. Thanks for the help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.