cancel
Showing results for 
Search instead for 
Did you mean: 

Missing CSS code selectors

TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Missing CSS code selectors

According to https://modern.ie/en-us/report#http%3A%2F%2Fplus.net
You are missing a little bit of code Wink
[code= CSS]Internet Explore rmodern.IE
Share modern.IE  Send feedbackSend site feedback to help us improve modern.IE.
© 2014 MicrosoftHello from Seattle.
Terms of Use Trademarks Privacy and Cookies
List of selectors
The following is a list of missing selectors and their properties that may be causing compatibility problems. For example there may be a -webkit-box-shadow property but no box-shadow property, preventing non-WebKit browsers from rendering box shadows.
Location: http://www.plus.net/css/core.css?1410836...
Selector Property Source line #
html text-size-adjust 1
button -moz-appearance 1
button appearance 1
input[type%3D"checkbox"] -webkit-box-sizing 1
input[type%3D"checkbox"] -moz-box-sizing 1
input[type%3D"search"] -moz-appearance 1
input[type%3D"search"] appearance 1
input[type%3D"search"]::-webkit-search-cancel-button -moz-appearance 1
input[type%3D"search"]::-webkit-search-cancel-button appearance 1
body Missing Old Webkit (Safari 4+, Chrome) gradient 2
input[type%3D"text"]:focus -webkit-box-shadow 2
input[type%3D"text"]:focus -moz-box-shadow 2
.field -webkit-border-radius 2
.failed -webkit-border-radius 2
.button -o-transition 2
.button:hover -o-transition 2
[/code]
Hope this helps Smiley
Also 182 errors 614 warnings, reported http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fplus.net&profile=css3&usermedium=all&w...
& 43 reported http://validator.w3.org/check?uri=plus.net&charset=%28detect+automatically%29&doctype=Inline&group=0...
may be of some help Wink
P.S
Also the code for us to implement  on our own websites referrals has outdated / obsolete code
Here is the reported correct version minus my redacted referral ID
[code= Referrals] <div><a href='http://www.plus.net/myreferrals/new.html?intReferrerID=[redacted]'><img src='http://www.plus.net/images/referrals/bb_banner_599.gif' alt='Broadband from &pound;5.99 a month with an included wireless router when you sign up to Plusnet - terms apply' ></a>
   </div>
   [/code]
The edited parts are now replaced with CSS
.referrals {
text-align: center;
border="0"
{

Here is the unedited code for clarity
[code= Unedited Referrals]<div align='center'><a href='http://www.plus.net/myreferrals/new.html?intReferrerID=redacted'><img src='http://www.plus.net/images/referrals/bb_banner_599.gif' alt='Great value Unlimited Broadband from an award winning provider' border='0'></a></div>[/code]
26 REPLIES 26
dvorak
Moderator
Moderator
Posts: 29,497
Thanks: 6,627
Fixes: 1,483
Registered: ‎11-01-2008

Re: Missing CSS code selectors

i'm sure it's of no help whatsoever - the only help that site would be is to say 'stop using IE'
Customer / Moderator
If it helped click the thumb
If it fixed it click 'This fixed my problem'
Pettitto
Plusnet Alumni (retired)
Plusnet Alumni (retired)
Posts: 6,346
Fixes: 5
Registered: ‎26-11-2011

Re: Missing CSS code selectors

Do any of the webpages display abnormally for you?
There's only a certain amount of support we can offer for the different browsers and their respective versions.
TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Re: Missing CSS code selectors

@Dvorak
First of all the https://modern.ie/en-us/r...ort#http%3A%2F%2Fplus.net
Has only reported those selectors, that are required, it does not tell you to use them on every selector,
For examples
Missing -webkit- selectors will affect Chrome based browsers for
Missing -moz- selectors affects Mozilla based browsers
Missing -ms- selectors affect Internet Explorer browsers
Missing -o- selectors affect Opera browsers
Missing -khtml- selectors affect Konqueror browser
And so on
Plus it also to a degree future proofs for new browser / revisions etc, when the new standards are completed fully / taken onboard & implemented
Therefore IE: browsers are not the only ones affected for the missing behaviour selectors
Plus it is a no brainer as it gives the selector & which lines (places) they need to go (simple copy & paste) into place can suffice as the Values are most likely be in there alternate code eg: [code= browser-examples.css]
.td {
 
    -webkit-column-width: 100px; /* For Chrome / Safari based browsers */
    -moz-column-width: 100px; /* For Mozilla based browsers */
    -ms-column-width: 100px; /* For Microsoft Internet Explorer browsers */
    -o-column-width: 100px; /* For Opera based browsers */
      column-width: 100px;  /* standard */
}
/* There are some selectors that may not require the alternate selectors eg.. */
.newspaper {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}[/code]
The trick, however is knowing where & when they need to be used & sites like https://modern.ie/en-us are a useful tool for such a purpose
As for telling / advising people from across the globe, to (not to use IE:) you might as well tell / advise people not to use Mozilla / Chrome / Opera etc based browsers @ the same time
Quote from: dvorak
i'm sure it's of no help whatsoever - the only help that site would be is to say 'stop using IE'

The exact opposite as it helps one spend less time testing for IE (does not mean (DO NOT USE IE)
Quote
What's this tool about? Today it can take a lot of time to make your web experiences look great (or just work) across various browsers and devices. This tool detects common coding practices that may cause compatibility problems or prevent your users from getting the best possible experience on a webpage. Whenever possible we suggest a fix or enhancement with web standards like HTML5 & CSS3 (or a graceful fallback). It's not a complete checklist for coding the modern web – just a starting point so you can spend less time testing for IE and more time building what matters on the web.

It may be worth visiting http://www.sitepoint.com/web-foundations/vendor-specific-properties/

@Chris
Not that I can tell @ the moment however I as I have not visited every webpage you currently have, with the several main browsers, that will take a copious amount of time, plus it may affect some pages we have no access to, that you do, & as you are likely not to use several browsers on a general daily routine to visit any of those pages that are possibly affected in a different browser from the norm, will have to be updated as & when any expected behaviours do not present themselves on a different browser, from your routine

AndyH
Grafter
Posts: 6,824
Thanks: 1
Registered: ‎27-10-2012

Re: Missing CSS code selectors

FYI it says 'Suggested Enhancement' and I tried google.com facebook.com bbc.co.uk apple.com and they all had exactly the same suggested enhancements. Maybe you should contact them also?
TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Re: Missing CSS code selectors

Yes the enhancements my be similar
Yet the CSS will differ
& FYI

Plus I also linked to other well known tried & tested checkers
Quote
Also 182 errors 614 warnings, reported http://jigsaw.w3.org/css-...;vextwarning=&lang=en
& 43 reported http://validator.w3.org/c...lidator.w3.org%2Fservices

The enhancements refer to, several different aspects which I never mentioned as per the title of the thread


Using a support site provided via another member differs in results to that of the BBC for an example
First http://www.npr.me.uk

Next bbc.co.uk

CSS

Now for Facebook  CSS for clarity

Can you now see a difference or 2 ?Huh
Whilst bbc & facebook share the same headed enhancement results, there are clear differences
& which of the three mentioned site(s) also run into frequent issues / slow to load etc ?Huh

jelv
Seasoned Hero
Posts: 26,785
Thanks: 971
Fixes: 10
Registered: ‎10-04-2007

Re: Missing CSS code selectors

Let me get this right: you are suggesting effort is diverted to investigating theoretical CSS errors which have no visible ill effects when browsing the site when at the same time as there are major issues meaning hundreds of thousands of Plusnet users totally lose their internet connection? Sheesh!
jelv (a.k.a Spoon Whittler)
   Why I have left Plusnet (warning: long post!)   
Broadband: Andrews & Arnold Home::1 (FTTC 80/20)
Line rental: Pulse 8 Home Line Rental (£14.40/month)
Mobile: iD mobile (£4/month)
TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Re: Missing CSS code selectors

@jelv
I thank you kindly for your constructive criticism, I am sure it will be very highly valued Wink
I also make no apologies, for trying to help Smiley
You mean like:
When customers report that pages like the speedchecker / gateway etc, not 100% / not working for them ?Huh
Also the reported pages not working, have been ongoing of & on for a fair while (as been noted many a time on these boards
The outage which has also affected me is recent in comparison
Have you heard of the saying
"For warned, is for armed"
Yes I am aware that the outages does & will always take precedence & this thread ain't going anywhere (is it) so it can be referred back to as & when viable to do so
P.S
CSS does not only affect the visual (what can be seen), it also affects how many  different aspect behave etc like animations / transformations
A classic well known page with issue(s) is the speedchecker page


ejs
Aspiring Hero
Posts: 5,442
Thanks: 631
Fixes: 25
Registered: ‎10-06-2010

Re: Missing CSS code selectors

Which part of the main plus.net website doesn't work for you?
Perhaps you'd like to download the plusnet .css files, make all the changes you feel are needed, and supply the fixed versions?
pwatson
Rising Star
Posts: 2,470
Thanks: 8
Fixes: 1
Registered: ‎26-11-2012

Re: Missing CSS code selectors

TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Re: Missing CSS code selectors

Lucky for me I keep all my browsers up to date, & tend not to run into many issues, & as I stated above i have not visited every single page that Plusnet currently has open to the public / members
I dont use IE unless I require an alternate browser to test for various reasons / sites
I don't own a mac
I vary rarely use linux (approx 2 - 4 times per year)
I don't personally use win8 / 8.1
So unfortunately I am unable to test on all platforms etc
P.S
As DCT have already had their work cut out recently
Wink I already have a working draft, in motion Wink

@pwatson
Hahahaha
My site does not have any CSS errors as I had already fixing mine as a result of the reports from them there linked sites
however as there are many a reported issue with some pages of Plus.net I thought it was worth a test, & report it if I felt it necessary
Plus my site will not get anywhere near as interactive as plusnets
& or
The same amount of clients (would be nice though)
Thanks anyway, for your concern & updated report  Wink

P.P.S
We no longer use torfaenpcrepair.webs.com & haven't for over a year & there are references to the not so new site named http://torfaenpcrepair.com on there as webs.com produced so many downtimes / errors, that we also changed to a paid host, & hand code it.
See the report @ https://modern.ie/en-us/report#http%3A%2F%2Fwww.torfaenpcrepair.com
Also look in the CSS tab of  http://torfaenpcrepair.com/index-testing-page.html results & you will see there is a working draft named plusnet.css which is currently affecting the results.
    <!-- Start of the Linked StyleSheet section -->
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/plusnet.css" rel="stylesheet" type="text/css" />      /* Linked plusnet.css */
<link rel="prerender" href="../brackets.html" />
<link rel="prerender" href="../css/layout.css" />
<link rel="prerender" href="../css/menu.css" />
<link rel="dns-prefetch" href="../brackets.html" />
<style type="text/css">
    <!-- End of the Linked StyleSheet section -->
ScottStorey
Pro
Posts: 410
Thanks: 130
Fixes: 1
Registered: ‎21-02-2013

Re: Missing CSS code selectors

Just to address some of the points in this thread.
As a development team we have a set of coding standards that we adhere to this ranges from technical standards to "common sense" standards such as the code should do what it was designed to do.
All code is reviewed by a senior developer and if it doesn't meet the coding standards it is sent back to be reworked until it does.
There is also a requirement that unit tests are written to cover the lowest level of code we can test and these are executed every time a module is built. Any failures are picked up, fixed and re-reviewed.
As QA we will write manual tests to cover whatever is being developed, again we have set standards which we adhere to. These are then reviewed by a senior QA before being executed against the code. We will go through this manual scripted testing 3-4 times as more code is merged together to make sure there are no unexpected dependencies between code that causes issues.
We will also where appropriate automate these so they can be re-run in the future, generally this will be to cover new functionality being developed. For example, the new provisioning system you keep hearing about has a lot of automation around it.
We will also perform exploratory testing where we just use our experience to find issues with new pieces of software.
For web development work, one of the requirements is cross browser testing. We will test across all our most popular browsers to ensure compatibility. One of the testing principles is that exhaustive testing is not possible. It is simply too time consuming.
My favourite example of this is In an application in one screen there are 15 input fields, each having 5 possible values, then to test all the valid combinations you would need 30  517  578  125  (515) tests. Now imagine doing that across every browser in existence. This is why we only focus on the most popular browsers used on our site.
A big part of webdev testing is the look and feel of the changes. We take these seriously and can spend a lot of time on it for things most people probably won't notice. For example, in the past I've failed some bodies code because things were a couple pixels out of alignment.
At the end of the day, as a development team, we are a bunch of people in a professional occupation and take pride in our work. We have people with lots of experience from many different backgrounds and some very big companies.
In the grand scheme of what we do, some CSS selectors not matching an automated checker is an extremely minor issue considering the site looks like and does what it should do.
Some issues will always get through but thankfully these are normally relatively minor.
The TL;DR version for people:
We have robust processes and a lot of experienced and professional people looking after the site.
jelv
Seasoned Hero
Posts: 26,785
Thanks: 971
Fixes: 10
Registered: ‎10-04-2007

Re: Missing CSS code selectors

@TORPC
You still haven't posted to say what doesn't display correctly on a particular browser. Screen shots of the displayed pages showing the issue(s) would be good.
jelv (a.k.a Spoon Whittler)
   Why I have left Plusnet (warning: long post!)   
Broadband: Andrews & Arnold Home::1 (FTTC 80/20)
Line rental: Pulse 8 Home Line Rental (£14.40/month)
Mobile: iD mobile (£4/month)
TORPC
Grafter
Posts: 5,163
Registered: ‎08-12-2013

Re: Missing CSS code selectors

Hi Scott
Thank you for taking the time to post such an informative explanation Smiley
Whilst  I understand & appreciate all the hard work that goes into it by the team, & kudos to all & sundry for doing a great job & it is not easy, especially where IE is concerned & there being many changed standards over the years & hopefully HTML5 & CSS3 are here to stay for longevity, however as you so aptly mentioned "Some issues will always get through but thankfully these are normally relatively minor" (missing selectors can be both a minor or major issue),
I understand where as a whole one would code for the most popular of browser used on their site.
If as you say
"As a development team we have a set of coding standards that we adhere to this ranges from technical standards to "common sense" standards such as the code should do what it was designed to do.
All code is reviewed by a senior developer and if it doesn't meet the coding standards it is sent back to be reworked until it does."
How come that the code is currently missing a copious amount of "selectors" & a lot in a non orderly best practice orders as check by the most popular of CSS checkers that have been tried & tested for many a year ?Huh
@ the moment it is still currently attached to http://torfaenpcrepair.com/index-testing-page.html with all selectors up to date for you to pull & have your team review (if you so wish)
As you will see by the comments when you compare them side by side, there were clear times when the selector(s) were all present (just the odd one or two missing) & clear cases where they weren't in place & some was just & yes I know how easy it is to miss out code especially when one is on a deadline / overworked / tired / stressed out etc.
& you will always have parsing error(s) due to the use of IE6/7 workarounds /  & Property appearance doesn't exist errors & no doubt will / should get flagged as it is not supported in any of the major browsers.
[quote= http://www.w3schools.com/cssref/css3_pr_appearance.asp]Firefox supports an alternative, the -moz-appearance property.
Safari and Chrome support an alternative, the -webkit-appearance property.
There are two lines of code I can not work out why the stray characters are present, & why they are included (perhaps Scott or other Developer / DCT can shed some light on it)
.offer-callout:after {
  border-width: 12px 6px 0 6px;
  border-style: solid solid none solid;
  border-color: #e8008c transparent transparent transparent;
  bottom: -12px;
  right: 24px;
  z-index: 20;
  position: absolute;
  display: block;
  width: 0;
  Ôö£├®                                height: 0;
  Ôö£├®;
Also note:
rem is not a value & was present approx 3 times (suspect  a typing error)
font-size: 1.4rem;
Now amended in my revision
}

I suspect the use of normalizer may be possibly responsible for the stray characters & that they are most likely not required
These are just some examples & there are a few others to boot Wink
@jelv
Have you inadvertently missed out on reading my earlier post ?Huh
Some parts I will make bold for you Wink
Quote from: TORPC
Lucky for me I keep all my browsers up to date, & tend not to run into many issues, & as I stated above i have not visited every single page that Plusnet currently has open to the public / members
I dont use IE unless I require an alternate browser to test for various reasons / sites
I don't own a mac
I vary rarely use linux (approx 2 - 4 times per year)
I don't personally use win8 / 8.1
So unfortunately I am unable to test on all platforms etc

To sum that up & to put into laymans terms
I am not currently experiencing any issues on any of the pages I frequent on http://plus.net
However I am yet to explore every single webpage that Plusnet has open to the public (as mentioned above)
Also one needs to take into consideration that some members have flagged up pages like the gateway / speedchecker page(s)  not working for them, (that may / may not be CSS related due to missing selector(s) for that browser)
the gateway page, is also not the only page that has been flagged by members for not working as they should for them & due to an extensive amount of selectors missing including those for the speedchecker page (which has also been flagged then it does not / will not hurt for the missing selectors to be added (which I have spent my free time in doing so in a bid to help the DCT & developers.
ejs
Aspiring Hero
Posts: 5,442
Thanks: 631
Fixes: 25
Registered: ‎10-06-2010

Re: Missing CSS code selectors

The gateway checker not working is almost certainly to do with either a range of IP addresses newly used by plusnet not being recognised by the gateway checker, or incorrect reverse DNS entries for new gateways / endpoints. Entirely backend issues, nothing to do with browser display.
Most complaints about the BT speedtester were about it not being able to retrieve the IP profile from the BTWholesale system. Again, an entirely backend system, nothing to do with how the page displays in a web browser.