Firefox displayed this warning in the Firebug console. This warning indicates an absolutely positioned does not consider a table element relatively positioned so it may not appear as expected. A better explanation is here: https://www.sencha.com/forum/showthread.php?289315-Relative-positioning-of-table-rows-and-row-groups-is-now-supported.-This-site-may-nee and solution to fix is here:…
My Monkey Do A Log of Coding Solutions
Tag: css
Left Sidebar Under Content
Problem Having a left sidebar move under the content in a responsive design needs a bit more thinking. You can’t just do float left width 100% or display block and let the sidebar fall to the next line. Solution When…
Line in Firefox background
Problem When scaling the FireFox and having a background image size set to 100%, the bottom of the image sometimes shows a line on the bottom showing the background behind it. Solution Firefox seems to have a problem with background-size: 100%. instead…
2 color horizontally expanding background
All done in css, no images. Float the background past the normal page width based on percentage. one on the left, one on the right. http://stackoverflow.com/questions/8893312/css-bi-color-flexible-horizontal-background-band
Tagged with: css
CSS iOS div lines disappear on zoom in
Problem In iOS devices sometimes safari can display an annoying line above and below div elements. Like so: Solution The solution is quite hacky and hopefully this is a bug in Safari and it gets fixed soon. The solution is…
Pseudo Selector First Child of Class
Problem How do you apply a style to only the first element with a certain class? :first-child does not do this, that just selects the very first child no matter what the class is. :first-of-type doesn’t even do this. but…
Tagged with: css
Vertically Center Anything With Dimensions
One way to easily vertically center a div is to set it to be absolute, set the width, height and then the top, bottom, left and right all equal to 0. Something like this: From: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally
Tagged with: css
Careful with supporting all versions of IE 8
Problem Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites. However, like different versions of Chrome and Firefox, IE8 also has different versions. There are about 6 different versions of IE8 in…
What is box-sizing and border-box?
Problem In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box. Whenever I add padding, the inside just got smaller and the outside stayed the same. Was I dreaming all this…
IE Doesn’t see padding on hover
Problem Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure. Using jQuery I have a hover…
Top