Skip to main content

Forums

This topic contains 18 replies, has 0 voices, and was last updated by  LukeDaly 6 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #40885

    LukeDaly
    Participant

    Hey guys having a bit of a problem I cant seem to get

    ::selection {
    background: #ffb7b7;
    }

    ::-moz-selection {
    background: #ffb7b7;
    }

    to work at all on a site I am working on is there any reasons why this wouldn’t work?

    Thanks, Luke.

    #114851

    Paulie_D
    Moderator

    What element are you applying it to, it won’t work on it’s own?

    #114852

    LukeDaly
    Participant

    I am trying to apply it to the whole website, It just doesn’t seem to be working…
    I tried targeting the body, the container div basically everything I can think of and still haven’t had any luck.

    If there is any other way to achieve this effect I am all ears.

    #114854

    Paulie_D
    Moderator

    Interesting…it works in Codepen without targeting an element…I’m not sure that is proper behaviour but whatever.

    You could try the universal selector

    *::selection {
    background: #ffb7b7;
    }

    *::-moz-selection {
    background: #ffb7b7;
    }

    Otherwise, I’m wondering if it isn’t a browser issue.

    Perhaps you could put something in Codepen so we see what the issue might be?

    #114855

    LukeDaly
    Participant

    Just tried that, still no luck. Damn this is annoying, probably something so stupid to. Is there anything that would cancel this out or stop it working correctly?

    #114856

    Paulie_D
    Moderator

    We can’t tell until we see the site in question. It could be something fundamental or something in a css setting that is overriding it.

    #114858

    LukeDaly
    Participant

    Here is the sites CSS, yes I am a noob still.

    @font-face {
    font-family: ‘grosregular’;
    src: url(‘gros___-webfont.eot’);
    src: url(‘gros___-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘gros___-webfont.woff’) format(‘woff’),
    url(‘gros___-webfont.ttf’) format(‘truetype’),
    url(‘gros___-webfont.svg#grosregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘nexa_lightregular’;
    src: url(‘nexa_light-webfont.eot’);
    src: url(‘nexa_light-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘nexa_light-webfont.woff’) format(‘woff’),
    url(‘nexa_light-webfont.ttf’) format(‘truetype’),
    url(‘nexa_light-webfont.svg#nexa_lightregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    body{
    background-color:#e7e8e9;
    font-family:’grosregular’;
    }

    #header-1{
    width:152px;
    height:193px;
    margin-left:auto;
    margin-right:auto;
    padding-top:37px;
    }

    #header-2{
    background-image:url(images/datebox.png);
    background-repeat:no-repeat;
    background-position:0px 2px;
    width:152px;
    height:90px;
    margin-left:auto;
    margin-right:auto;
    }

    #dateholder{
    font-size:8px;
    color:#FFF;
    width:72px;
    margin-left:auto;
    margin-right:auto;
    padding-top:45px;
    padding-right:64px;
    }

    #links{
    margin-top:auto;
    margin-bottom:auto;
    position:fixed;
    width:44px;
    }

    .linkholder li{
    font-size:8px;
    color:#FFF;
    list-style:none;
    text-decoration:none;
    }

    a:link{
    color:#c0c0c0;
    text-decoration:none;
    }

    a:visited{
    color:#c0c0c0;
    }

    a:hover{
    color:#ef4158;
    }

    a:active{
    color:#ef4158;
    }

    .date{
    display:block;
    color:#ef4158;
    }

    #container{
    width:308px;
    padding-left:auto;
    padding-right:auto;
    margin-left:auto;
    margin-right:auto;
    }

    #container p{
    font-size:8px;
    color:#c0c0c0;
    position: relative;
    padding-top: 7px;
    }

    .accent{
    color:#ef4158;
    font-size: 8px;
    }

    #container h1{
    font-size: 8px;
    color: #ef4158;
    font-style: none;
    text-decoration: none;
    font-weight: normal;
    padding-top:10px;
    }

    #weekwrapper{
    width: 148px;
    margin-left: auto;
    margin-right:auto;
    font-size: 8px;
    color:#c0c0c0;
    }

    #weekwrapper p{
    width: 150px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:5px;
    }

    #single_1 img{
    padding-top:3px;
    }

    #break{
    padding-top: 5px;
    position : relative;
    text-align : center;
    margin: 0 0 0 0;
    border-bottom : 1px solid #c0c0c0;
    }

    #astyle{
    padding-top:15px;
    padding-bottom: 12px;
    }

    .chooseapage ul{
    margin-left:auto;
    margin-right:auto;
    display:inline;
    list-style:none;
    text-decoration:none;
    float:left;
    }

    .chooseapage li{
    margin-left:auto;
    margin-right:auto;
    display:inline;
    list-style:none;
    text-decoration:none;
    float:left;
    }

    #container::selection {
    background: #ffb7b7; /* Safari */
    }

    #container::-moz-selection {
    background: #ffb7b7; /* Firefox */
    }

    #container::-webkit-selection {
    background-color: #FFA;
    color: #000;
    }

    *::selection {
    background: #c0c0c0;
    }

    *::-moz-selection {
    background: #c0c0c0;
    }

    Thanks for your help so far by the way, very much appreciated.

    #114860

    Paulie_D
    Moderator

    Unfortunately, the CSS alone won’t help. We need to to see the content as well, that’s why I suggested Codepen so we can see it in action.

    Unless you have a link to a live site of course.

    #114861

    LukeDaly
    Participant

    @ToxicFire
    Hey man thanks for the input, I am using chrome and Firefox to test this atm.

    http://codepen.io/anon/pen/ebuGC

    how about that @paulie_d sorry never used codepen before.

    #114863

    Paulie_D
    Moderator

    I don’t know why but if I take this out

    script type=”text/javascript” src=”jquery.fancybox-media”>

    a lot of the styling seems to start working where it wasn’t before.

    #114866

    LukeDaly
    Participant

    @Paulie_ D tried that there no still with no luck, damn this sucks.

    #114869

    Paulie_D
    Moderator

    Hmmm…there’s definitely something overriding it.

    I’ve tried stripping out the sections that shouldn’t be relevant but it might take a while to find it.

    Frankly, it’s not a huge issue, there are quite a few other things that need fixing in that code first but that’s another matter.

    If I can, I ‘ll take another look.

    #114873

    Paulie_D
    Moderator

    Aha…I knew it was a JS thing somewhere but I hadn’t had time to track it down.

    I didn’t want to re-write the whole page (which it sadly needs) because if I started listing all the errors I would come off sounding mean…oh, oops!

    #114875

    pmac627
    Participant

    Would the fact that the script @paulie_d pointed out (jquery.fancybox-media) be causing an issue because it was missing an extension? Not sure if it might have held a necessary component to the date holder? Probably not, but I figured it was worth pointing out.

    #114876

    Paulie_D
    Moderator

    Yeah, I noticed that too…but, as I said, I didn’t want to pile on too hard.

    I may have deleted that line after deleting the other scripts and perhaps Codepen hadn’t caught up before redrawing the page.

    I’m hoping that what is written on the actual page is actually a lesson plan still to come because if it’s stuff they’ve already covered I’m foreseeing an ‘F’ coming down the pike.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star