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.

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.

http://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.

Paulie_D

# November 20, 2012 at 7:53 am

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

# November 20, 2012 at 8:03 am

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

# November 20, 2012 at 8:08 am

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.