Tag Archives: html

Internet Explorer Get On Board

IEsadWhat’s up with Internet Explorer. We have the W3C World Wide Web Consortium and we even have validator services now. Yes HTML and CSS have come a very long way, but for a major company like Microsoft I really don’t understand why its so hard to play ball with the rest of the team.

I know I can’t be the only one who feels this way, or is tired of creating wonderful designs, only to discover the design works great in every browser BUT Internet Explorer. This has been a Microsoft problem from the beginning. They expect the whole world to bend over backwards for Microsoft and play ball by their rules.Even with the W3C as a guideline for the rest of us, Microsoft expects us to write special code just for their products. Yes, it can be fixed by creating a special style sheet just for the IE browser, but really ! Is this what we should be doing ?

Maybe if enough designers and web surfers alike demand Microsoft play ball with the rest of us, then they will indeed change. As a designer maybe we should charge extra for the IE style sheet. As a surfer refuse to use IE products. As designers we can place the W3C validation button on the bottom of every page, and add a link that says if this page isn’t loading correctly download a browser that meets the W3C standard with a link to Chrome or a Mozilla product.

This topic especially hits home with me because I don’t use any Microsoft products. I test my pages in Chrome, Firefox and Konqueror and they always look so much better than in I.E. When I try something new, I’ll also test on a friends Mac Book and their browsers. Although this is really nothing more than a rant, I would love to see an organized Internet campaign to push people away from IE products or at least help Microsoft realize the error of their ways.

The good news is, the times they are a changing. When I look at at my server stats now, compared to server stats from ten years ago, the majority of users are using better browsers, and IE products seem to account for about 20 to 30 percent of my users browsers. Compared to ten years ago when Microsoft still had about a 70% market share of browser traffic. You would think they would start getting the hint. Maybe, with a little push from all of us, we can get that number down to a little less than 10% and not only get Microsoft to play fair, but also educate web surfers, and customers alike on the W3C HTML CSS standards.

If You Use Internet Explorer See The Difference For Yourself

Firefox

Chrome

CSS Tips and Tricks from Blogtalkradio

Three great interview podcasts from Blog Talk Radio with CSS junkie “Big John” Gallant on CSS and web design. These interviews cover all kinds of tips and tricks, and different fixes for dealing with different browsers. These are about 3 years old but are still very informative. If you ever wondered why IE6 has such a hard time displaying modern CSS these interviews really put it in perspective.

4/7/10 First interview, talks about debugging pages for IE6 when using CSS.

Online Computers Radio at Blog Talk Radio with Myra Rhodes on BlogTalkRadio

6/14/10 Second Interview talks about working with .png files and getting them to work better in IE6 and making style sheets for IE6. Also gets into fonts and font sizing.

Find Additional Technology Podcasts with Myra Rhodes on BlogTalkRadio

6/22/10 Third interview. Talks about @media and different tips and tricks for mastering CSS.

Discover Internet Internet Radio with Myra Rhodes on BlogTalkRadio

What you do when you overwrite a website with an older version.

So last night I’m up working on stuff till about 6 a.m. Around 4 in the morning I decide I’m going to tweak my Tumblr blog real quick. I have a special blog on there that I use as a test lab. I make configurations, add stuff, tweak and when every thing looks A O.K. I copy and paste the code into my other blogs that are using the same theme.

So I tweak the theme a bit, I’m happy, I copy the code and paste it into my other blogs not realizing that there were unsaved changes from a previous edit. This was a couple hours work at least, and in a moment of acute stupidity that only took a couple seconds to perpetrate , I overwrote all the changes I had made at an earlier date. To add insult to injury, I couldn’t even find the graphics I had used in my backup. My heart sunk, I was tired, feeling really stupid, and couldn’t believe what I had just done.

Frantically I scoured through the directories on my hard drive, in hopes that I could find the backup files to no avail. In a state of panic I calmed myself and said out loud to no one in particular “o.k. stupid think !” Then it dawned on me, in my moment of desperation I recalled someone talking about a program called time machine or something like that, that stores cached copies of websites on there servers. You just type in the url of the site you want to see, and it pulls up its last cached version of the website. I did a search engine search and low and behold discovered http://www.cachedpages.com/.

I quickly typed in my url and clicked on the Google cache button. To my amazement there was my old site,exactly as I had designed it before my momentary lapse in judgement. The graphics, the new search box, the links, the Twitter widget, the hours of work I had done on the sidebar were all there ! I right clicked on the header image and saved to where I thought the back up file was. I then right clicked on the page again and clicked “view page source” and copied all the code I had overwrote. At last, my world made sense again ! There truly is a God and I gave thanks ! Cachedpages.com saved my REAR and if this ever happens to you, try this because it worked great for me.

Once I got my code and graphics the problems were fixed in under 10 minutes. Words can’t describe how relieved I was. The moral of this story is to always keep backups. I usually do and if this had been a clients page I’m sure I would of known exactly where they were. I tend to be more careful with other peoples stuff, than my own. Plus my Tumblr blogs are just a hobby and somewhere to play when I’m relaxing. I usually keep backups of my backups which go back two changes. So I have the original on the server, a copy on my hard drive, and a copy of the old copy named sitename.bak before changes were made. Using this system, if something goes wrong, 99.9 % of the time it’s completely recoverable.

With that said keep backups, but if the worst should happen check out cachedpages.com or a similar site as a last resort. It really saved my ass !

Add A Twitter Feed To Your Blog Or Website.

I wanted to make my blogs, and websites a little more interactive, and also give people another way to interact with and or contact me. I decided on creating a twitter widget to put in the sidebars of my blogs, and also add to the front page of the website. The process was surprisingly easy. Here’s what you do.

If you don’t have a twitter account you want to go to twitter.com and create an account. O.K. we’ve got our account set up, now go to https://twitter.com/settings/widgets . If you’re not logged into your account, twitter will ask for your username and password and then it should open to a page that has a box that say widgets with a radio button that says “Create New”. Click on create new, and the next page that opens will be the configuration page. Put your @twiiterUserName where it asks for it, and then configure it. If you want replies to show up in your time line then uncheck that box, click whether you want your photo’s to auto-expand or not, adjust your height, theme color, enter your link color hex code or stick with the default, and click create widget. Thats it your done, when the next page loads, cut and paste the code into your blog or website and you’ll have a cool twitter feed, posting all of your updates in real time.

I placed the twitter feed on my Tumblr blog in the sidebar. It’s a custom theme I created so, you’ll have to read the Tumblr documentation to install it in yours. For Tumblr I basically just created another side box and pasted the code into it.

On my website, I did some rewriting of my css to make it responsive to both browsers and phone screens, and using the @media code the widget will even be omitted from smaller displays so the page still displays properly in most devices.

On this wordpress blog, using the 2012 theme, I just clicked on appearance, widgets, dragged a text box over to my sidebar, and pasted the code in the text box. It really couldn’t of been any simpler with wordpress and this is one of the reasons I’m really glad I decided to give WordPress a try. Between the website, Tumblr, and this WordPress blog, WordPress was hands down the easiest to install the widget in !

If you want to get a bit crazy with this project and really customize the heck out of the timeline and make it your own, you can check out the developers page here.

This was a really, easy, fun project, and I think it’s a great way to add a little interactivity to your blog or website. Any questions, please feel free to comment, or tweet it from the side bar. Thanks for reading and good luck !

CSS Create A Scalable Image Class

Here’s a simple way to scale images in your responsive web design using CSS, two classes and some html.

The CSS

I created two classes one named .image-wrapper and the other I named .scale-image.

First, lets create the two classes. We will name the first one .image-wrapper and this will be used as a div.

.image-wrapper
{
position: relative;
}

Next we will make the .scale-image class. This class will scale the image inside the image-wrapper div. You can play around with the max-width percentage based on your design.

.scale-image
{
display: block;
width: auto;
max-width: 75%;
}

The HTML

Place the image code inside the div of the image wrapper you created and then use the scale-image class to scale the image based on the device or browser size.

<div class="image-wrapper">
<img src="image_name.jpg" class="scale-image" />
<div />

That’s it your done. If you want to see the code in use you can check out a clients site I’m doing here.