CSS - Joel Lipman .Com

Three boxes, two roll over, one falls out

: Joel Lipman; Cascading Stylesheets; 21 January 2013; Hits: 5095

What?
So this is an article to note an oddity when I was working with a Yootheme template called "yoo_sync". Some clever scripts (both mootools and jquery) using the equalize method to make div layers the same height, and in this case, the same width. It isn't so much a miscalculation of 100% divided by 3 that leaves 1 pixel left over, more the fact that the scripts use that 1 pixel (ceiling rather than floor?).

Why?
We have a row on a website of three boxes made of div layers. When viewed normally on a 15" Laptop, all was good using Chrome and tolerable using MS Internet Explorer. If we maximized the Google Chrome browser, the row would split and there would be 2 boxes on the top row and the third would pop under these. As for MSIE, that was ok when maximized.

How?
You could do loads of code hacks which is what I tested but all for nothing because you always end up needing to specify a third of the width.

: Joel Lipman; Cascading Stylesheets; 20 November 2012; Hits: 6367

What?
This is a quick article on how to resolve the following issue:

Overall body background color is blue.
Background color of my contents is white.
When I visit a small page on the site, the contents background (white) shows.
When I visit a very long page on the site, the contents background disappears and reveals the overall background (blue) making the text very hard to read.

Why?
Took me a while to figure out what was the problem, I'd visit some pages and they'd be fine, but when visiting a long page, it would initially display properly but then the white background would disappear when the page finally loaded.

How?

: Joel Lipman; Cascading Stylesheets; 02 September 2012; Hits: 16496

What?
So I have an unordered list of values (*, 1, 2, 3...) and for styling reasons I want the asterisk to be the same size as the numbers but not overlap any list item beneath it. By increasing the size of the asterisk, this often increases the line-height and causes the overall line height to change for other objects in the same row. The problem afterwards was that the asterisk character would overlap the item beneath it (in this case #2) so when a user clicked on #2 they would in fact be clicking on the item containing the asterisk above it.

Objective

Box List Before:	Box List After
* 1 2 3	* 1 2 3

How?

: Joel Lipman; Cascading Stylesheets; 25 April 2011; Hits: 11538

Spent enough time trying different methods across the web but only 1 article worked for me using the "push" div layer. Loosely based on Ryanfait: Make a Footer Stick to the Bottom of the Page

Aim:

Header
Left	Right
Footer

copy raw

<div id="container">
     <div id="header"></div>
     <div id="content">
          <div id="left"></div>
          <div id="right"></div>
          <div class="push"></div>
     </div>
     <div id="footer"></div>
</div>

<div id="container">
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div class="push"></div>
</div>
<div id="footer"></div>
</div>

Situation
The header displayed fine. The left and right columns finally got them side by side. But the footer that has a background image was under the left and right columns... The main content layer was overlapping the footer. I tried various z-index's bearing in mind that the footer has to be behind because the main content had a semi-transparent layer that overlapped it half-way.

I managed to fix this by including a div push layer which clears both (even though i had clear:both on the css for my #right div layer). For some reason, it has a more forceful effect in its own separate layer.

Category: Cascading Stylesheets :: Article: 350

: Joel Lipman; Cascading Stylesheets; 25 April 2011; Hits: 5657

Add horizontal space between label and fieldset

copy raw

fieldset label.inline { display: inline-block; margin-left: 2em; }

fieldset label.inline { display: inline-block; margin-left: 2em; }

Change color of fieldset grouping line

copy raw

fieldset { border: 2px ridge #7abcff; }

fieldset { border: 2px ridge #7abcff; }

Category: Cascading Stylesheets :: Article: 349

CSS Background Without Causing Scrollbars

: Joel Lipman; Cascading Stylesheets; 23 April 2011; Hits: 8874

Quick note in case I spend as long as I did again.

A Client had some clouds on the background of his photoshop file for his website. They were to be positioned in the top right corner with the leftmost tip aligned to the right of a central content section. I separated off the clouds as another div layer, specified the width and height and specified it's left. It caused the horizontal scrollbar which is a bit annoying because you scroll to the right and theres nothing but some background image. Also the footer was at 100% so it got cut off if you scrolled horizontally.

Aim / Objective
To have a background of sky and grass with a centered content section (white semi-transparent layer) of 900 pixels width as shown in the following picture: