MainelyDesign.com Blog

Best Way To Get Transparent PNGs Without Any Hacks

Posted on 10/21/2012 at 10:27 am | Viewed 14,101 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,624 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,457 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

CSS Small-Caps Working in IE Not in Firefox

Posted on 09/24/2009 at 11:03 am | Viewed 15,296 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

Network Solutions' Flawed .htaccess and Mod_Rewrite Rules Implementation

Posted on 08/06/2009 at 02:38 pm | Viewed 34,551 times | 7 comments

I can't believe it!  I spent hours trying to get the mod_rewrite rules working in .htaccess on Network Solutions' servers.  Everything I tried didn't work.  Using the default .htaccess (from Cake distribution) failed.  I've used the distribution on several servers and never had any issue with the rewrite rules.  However, Network Solutions's mod_rewrite works differently than [all] other servers.

Read: Network Solutions' Flawed .htaccess and Mod_Rewrite Rules Implementation | View: Comments

TinyMCE Doesn't Work in IE8

Posted on 07/24/2009 at 11:54 am | Viewed 26,789 times | 4 comments

I was training a client how to update their web site using Site Avenger when the strangest thing happened- no copy was showing in TinyMCE.  No matter what I pasted the tiny editor would remain a nice, plain white.  I didn't think to try typing directly into TinyMCE.  No matter, a click on the HTML button to view the source revealed the content was in fact there, just not being shown within the TinyMCE editor.

Read: TinyMCE Doesn't Work in IE8 | View: Comments

Faking min-width CSS style in IE6 and IE7

Posted on 07/16/2009 at 01:50 pm | Viewed 13,078 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