Merri
-
Wish we had "text-align: center-justified" as an available option
@wolfcry911 I can see a pure designer person using this kind of stuff. A developer mind can find such design requirements a bit odd... and that might be a reason why CSS stuff often tends to lack some "unnecessary" features even if they�…
-
Wish we had "text-align: center-justified" as an available option
You can get full justify to work cross-browser: IE5.5+: text-align-last: justify; Firefox: -moz-text-align-last: justify; For other browsers: Container font-size: 0; (also position: relative; or anything other than static may be required) Child…
-
Make 3 Columns Fill Availabile Height + Fluid Width Center Column
No hacks: http://codepen.io/Merri/pen/eorBl position: fixed; is the magical property. Note that body tag is the size of the content part. Everything else is outside of body. Body element is the one that has the scrollbar if a scrollbar is required…
-
Safari - 34% + 33% + 33% doesn't equal 100%
Just for some additional info, using full percentages doesn't change the problem with rounding to full pixels. Say we use the same 101px container example: 101 * 0.34 = 34.34 = 34px 101 * 0.33 = 34.33 = 33px 34 + 33 + 33 = 100px Or 102px co…
-
Safari - 34% + 33% + 33% doesn't equal 100%
@ElijahFowler: your solution brings nothing new to the table as far as solving the issue in Safari (and Opera 12 btw!) goes. @iknowdavehouse: The problem is that Safari and Opera do not account for subpixel rendering and instead take 33.333%, calcu…
-
Java script or css
No. You can't do same things with them. They are entirely different. CSS is a way for styling the elements you see on the document. It provides no logic on it's own, you can't do programming with it. CSS can do some tricks that make …
-
Intel Core i3 for programming
One could argue it is better to have a low performance machine so that you don't end up making stuff that is too heavy for regular users. Developers tend to prefer high end machines, but there is a danger of building stuff that works fine on yo…
-
Most Sensible Way to Make Button and Form Height Match?
@CrocoDillon: I see no difference atleast in Firefox with that.
-
Most Sensible Way to Make Button and Form Height Match?
Form field rendering is darn inconsistent. Firefox makes the button 2px too high, Chrome instead makes it a few pixels smaller in both width and height. Anyway, this should give somewhat consistent results: http://codepen.io/Merri/pen/uHzls It loo…
-
Automatically fit the div to the inner content
You don't need to set a width. You're free to take it away. You can even use something like margin: 3em; to reduce the horizontal size of the div without defining a width for it.
-
Automatically fit the div to the inner content
Oooh look a kitty! Ahem. Yes. Nowrap.
-
A Random Saturday CSS Challenge
@Senff: http://codepen.io/Merri/pen/kgfri body:before { color: #CB3837; content: "██████████████████\A █ █ █ █\A █ █ █ █ █ █ █ █\A █ █ █ █ █ █ █ █\A █ █ █ █ █ █ █ █\A █ █ █ █ █ █ █\A ██████ ██████████\A ████&…
-
Safari 6 and Chrome issues in CSS.
I see it on Windows, but it is very minor. As for the plus and minus signs the issue has to do with floats. It is often a bit unreliable to float something after some non-floated content. In this particular case it might work if instead of all sort…
-
Need this style in CSS for headings
It is a good idea to avoid pixel values for letter spacing or with fonts in general. Why? It makes your life easier! This one doesn't need to define a different letter-spacing for bold and normal. It also doesn't need to define a new diff…
-
Need this style in CSS for headings
What in particular you find troublesome to do?
-
Arrrggghg..... ie 7 horizontal nav displaying vertically stacked despite hack
hasLayout didn't trigger for IE7 before, now that the container has 100% width it does have hasLayout. So floats are contained within the container as if a clearfix was used on it :)
-
Hide Text Characters Around Elements
Yup, that is why I used the word effect. You can't see the text when making selection and elements align as if the text wasn't there at all, but if you copy'n'paste the text you'll see the pipes and the text still exists in …
-
Hide Text Characters Around Elements
Just use transparent color and you're not seeing the text: .ex-one ul { color: transparent; } If you also want to remove the character effect entirely you can use font-size: 0; although there is a gotcha: you can't use em in ul's…
-
Margings Not Cancelling Out CSS
Cleaned up styles: http://codepen.io/Merri/pen/kljHF With cleanup I mean that I took out everything that didn't really have any effect. It is a very good idea to limit styles so that you are more specific with what you do and not go trigger ha…
-
How do you learn JavaScript?
One of the things to pay attention to is that JavaScript is a very different beast compared to many other traditional style languages (such as C, Java, PHP or Basic). You use and think about it differently. The major stuff to pay attention to: Ja…
-
align these divs in single line without breaking
@Jarolin Did you notice the changes in HTML?
-
align these divs in single line without breaking
HTML: CSS: .slide-container { white-space: nowrap; } .slide { width:1000px; height:100px; background-color:red; margin:10px; display: inline-block; } And there you have it.
-
How do you learn JavaScript?
W3Schools is one of the worse sites to learn from. They don't teach things right and at some things are just outdated and wrong. I learned Commodore 64 Basic, then Visual Basic (classic, not VB.NET), PHP and then JavaScript. Also have written …
-
Creating a zigzag line for a border
Here is something you can do with CSS and also something you probably haven't seen anywhere before: http://codepen.io/Merri/pen/tnFkz It isn't zigzag but maybe fits the sewing theme?
-
List has gap in IE that shouldn't be there
Actually the gap exists in Firefox as well. The issue occurs due to subpixel rounding differences. Firefox and IE9+ account for subpixel values much more than browsers previously did and one of your images is one pixel less in height. So when the im…
-
Cleaner way of writing this code?
Did someone just say without JS?!?1+1 http://codepen.io/Merri/pen/aEfhj Sorry. My bad.
-
Extending an absolutely positioned div to content height
Do you mean a centered dialog?
-
Extending an absolutely positioned div to content height
You can do something like this: http://codepen.io/Merri/pen/bzCBD Practical uses for this are quite limited though. If you can define a better use case then answers may improve.
-
Parralax scrolling website in IE
More or less seems to work OK in IE6, IE7 and IE10. You could use conditional comments to target IE8 and IE9 with some extra CSS to fix them. Not very elegant but would get the job done. Another route would be to make a minimal test case to CodePen…
-
CSS brainteaser: How would you code this?
For the best browser support you'll probably need to use three img elements that are placed on top of each other in equal size. The images themselves could be two color 2-bit images where color A represents transparency and color B is the solid…