I got 2 warnings. From my two buttons. .btn-left { padding: 1em; width: 28%; } .btn-right { border: 2px solid #fff; width: 38%; } http://raineer24.github.io/jewel/# Is it just okay, I just ignore them and how can I fix it?
Uhm... you can't "fix" it, because they're not errors. They're something to be aware of, since, as the warning says, the padding and border is applied OUTSIDE the element width - hence, your .btn-left element is 2em wider than 28% and your .btn-right-element is 4px wider than 38% (why you have different styles on the two buttons, making them appear different in size, god only knows)
Generally speaking this is also why declaring widths in percentage (other than 100% for certain effects) is utter and complete rubbish. Inline-block on those anchors would be far more efficient as I'm not seeing any reason for those to even have widths set on them. Though generally speaking you've got a nasty case of DIV for nothing, gibberish use of numbered headings, invalid nesting orders or in the case of A wrapping H1 orders that while valid can cause rendering bugs in many browsers... You've really overcomplicated something simple here... In general your PRESENTATIONAL use of classes, DIV around perfectly good block level containers that shouldn't need that wrapper, etc, etc? Just asking for it to fall apart and is WAY more code than neccessary given how simple what you have so far is. Even the use of multiple H1 and the H4 when you don't have a H3 or H2 for it to be a subsection of is outright nonsense. Remember, meanings NOT appearance, a H4 means "the start of a subsection of the H3 preceding it" just as H3 means "the start of a subsection of the H2", H2 means "the start of a subsection of the H1" and H1 meaning "the heading under which everything on the PAGE is a subsection" -- hence why having more than one H1 doesnae make a lot of sense. Of course you're using the mouth-breathing idiocy known as bootcrap, hence the "Wow, that's gibberish and bloated" markup since all it does it teach you how NOT to write HTML. By it's very nature it uses presentational classes which is why you really might want to find a stick to scrape that off with before tracking it all over a website's carpets. Even some simple things like your keywords are banjaxed -- its' keyWORDS, not keyphrases, not keysentences, keyWORDS -- seven or eight single words (exception to the single word being proper names) that exist between <body> and </body> as CDATA (character data, aka your content text) that you want a slight uprank on. What you have there is gibberish as well. Even your CSS <link> are all messed up since you don't even have media targets on them... or the presence of scripttardery before you even have a properly working layout or content marked up... For what you have so far there is little if any legitimate reason (apart from the halfwit mouth-breather rubbish of bootcrap) for that markup to be much more than: <!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1" > <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv" > <title> Jewel Shop </title> </head><body> <div id="top"><div class="widthWrapper"> <h1><a href="/">Jewelry</a></h1> <ul id="mainMenu"> <li><a href="/" class="active">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="icon facebook"><a href="#" title="Facebook">Facebook</a></li> <li class="icon twitter"><a href="#" title="Twitter">Twitter</a></li> </ul> <h2> Creating Realistic <span>Workshop Unique Decorations</span> </h2> <a href="#" class="button standout">Learn More</a> <a href="#" class="button">Choose decoration</a> <!-- .widthWrapper, #top --></div></div> </body></html> Code (markup): I'd set both .button to display:inline-block; padding:0.5em 1.5em; and then their different colors and borders. I'd declare border on both so that they are the same size, since you are currently lacking that as well. Inline block they'll put themselves together naturally and shrink to fit their content without playing any silly games with width. Normally I rail against the use of the title attribute when it matches the text, but since those social icons are too small to fit the text you'd have to use a hiding replacement method, so get a title on those so at least there's a tooltip. Though even the design itself isn't something I'd be doing with that massive background image too large to have any business on a website, and massive amount of "padding for nothing" around that first subsection -- two things I'd never do on a website no matter how many artsy fartsy types cream their panties over that useless nonsense.
Border-box doesn't work in IE6 and IE7? Jewel http://raineer24.github.io/jewel/ Maybe I should ignore all the warnings?
Being that it's a brand new property, well... duh. No, it's not going to work in a 16 year old browser engine. Though box-sizing is another of those things if you have to use it, you're probably doing something wrong. It can be handy, but it's too soon to rely on it for, well... anything. You know, things wrong like three times as many DIV as you should need, gibberish use of numbered headings, pointless scripttardery on something that by all indications shouldn't even have scripting for anything, gibberish keywords meta, no media targets on your stylesheet <link>, a nesting order of anchor around a H1 that really is NOT reliable no matter what the 5-tards say, relying on the bloated halfwit idiotic nonsense that is bootcrap... Seriously, go find a stick to scrape that off with. I'm sitting down for an early lunch, but after if I have a spare moment I'll belt out a workalike using the code I presented above as a base. You're not doing a blasted thing that should require half the CSS or markup you're using; much less the blindly throwing scripts at it for.. uhm... well... yeah. You are basically REALLY overthinking this, and I think the flawed choice of tools may be to blame on that.
Alright, it's not a 1:1, but should show most of what I'm talking about: http://www.cutcodedown.com/for_others/nerdGraphic/template.html As with all my examples the directory is wide open for easy access: http://www.cutcodedown.com/for_others/nerdGraphic/ 90% the same functionality. I didn't take the time to add the icons and just set a background-color on those for now, didn't use the webfonts, or that strange "slide-in" background -- but even adding all that shouldn't add more than 512 bytes to the CSS and maybe two span to the markup, meaning the HTML and CSS needed to write it would be smaller than what you wrote ON TOP of the fat bloated train wreck of how not to build a website known as bootstrap. ... and I've got it working responsive too! Yours is... decidedly not, scary when that's supposed to be the point of Bootstrap... Hope this helps, or at least gets you thinking about the differences. Of course CSS Lint is typically full of shit, that's why you use the W3C validator, and even that's gonna bitch at you no matter what you do these days. Like LINT has this bullshit of "never use ID's as selectors" or "don't use tags as identifiers" -- which is why it's just as malfing stupid as bootcrap, jqueery or worse mouth-breathing dumbass nonsense like LESS, SASS or OOCSS. You follow LINT's rubbish advice, you'll end up throwing classes at everything and using twice the markup and 50% more CSS in the process. Because of course using more code is ALWAYS going to be faster... -- that doesn't set off your bullshit alarm, nothing will. But what can you expect from halfwits who would deploy markup like: <div class="head"> <div class="page"> <div class="unit size1of2"> <h1 class="logo">CSS <strong>LINT</strong></h1> </div> <div class="unit size1of2 lastUnit"> <div class="intro"> <p>Will hurt your feelings<a href="http://www.jslint.com/">*</a></p> <p>(And help you code better)</p> </div> </div> </div> </div> Code (markup): To do the job of this: <div id="top"><div class="widthWrapper> <h1>CSS <span>LINT</span></h1> Will hurt your feelings<a href="http://www.jslint.com/">*</a><br> (And help you code better) </div></div> Code (markup): But sure, using two to three times the DIV, emphasizing things that aren't emphasized, wrapping paragraphs around things that aren't grammatical paragraphs and slapping classes on EVERYTHING is the hallmark of people who should be advising others on how to code...
You can scan this link for quick guide what to do: http://www.webcosmoforums.com/css/164983-css-box-sizing.html You definitely need this, or media-queries.
{box-sizing: border-box;} is the default in IE≤5.5 and in IE6+ (through IE11 at least) in quirks mode. Do keep in mind that the border-box model has its own issues; the padding and borders are subtracted from the content area, where in the traditional W3 content-box model, the padding and borders are in addition to the content area. A little thought will solve any box model issues while staying with the standards mode default. cheers, gary
I don't, but that's because I think they're full of shit, pulling wild claims out their asses and offering some of the WORST advice in their warnings I've ever seen online apart from perhaps W3Schools. The general gist of their entire message is "only ever use classes" and "just throw classes wildly at everything"; they just don't come right out and say it, and instead say things like "don't use tags as selectors", "don't use ID's as selectors", and "don't use sibling or child selectors". ... at which point you end up pissing on the HTML so hard that any ALLEGED speedup in "rendering" is offset by markup bloat and/or too many DOM elements -- both of which can drag the performance of the renderer AND JavaScript down. Of course all this dicking around worrying about rendering speed is a bullshit claim; when a 133mhz MMX Pentium running windows 98 with 64 megs of RAM could "render" complex selectors in an acceptable amount of time in IE 6, claiming that you need to fret over render time on things like selectors is 100% grade A farm fresh manure when even the cheapest handheld has ten times the computing power. 90% of their "warnings" are such utter and complete nonsense -- much less if you view-source any of their pages the outright bloated crap they call markup -- it is painfully obvious they have NO business offering anyone advice on how to build a website!
Yeah, the excellent HTMLDog. There are some who will suggest the w3schools tutes; don't. They'rel too full of errors and poor practices. gary