My Monkey Do

A Log of Coding Solutions

css

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

by

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:

http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements

Left Sidebar Under Content

by

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 the browser width is narrow, use display:table-footer-group for the sidebar, display:table-header-group for the content, and display:table for the parent container.

See more:

http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

CSS iOS div lines disappear on zoom in

by

Problem

In iOS devices sometimes safari can display an annoying line above and below div elements.  Like so:

Unwanted div lines

 

Solution

The solution is quite hacky and hopefully this is a bug in Safari and it gets fixed soon.  The solution is to put a negative 1px margin on the sides you see the lines.  So if you see the lines above a certain div, set the top margin to -1px.

Thanks to this blog for the solution.

 

Pseudo Selector First Child of Class

by

Problem

How do you apply a style to only the first element with a certain class?


.just-this-one {

background:blue;

}



<div class="top">

<div class="not-this-one">not this one</div>
<div class="just-this-one">just this one</div>
<div class="just-this-one">but not really</div>

</div>

: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 you would think it does, but “type” here implies the HTML element type like “div”, “p”, etc.

 

Solution

Use the tilde “~” to “undo” styles on elements where the class previously appeared.  So first apply the style you want to all .just-this-one elements.  Then apply “undo” that style for all subsequent elements.


.just-this-one {

background:blue;

}

.just-this-one ~ .just-this-one {

background:none;

}

This genius solution found on stack overflow (not the accepted answer):

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

 

Additional note:  If you have a pseudo selector like :before, use something like the code below to write content before all li elements except the first one.


.menu li:before {
content: '';
}

.menu li ~ li:before {
content: "\002F\0020\002F";
color: #aaaaaa;
}