::selection will not work at all

[LukeDaly]

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.

[Paulie_D]

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

[LukeDaly]

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.

[Paulie_D]

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?

[LukeDaly]

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?

[Paulie_D]

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.

[LukeDaly]

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.

[Paulie_D]

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.

[LukeDaly]

@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.

[Paulie_D]

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

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

[LukeDaly]

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

[Paulie_D]

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.

[Paulie_D]

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!

[pmac627]

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.

[Paulie_D]

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.

[Author]

Posts