Missing CSS code selectors
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Feedback
- :
- Plusnet Feedback
- :
- Re: Missing CSS code selectors
Missing CSS code selectors
17-09-2014 4:06 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
You are missing a little bit of code
[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
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
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 £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]
Re: Missing CSS code selectors
17-09-2014 8:59 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
If it helped click the thumb
If it fixed it click 'This fixed my problem'
Re: Missing CSS code selectors
17-09-2014 10:12 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
There's only a certain amount of support we can offer for the different browsers and their respective versions.
Re: Missing CSS code selectors
18-09-2014 5:39 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
Re: Missing CSS code selectors
18-09-2014 7:04 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Re: Missing CSS code selectors
18-09-2014 8:16 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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 ?
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 ?
Re: Missing CSS code selectors
18-09-2014 9:20 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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) |
Re: Missing CSS code selectors
18-09-2014 8:41 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
I thank you kindly for your constructive criticism, I am sure it will be very highly valued
I also make no apologies, for trying to help
You mean like:
When customers report that pages like the speedchecker / gateway etc, not 100% / not working for them ?
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
Re: Missing CSS code selectors
18-09-2014 8:56 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Perhaps you'd like to download the plusnet .css files, make all the changes you feel are needed, and supply the fixed versions?
Re: Missing CSS code selectors
18-09-2014 9:18 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
In the meantime, pots and kettles spring to mind
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftorfaenpcrepair.com%2F
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftorfaenpcrepair.webs.com%2F
https://modern.ie/en-us/compat-scan#http%3A%2F%2Ftorfaenpcrepair.webs.com
Re: Missing CSS code selectors
18-09-2014 10:02 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
I already have a working draft, in motion
@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
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 -->
Re: Missing CSS code selectors
19-09-2014 2:57 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: Missing CSS code selectors
19-09-2014 3:47 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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) |
Re: Missing CSS code selectors
19-09-2014 5:58 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Thank you for taking the time to post such an informative explanation
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 ?
@ 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
@jelv
Have you inadvertently missed out on reading my earlier post ?
Some parts I will make bold for you
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.
Re: Missing CSS code selectors
19-09-2014 6:34 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page