MainelyDesign.com Blog

CSS to Turn Off Min-Height

Posted on 07/09/2013 at 10:03 am | Viewed 11,773 times | 0 comments

I needed to turn off min-height in css.  I can't believe it's been this long and I've never had to do it.  In case you are wondering:

How to turn off min-height in CSS

min-height: inherit;

Full Story | View: Comments

Best Way To Get Transparent PNGs Without Any Hacks

Posted on 10/21/2012 at 10:27 am | Viewed 14,100 times | 0 comments

I avoided PNG images for quite a while, mainly because I could accomplish almost every task with transparent GIFs (if not, I could change the design ever so slightly).  Fast forward a few years and web designs are far too complex and textured to only use transparent GIFs, plus it's so much cooler to say "ping" than "gif".  Another reason I avoided using transparent PNGs was due to the ability to make IE (Internet Explorer) crash (suprise!).  Finally, I avoided using PNG images on my website because their filesize was ridiculous (what I could do in 10kb using a Gif, would take 71kb as a PNG).

Read: Best Way To Get Transparent PNGs Without Any Hacks | View: Comments

Best CSS Method for Using Image as Submit Button

Posted on 02/03/2010 at 12:17 pm | Viewed 21,623 times | 2 comments

I came across an interesting issue with web forms and CSS.  Surprisingly, the end result is much better than I expected.  I knew that using an image instead of a traditional form submit button (<input type="submit">; instead of <input type="image"> or <input type="button">) would be a little challenging.  I like a challenge, plus I wanted to use the submit button because it's the standard approach to forms and I remember reading somewhere that input's of type image or button do not submit when you press enter...a usability faux paus in my opionion.

Read: Best CSS Method for Using Image as Submit Button | View: Comments

CSS Min-Height Hack in Internet Explorer

Posted on 12/15/2009 at 10:18 am | Viewed 14,455 times | 0 comments

Another day of web developing with CSS and another day of needing a hack for IE6 and IE7.  This isn't really a hack so much as it's a method of ordering statements in your CSS declaration that yields a working min-height declaration in Internet Explorer.  Well, I guess it's a hack (but I hate using them).

CSS min-height will be used in browsers that support it

Read: CSS Min-Height Hack in Internet Explorer | View: Comments

Jquery Accordion Menu - Expanding UL Menu

Posted on 11/17/2009 at 01:25 pm | Viewed 33,361 times | 0 comments

I looked around and found some interesting examples and existing plugins for creating an accordion menu in Jquery.  What I was looking for was a nested unordered list (UL) that would collapse and expand based on which menu item was clicked.  If there wasn't a child UL, then the menu link should be clickable, instead of an accordion.  Sounds simple right?

Read: Jquery Accordion Menu - Expanding UL Menu | View: Comments

What is the Difference Between Oblique and Italic in CSS?

Posted on 11/12/2009 at 09:34 am | Viewed 16,374 times | 0 comments

This answer was located at WebMasterWorld.com on 11/12/09.  Answers written by johnl.

I was reading up on the CSS font-style property, making sure the default value was normal.  In case you are wondering, the default font-style value is normal.  What struck me was a new value I've never used before: oblique.  Now I'm curious... what's the difference between oblique and italic as it pertains to CSS fonts?

Read: What is the Difference Between Oblique and Italic in CSS? | View: Comments

Auto Columns with Columnizer - My New Favorite Jquery Plugin

Posted on 09/30/2009 at 10:37 am | Viewed 22,035 times | 2 comments

I was about to start coding a CakePHP helper that would analyze a bulleted list and split it into columns.  Starting to think about how I would approach this problem, my head began to hurt.  Then I found an awesome jQuery plugin- columnizer.

Read: Auto Columns with Columnizer - My New Favorite Jquery Plugin | View: Comments

CSS Small-Caps Working in IE Not in Firefox

Posted on 09/24/2009 at 11:03 am | Viewed 15,295 times | 0 comments

Another IE/FF Inconsistancy?

I thought I had ran into an interesting (and new) CSS bug.  I was using Trebuchet MS as my font for my H2s.  It was rendering perfect in Internet Explorer but not in Firefox.  In Firefox, all caps.  In IE, small-caps.  What gives?

Small-caps only working in Internet Explorer?

Read: CSS Small-Caps Working in IE Not in Firefox | View: Comments

Phantom Whitespace Below Img in Firefox

Posted on 07/22/2009 at 10:24 am | Viewed 12,870 times | 0 comments

I've come across this thing a few times before- there's a strange space below images in Firefox, but not in IE.  I finally found a nice explanation as to why it happens, which I wanted to post here.

Images are displayed inline by default.  When you are using an image as a block (like when you want an image to take up the entire top half of a page) you'll get some mysterious white space below the image, but only in Firefox.  For once, IE actually seems to render the CSS appropriately.

Read: Phantom Whitespace Below Img in Firefox | View: Comments

Faking min-width CSS style in IE6 and IE7

Posted on 07/16/2009 at 01:50 pm | Viewed 13,076 times | 0 comments

It's a hack... but it's needed to make a truly cross-browser fluid layout.  It's simple, if you want to implement min-width in IE6 and IE7, use the following CSS code: (I didn't create this originally, sorry, lost the source)

/*********************
**	IE 6.0 min-width hack
********************/
* html div#contentWrap {
	width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 1000 ? "840px" : "85%");
}

Read: Faking min-width CSS style in IE6 and IE7 | View: Comments

Displaying phpinfo() without CSS styles

Posted on 06/09/2009 at 10:18 am | Viewed 23,406 times | 1 comment

I wanted logged in users to be able to see the output from phpinfo(); within Site Avenger.  The problem with using phpinfo() is that it outputs a full HTML page, CSS styles and all.  In the past this has been fine, but now I wanted to show the phpinfo() within the Site Avenger layout and CSS styles.  I came across a simple, yet highly effective solution...

Read: Displaying phpinfo() without CSS styles | View: Comments