• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

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.

May 19, 2016 by Webhead

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

Filed Under: Coding Tagged With: css, firebug, firefox

Left Sidebar Under Content

June 8, 2015 by Webhead

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

Filed Under: Coding Tagged With: css, responsive

Line in Firefox background

October 23, 2014 by Webhead

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 use background-size: 99.99%;

 

http://stackoverflow.com/questions/18423884/flickering-line-under-background-image-in-firefox-on-resize

Filed Under: Coding Tagged With: css, firefox

2 color horizontally expanding background

September 3, 2014 by Webhead

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

Filed Under: Coding Tagged With: css

CSS iOS div lines disappear on zoom in

July 8, 2014 by Webhead

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.

 

Filed Under: Coding Tagged With: css, iPad, iPhone

Pseudo Selector First Child of Class

June 30, 2014 by Webhead

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;
}

 

 

Filed Under: Coding Tagged With: css

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 8
  • Go to Next Page »

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools