Category Archives: HTML/CSS

@font-face not working in FireFox. Works in Chrome

This from a stackoverflow.com post: The problem was just Firefox messing up with the font-family declaration, this ended up fixing it: body{ font-family:”MyFont” !important; }

Posted in CSS3, HTML/CSS, Web Fonts | Tagged , , , | Comments Off on @font-face not working in FireFox. Works in Chrome

A Complete Guide to Flexbox

A great Flexbox tutorial from css-tricks.com. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Posted in HTML/CSS | Tagged , , | Comments Off on A Complete Guide to Flexbox

8 simple CSS hover effects

Very cool and easy modern CSS effects: http://www.developerdrive.com/2015/01/8-simple-css-hover-effects/

Posted in CSS3, HTML/CSS | Comments Off on 8 simple CSS hover effects

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

All from css-tricks: There are times when a really long string of text can overflow the container of a layout. For example: URL’s don’t typically have spaces in them, so they are often culprits.Here’s a big snippet with all the … Continue reading

Posted in HTML/CSS, Web Dev | Comments Off on Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

Link not working when behind a stacked DIV?

You have a div stacked on another div, and the div below has links that aren’t clickable because of the div on top. Even if the div on top has a transparent background. Try this: pointer-events: none;Important note: if the … Continue reading

Posted in HTML/CSS, Web Dev | Tagged , , , , | Comments Off on Link not working when behind a stacked DIV?

CSS3 Animations – @keyframes

This post rounds up 10 articles that explain how to use this cool CSS3 feature, each with examples and demos. http://line25.com/articles/useful-links-for-learning-css-keyframes-animation

Posted in CSS3, HTML/CSS | Comments Off on CSS3 Animations – @keyframes

line break in code adds white space between elements.

line break in code adds white space between elements, specifically inline-block elements.  One fix is to add display:flex to the parent element. This doesn’t seem to work for Safari. Another fix is to add font-size: 0 to the parent element. … Continue reading

Posted in HTML/CSS, HTML5 | Comments Off on line break in code adds white space between elements.

CSS Even and Odd Rules

STATUS Warning: at the time of writing (February 2003), the major browsers don’t yet support the ‘nth-child’ selector (introduced in November 2001) and only very few support the COL element. EVEN AND ODD RULES One way to improve the readability … Continue reading

Posted in HTML/CSS | Tagged , , | Comments Off on CSS Even and Odd Rules

CSS background cover and contain

This will fill the background with the image. Some parts of the image may be hidden -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-repeat: no-repeat;background-position: top center;background-attachment: fixed;background-image: url(../images/fish.jpg); This will show all of the background image. Unless the images is the same dimensions … Continue reading

Posted in CSS3, HTML/CSS | Tagged , | Comments Off on CSS background cover and contain

Sidebar Transitions – cool CSS nav transitions

http://tympanus.net/Development/SidebarTransitions/

Posted in CSS3, HTML/CSS, HTML5 | Comments Off on Sidebar Transitions – cool CSS nav transitions

Hardware-Accelerated CSS

Great article on hardware acceleration and mobile web apps. http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Posted in HTML/CSS, HTML5, Mobile | Comments Off on Hardware-Accelerated CSS

show hide side menu – hamburger

Simple slide in/out menu. This script expands the menu width. You could easily have it truly slide in and out. This is really expand and collapse menu. <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Untitled Document</title> <style> body, html, … Continue reading

Posted in HTML/CSS, JavsScript, jQuery | Comments Off on show hide side menu – hamburger

Vertically Align contents of DIV

I first put the contents in a DIV inside the parent DIV.  I used jQuery to get the height of both the main wrapper and the nested content DIV. Then, subtract to height of the content DIV from the height of … Continue reading

Posted in HTML/CSS, HTML5, JavsScript, jQuery | Comments Off on Vertically Align contents of DIV

Rounded Corners (css)

-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;

Posted in CSS3, HTML/CSS | Tagged , , , | Comments Off on Rounded Corners (css)

The Shapes of CSS

https://css-tricks.com/examples/ShapesOfCSS/

Posted in HTML/CSS | Comments Off on The Shapes of CSS

50 Useful CSS Snippets Every Designer Should Have

Basic to advanced CSS stuff. Read comments, as they offers some additional insight. http://www.hongkiat.com/blog/css-snippets-for-designers/

Posted in CSS3, HTML/CSS, Web Dev | Comments Off on 50 Useful CSS Snippets Every Designer Should Have

HTML emails – Superscript issue with webkit browsers and email clients

Superscript tag affects line height of text in Webkit browsers (Chrome, iOS, etc.) I noticed this issue when testing emails. Apple Mail 5-6, iPad, iPhone 4s-5, Gmail(Chrome), Outlook.com(Chrome), Yahoo! Mail(Chrome) all had this issue.  Test4® this is only a test (Hello World!) … Continue reading

Posted in Email Dev, HTML/CSS | Leave a comment

What No One Told You About Z-Index

This post had my head spinning a bit. I am pulling my hair out at the moment with a stacking issue. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Posted in HTML/CSS | Leave a comment

10 CSS selectors you shouldn’t code without

http://www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/

Posted in CSS3, HTML/CSS | Leave a comment

CSS Firefox top-margin Extra Space

Firefox renders CSS margin-top in such a way that if there are two elements, one inside another, and you set margin-top for the inner element, the outer element collapses the margin-top amount of height. So you may see extra ‘padding’ … Continue reading

Posted in HTML/CSS | Leave a comment

Forms – jQuery datepicker

Need a date picker for your “date” form field? jQuery datepicker makes it easy. Link to the UI styles and UI JS files, and link to the jQuery framework of course <link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css” /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script> <script src=”http://code.jquery.com/ui/1.10.1/jquery-ui.js”></script> Add … Continue reading

Posted in HTML/CSS, jQuery | Tagged , , | Leave a comment

Forms – State values for form

To save time, here is a select element with all the state values. <select name=”State” id=”State”> <option value=”AL”>AL</option> <option value=”AK”>AK</option> <option value=”AZ”>AZ</option> <option value=”AR”>AR</option> <option value=”CA”>CA</option> <option value=”CO”>CO</option> <option value=”CT”>CT</option> <option value=”DE”>DE</option> <option value=”DC”>DC</option> <option value=”FL”>FL</option> <option value=”GA”>GA</option> <option value=”HI”>HI</option> … Continue reading

Posted in HTML/CSS | Tagged , , | Leave a comment

HTML/CSS – IE issues with margins

I noticed today that when I tried to add a bottom margin to my container DIV using CSS the margin was ignored in IE6 and IE7 but not FireFox. I was trying to add a little space at the bottom … Continue reading

Posted in HTML/CSS | Leave a comment

IE Ignores margin-top

This issue has caused many a hair-pulling session. For some reason, IE will ignore the top margin of a DIV. There are a lot of details I’m leaving out, but the issue seems to be fixed by moving any “absolutely” … Continue reading

Posted in HTML/CSS | Tagged , | Leave a comment

IE Does Not Ignore White Space in code

This: <div id=”nav”> <div onmouseover=”this.style.backgroundImage=’url(images/nav_item_bg_hover.png)’;this.style.cursor = ‘pointer’;” onmouseout=”this.style.backgroundImage=’url(images/nav_item_bg.png)’” onclick=”window.open(‘index.html’)”> || Home</div> <div onmouseover=”this.style.backgroundImage=’url(images/nav_item_bg_hover.png)’;this.style.cursor = ‘pointer’;” onmouseout=”this.style.backgroundImage=’url(images/nav_item_bg.png)’” onclick=”window.open(‘bio.html’)”> || Bio</div></div> Is NOT rendered the same in IE as this: <div id=”nav”><div onmouseover=”this.style.backgroundImage=’url(images/nav_item_bg_hover.png)’;this.style.cursor = ‘pointer’;” onmouseout=”this.style.backgroundImage=’url(images/nav_item_bg.png)’” onclick=”window.open(‘index.html’)”> || Home</div> <div onmouseover=”this.style.backgroundImage=’url(images/nav_item_bg_hover.png)’;this.style.cursor = … Continue reading

Posted in HTML/CSS | Leave a comment

Ignoring TOP of Absolutely Placed DIV

Here’s the scenario. You have a container DIV that is relatively placed. Inside the container you have an absolutely placed DIV and a static DIV. For some reason the TOP attribute of the absolutely placed DIV is ignored and it … Continue reading

Posted in HTML/CSS | Leave a comment

Opacity not working in IE7

I have had good results using the following CSS for setting the opacity  in most modern browsers. filter: alpha(opacity=70); /* Internet Explorer */ -moz-opacity:0.7;    /* Mozilla 1.6 and below */ opacity: 0.7;    /* newer Mozilla and CSS-3 */ … Continue reading

Posted in HTML/CSS | Tagged , , , | Leave a comment

“min-height” does not work in IE6. Here is a hack to kick IE6 in the ass.

min-height:500px; height:auto !important; height:500px;

Posted in HTML/CSS | Tagged , , | Leave a comment