Log in

View Full Version : CSS warning, colour in 2 contexts



bernie1227
06-13-2012, 09:33 AM
Hi guys,
So currently, through the W3C CSS validator, I'm getting a few warnings, and basically they're all the same kind of warning. The basic jist of it is:

Same colors for color and background-color in two contexts label.access-info and #masthead .strip-nav

Same colors for color and background-color in two contexts #columns and td.darkblue a


A couple of the warnings are to do with the background color being the same as the border of the table's color.

Unfortunately, however much this warning doesn't change anything, leaving it be is not an option, I would like valid CSS.

Any advice would be appreciated
thanks,
Bernie

ApacheTech
06-13-2012, 11:02 AM
erm... I'll take a wild stab in the dark and say, change the colours? :s






You can use color: transparent; to effectively "hide" borders, or just not have them visible at all, then they won't need a colour.

Also, the only reason you'd have text colour the same as your background colour is to hide the text. For this you can set display: none; to stop it from displaying on the page, or visibility:hidden; to hide it but keep the spacing.

If your colour scheme is causing validation errors, you may want to read up on Usability in Web Page Design. The colour scheme of a site is important to think about from your audiences perspective. Can your site be used by people with colour blindness? And remember there's more than one form of colour blindness. Most people won't struggle through trying to read a page if the information can be found easier with one of your competitors.

djr33
06-13-2012, 05:48 PM
That's just a warning. It's like a possible typo. Maybe you intended to have a typo for some reason, or more likely the computer just doesn't know that what you wrote is a word-- maybe it's in another language. There's no reason to change it just so that your text editor doesn't think it's a typo.
That's your situation here. Sure, you can use some of the tricks in the post above, but as long as you know why you're breaking the "rules", there's really no reason not to do it. Clearly having the same color in two places isn't going to hurt anything for compatibility, as long as you do want that look. Up to you though.

bernie1227
06-13-2012, 09:15 PM
Thanks guys,
Apache tech, your solutions are working fine thanks, Djr, I understand what your saying about how those warnings actually matter, I did clearly state in the question that ignoring them wasn't an option, but thanks anyway.
Bernie

djr33
06-13-2012, 09:55 PM
I understand. What I'm suggesting is that sometimes part of doing web design well is to know when to ignore standards. It's NOT often, but when it comes up and you have a good reason, it can be important. It's totally up to you and I realize there are other concerns.

ApacheTech
06-13-2012, 11:43 PM
It's true what djr is saying. The Web Standards are not laws.

With Web Page Design, it's nigh on impossible to please all of the people, all of the time. Infact, for those poor people still using Internet Explorer to view your site, a lot of the 100% valid markup is meaningless. And then you have the webkits and CSS toolkits and stuff that are perfectly valid but are not yet supported by W3C's validation system.

Have a look at the validation for google.com (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.google.com), even the big companies and the companies that sponsor Web Development don't have 100% valid markup.

Another thing to think about, a vicious circle if you will. To be valid, every web page needs to have a <!DOCTYPE .../> tag as it's first line. It is invalid to have a) no DOCTYPE, b) More than one DOCTYPE, or C) a DOCTYPE anywhere than the top of the page.

When you add an iframe to a page, assuming all your pages individually are 100% valid, you instantly invalidate the parent page because you're adding a second DOCTYPE into the body of the page. This can be seen effectively by using something like FireBug in FireFox. Taking the DOCTYPE out of either file will invalidate it, so you're stuck in a catch 22.

The Web Standards are idealisms. They are guidelines to writing effective and well formed code. For the most part, they are very important; they allow standardisation (of sorts) in webpage design over a large array of mediums and platforms. Where they fall down, however, is when you come to individual cases. The validator is a machine, it works through your code programmatically and doesn't always see they final end result of the page as the user would see it. The more involved the page (Partial page rendering, iframes, user authenication, dynamic content, ajax, database access, etc) the less it will perceive it to be valid; even though the page is displayed exactly as it should be with no conflicts.

Bottom line; get the important stuff right. Learn the fundamentals, try to work to Bullet Proof standards and write your pages for the benefit of the end user; but, when it comes to the snagging warnings and minor details within the validation, don't try to iron out every crease.

P.S. Pressing Thanks on helpful posts are always appreciated, if the information I provided before was beneficial to you. :D ;) *shameless vanity plug*

bernie1227
06-14-2012, 03:09 AM
Thanks guys,
I realize what your saying, and normally I would entirely agree, but this particular we page needs to be valid.

And yes, I was going to thank you anyway apache ;)
Bernie

ApacheTech
06-14-2012, 03:34 AM
May I ask why it needs to be valid 100%? Is it for an assignment?

Also, which IDE do you use for coding your pages?

keyboard
06-14-2012, 04:44 AM
@ApacheTech -
Very few web-designers actually use an IDE (With the exception of Dreamweaver). I believe that most people actually just use text-editors.

I believe he's using komodo....
Apparently not :D

bernie1227
06-14-2012, 04:58 AM
Currently I use aptana studio.

ApacheTech
06-14-2012, 01:07 PM
@ApacheTech -
Very few web-designers actually use an IDE (With the exception of Dreamweaver). I believe that most people actually just use text-editors.

I believe he's using komodo....
Apparently not :D

Ahh. I've only ever used IDEs for webdev. I use Notepad or Notepad++ for small edits but I've been using Visual Studio now for about a decade and never looked back.

ApacheTech
06-14-2012, 01:25 PM
Bernie.

Does the IDE you use have validation features? You can usually get pages to 99% valid just through those, then just work out the snagging problems.

keyboard
06-14-2012, 11:21 PM
Ok, are you using express or full edition apache tech? I've only ever use it for vb.net but I did quite like it and try "Visual Web Developer 2010 Express".

ApacheTech
06-15-2012, 12:14 AM
I've got Visual Studio 2010 Professional SP1. As I'm a student, I can get it for free from Microsoft Dreamspark. :D Dreamspark has some brilliant programs on it, available to every student for free.

I've used the express editions, I have them on my server rig (my uni email address isn't active atm, until I re-enroll) and they do everything they need to, I just like everything being in one application. Microsoft do a proprietary addon called vs.PHP that adds intellisense and development rendering support sorts for PHP. Phalanger is an open source version of it, still currently in Beta.

Visual Studio is vastly underrated in my opinion. It has some amazing extensions that plug and play with no problems. It even has support for the major CMS's such as Joomla!, WordPress, Umbraco, DotNetNuke and even MediaWiki and DocuWiki. There's FBML and FQL support for writing Facebook canvas applications; support and intellisense for PERL, RoR, LINQ, Python, C, C++, VB, C#, F# and even, believe it or not, Delphi!

I know we're starting to veer wildly off track here, so to steer it back on course...

IDE's, in my opinion, form an essential part of Web Development. When building Web Applications, having the intellisense and auto-complete and various other functions that an IDE has, it allows you to be more pro-active and constructive in your coding. Being able to write a fully formed website in Notepad is fine for the ego and all power to those who do, but I've found in the past few years within the Web Development community, IDE's are seen as cheating, or "lame", or not l33t. I'm not a fan of elitism in Web Development, it's like the script kiddies of the hacking/cracking community in the 90's; Web Development was and is never supposed to be "l33t".

Having said that, I'm not keen on these WPD-by-numbers sites like SquareSpace or 1-2-3-Hosting etc. Not from an elitist perspective, but they don't teach the developer anything about the art of Web Development. Please don't think I'm having a go or anything here, just posing an educated opinion of our profession.

So to tie in everything here with the original validation subject. If using a text editor such as gEdit or Notepad, it's very easy to miss that /> to close a tag, or miss the occasional alt="" from an image. An IDE's validation features will ensure that all your code is, at least, strongly typed.

Out of all the IDE's I've tried, VS is the best for one main reason. It comes with it's own inbuilt web server that is fully customisable and very robust. It allows you to fully publish websites to a sandbox server on the fly, with total debugging support for both cilent and server based code. That, and being able to plug and play any .dll file directly into your project, make it immensely powerful for beginners, intermediates and experts alike.

keyboard
06-15-2012, 12:29 AM
I'm not saying that IDEs are bad, just that not many people use them... Personally, I really like programming in plain text editors more than I do in IDEs, but they do have usefull features (Autocorrect, code checking, etc...). I would never not use the IDE for vb.net cause that's what I learnt it on. I think it depends on how you learnt it. IDE vs. Text editor?

ApacheTech
06-15-2012, 12:49 AM
I used to like coding in text editors, but I got bored of having to close every tag and self validate everything. And the tab in Notepad is worth eight spaces instead of four which makes for needlessly large indenting of code.

bernie1227
06-15-2012, 03:26 AM
That's not the case with all text editors, a lot of them have auto tag closing, and auto validating

keyboard
06-15-2012, 03:34 AM
Sorry orobertl, I'm not quite following :D

and yes, I do agree with bernie; There are a lot of cool functions on text-editors too!

djr33
06-15-2012, 04:46 AM
Note: orobertl's posts were deleted as spam.

bernie1227
06-15-2012, 05:25 AM
Yeah, we could tell

ApacheTech
06-15-2012, 09:01 AM
I agree, Notepad++ broke the mould when it comes to using Text Editors, but in honesty, I see Notepad++ as more of a very basic multi-lingual IDE than a text editor now. I do use it a lot when making minor edits and script changes, mainly because of NppFTP. I use CuteFTP as well, but the code editing feature is pretty poor. NppFTP is no good for uploading files to the server, but for editing them once they're on, it's brilliant.

Each tool in the WebDev Toolbox has it's benefits and downfalls. VS's main downfall is it's lack of support for FTP. You can't just (that I've seen) arbitrarily connect to an FTP and D/U files. If you set up an FTP Site, it works well, but the FTP information then becomes part of the project.

bernie1227
06-15-2012, 09:21 AM
I agree, Notepad++ broke the mould when it comes to using Text Editors, but in honesty, I see Notepad++ as more of a very basic multi-lingual IDE than a text editor now.

To be honest, in my opinion, notepad++ is actually one of the more basic text editors, as it lacks even the feature of a preview button.

ApacheTech
06-15-2012, 10:30 AM
To be honest, in my opinion, notepad++ is actually one of the more basic text editors, as it lacks even the feature of a preview button.

When all you'd used previously (as a text editor) was notepad.exe, NPP is like the Holy Editor of Antioch!

And I got a plugin from the NPP repository that allows previews via right click->"Run Me".

bernie1227
06-15-2012, 11:20 AM
When all you'd used previously (as a text editor) was notepad.exe, NPP is like the Holy Editor of Antioch!

And I got a plugin from the NPP repository that allows previews via right click->"Run Me".

True, but I do prefer a nice big button saying "preview" :P
Also, other editors have a lot more features as well

ApacheTech
06-15-2012, 11:40 AM
I think if you have many more features than NPP has, you're broaching into IDE territory.

keyboard
06-15-2012, 11:49 AM
Is there actually a defined difference between IDEs and Text-Editors, or is it just a thin line?

ApacheTech
06-15-2012, 11:58 AM
An integrated development environment (IDE) is a programming environment that has been packaged as an application program, typically consisting of a code editor, a compiler, a debugger, and a graphical user interface (GUI) builder. The IDE may be a standalone application or may be included as part of one or more existing and compatible applications. The BASIC programming language, for example, can be used within Microsoft Office applications, which makes it possible to write a WordBasic program within the Microsoft Word application. IDEs provide a user-friendly framework for many modern programming languages, such as Visual Basic, Java, and PowerBuilder.

IDEs for developing HTML applications are among the most commonly used. For example, many people designing Web sites today use an IDE (such as HomeSite, DreamWeaver, or FrontPage) for Web site development that automates many of the tasks involved.

Seems the main difference is the compiler and debugger. But, both of these are available as plugins with NPP.

keyboard
06-15-2012, 12:01 PM
Danke!