LukeDaly

# November 20, 2012 at 4:01 am

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

# November 20, 2012 at 4:37 am

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

LukeDaly

# November 20, 2012 at 4:40 am

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

# November 20, 2012 at 4:46 am

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

# November 20, 2012 at 4:49 am

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

# November 20, 2012 at 4:51 am

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

# November 20, 2012 at 4:53 am

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.

ToxicFire

# November 20, 2012 at 4:54 am

according to MDN doc’s its normal behavior without targeting elements, what browser are you using @luke ?

Paulie_D

# November 20, 2012 at 4:56 am

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

# November 20, 2012 at 5:11 am

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

//codepen.io/anon/pen/ebuGC

how about that @Paulie_D sorry never used codepen before.

Paulie_D

# November 20, 2012 at 5:41 am

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.

LukeDaly

# November 20, 2012 at 5:53 am

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

Paulie_D

# November 20, 2012 at 7:07 am

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.

alexmccabe

# November 20, 2012 at 7:45 am

[Does this work for you?](//codepen.io/alexmccabe/pen/eFBDn “::selection”) I added a pen of some code that I used.

alexmccabe

# November 20, 2012 at 7:48 am

I found the problem, your date holder JS is breaking the whole CSS styling. I deleted it and everything worked fine.