Rabell: Looks nice but it’s not free and i’d rather learn the basics than use something custom made
Smallin: Just trying to figure out what the traditional way is of styling a bar
Bundren: Yeah, I’d say a raw element is totally fine. stretching an SVG image might maybe offer a bit more control, but only if you were wanting to get fancy w/ the shape
Bundren: Maybe put some text in there to be kind to accessibility stuff
Gibas: Is there a guide to help me build example 2 without using a checkbox?
Hodosy: Hm, i wonder if using google fonts is the one messing up my container widths and not allowing me to set max-width! :
Adami: Possible, google likes to butcher fonts and the css used for them
Jumalon: Use the author’s font file, not google’s copy
Clerkley: You mean locally, right?
Barbuto: And use http://reisio.com/examples/webfonts/ or http://reisio.com/examples/webfonts/new/
Borst: No I mean find the font author’s website
Tinnerello: And download the actual font file ttf/woff/etc. from there, not from google
Pelyo: Yeah, htat makes sense.
Sonnefeld: They apply some treatment to them all and it’s. unreliable
Waterer: Just like all things google :p
Brummer: Claytonzaugg: why without a checkbox?
Baisten: Because I’ve got serious checkboxes that are rampant in my js file, and code applies to all of them, which destroys example #2
Diles: So I’m tyring to do just a basic on off switch that looks like that, no animation necessary
Loch: You can override for example 2
So: Just use a more specific set of selectors
Everhardt: Reisio, CSS Specificity • Tutorials: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html , http://htmldog.com/guides/cssadvanced/specificity/ • Spec: http://w3.org/TR/CSS21/cascade.html#specificity • Graph yours: http://jon***ebastianohlsson.com/specificity-graph/
Sepich: Nope, it wasnt google fonts! :
Losiewski: I set max-width: 100px; in my body elements css. but my p tag wont use it! :/ so weird.
Coman: Cant figure out why. dont even know if this is a browser specific issue.
Trucchio: The css google serves is also *****
Kolbe: Im not using any google fonts
Alexanders: My css looks alright. my html looks alright. its crazy :/ dunno what the problem is really.
Cramm: Reisio: see if you can help – https://jsfiddle.net/rzgjs1cw/
Scarpato: Supay: https://jsfiddle.net/rzgjs1cw/3/ you need spaces to break lines, normally
Scarpato: Otherwise you need word-break: break-all https://jsfiddle.net/rzgjs1cw/4/
Kos: Scarpato: hm, no actually, i want everything to use a certain width. and not more. but my p tag doesnt seem to care.
Scarpato: Right, because you have no spaces in that p tag, so it doesn’t wrap like it would with normal words
Reppucci: Oh wait, youre saying that i missed the ‘word-break: break-all;’ ?
Knolton: Interesting, i dont remember using this tag previously, but it used to work.
Oum: Scarpato: ah, i remember using a custom tag called ‘main’ where i set max-width, margin and other properties. then i just used main/main and had all my content within those tags. that used to work, but it doesnt now. :/
Scarpato: Well, again, any tag with a long string of one word won’t break at the end of the element
Scarpato: It only breaks on spaces and a few other non-letter characters
Goldschmidt: Now i understand what youre saying
Alberthal: Epic, i didnt know that breaks only occured at such points. lol, silly me. i was testing with that huge string and nothing was working.
Chkouri: Thanks a ton Scarpato :