Category Archives: html css

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

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.

Found In Yahoo Answers and Made My Day

The Question:

What’s a good Internet Explorer emulator for Ubuntu Linux?

As you can tell from looking at my profile, I am trying to design a website, but I’m having problems fixing internet explorer bugs. I’m sure there some in safari and opera as well. Is there an emulator I can download for Ubuntu Linux so I can view the page like it would display in Internet Explorer 6?

What I thought the best answer was :

“Good” and “Internet Explorer” are two phrases that I have trouble parsing in the same sentence.

Don’t try to fix the bugs, write your web pages to comply to W3C and HTML/XHTML/CSS standards. Simply tell your IE visitors that if their page looks funny, tough and they should get a real browser, and point them to Firefox and/or Opera.

original post found here : answers.yahoo.com/answers/