Internet Explorer & CSS issues CSS has come a long way since we wrote this article one decade ago. Check out our latest article on where we see CSS going in 2016! Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. 1. Perhaps the most famous IE and CSS problem is Internet Explorer's misinterpretation of the CSS box model, which can cause page elements to be narrower in IE. This means that each div is 50em wide in total. In IE however, the border and padding are included in the width of the content, as opposed to added on. This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the . To fix up only IE5.x, use the following CSS commands: 2. Example text 3. .
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
IE7 Recalculated Offset Bug | CSS Class IE7 now has support for dynamic pseudo classes :hover and is commonly used for the purpose of hiding elements from view and bringing them back into view when a ancestor element is hovered over, but the support is buggy depending on the property and values used for either hiding the elements or for bringing them back into view. Setup: Container Absolutely Positioned Element What we have above is a container element containing an absolutely positioned element. <div class="container">Container <div class="absolute">Absolutely Positioned Element</div></div> In the below examples, the absolutely positioned element is hidden from view by the normal position value and brought back into view by the hover position value. Example 1: a.p element: normal position left:-999em; - hover position left:auto; Example 2: a.p element: normal position left:-999em; - hover position left:0; Example 3: a.p element: normal position left:-999em; - hover position left:auto; margin-left:0%; Example 4: Example 5: Example 6:
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.
IE CSS Bugs IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. The little bugs in it's CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn't work in IE 6. While I generally refuse to pander to IE 6's limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that'll get you every time: The Box Model This is perhaps the most common and frustrating bug of all in IE 6 and below. IE 6 will calculate the width of the box to be 100px. This kind of discrepancy can cause HUGE layout problems. I generally work around this issue by just not using padding on boxes I am using for layout. The Double Margin Bug Using our box example from above, let's say we need that floated to the right: IE 6 will double the 20px to 40px. I also like to side-step this bug whenever possible. No Min Widths / Min Height Stepdown No Hover States So... Share On
CSS3 Filters: Altering HTML and Images with just CSS CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia
How to Enable IE 8 Compatibility View for your whole Web site or for specific Web site directories - Deviations With the release of Internet Explorer 8, many customer sites suddenly had rendering errors and problems displaying the site correctly. In order to avoid expensive and time consuming corrections Internet Explorer 8 has a new functionality called Compatibility View which enables the browser to emulate Internet Explorer 7. Internet Explorer 8 Compatibility View The question many customers asked is ”How can I force the client browser to use the Compatibility View when they visit our site? Web Developers and Site Administrators can configure IIS and their sites to tell Internet Explorer 8 to automatically Emulate Internet Explorer 7 when they visit their site or just specific WebPages. This is done by adding a custom HTTP Header to the IIS and the website web.config or to add a meta tag to specific pages. X-UA-Compatible: IE=EmulateIE7 Pedro M.
Animating CSS Shapes with CSS Animations & Transitions Notes About Current Browser Support for CSS Shapes: The Shapes properties are still in flux at this time. Most of this article's demos use the shape-inside property, which will be temporarily removed from Webkit and Blink. The principles of animating shapes is applicable to both CSS Shapes and CSS Clipping masks. Today we're going to be talking about animating CSS shapes with CSS animations. This is the third article in a series of articles I'm writing about CSS shapes, so in this article I'm assuming you have a basic understanding of how CSS shapes are created. There is a bug in some versions of Safari causing it to crash when the clip-path property is animated. Animatable CSS Shapes There are two ways we can create a shape with CSS shapes: using an image URI which the browser uses to extract the shape from, and using one of the available CSS shapes functions, such as polygon() and circle(), among others. Shapes defined using an image are not animatable. Accessibility in General 1.
10 ways to make Internet Explorer act like a modern browser Enable HTML5 on IE Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web. The html5.js is a very interesting project which aim to make Internet Explorer HTML5 compatible. » Source : Use the text-shadow CSS property on IE Due to the recent implementation of the text-shadow CSS property in Firefox 3.5, designers started to use it quite intensively. If you’d like to learn more about the text-shadow property, don’t forget to check out our list of resources to get the most out of the text-shadow property. » Source : CSS box-shadow on IE In my opinion, box-shadow is one of coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. Rounded corners! Ah, rounded corners.
Visual Basic 2012 Tutorial Visual Basic 2012 was launched by Microsoft in 2012. It is integrated with other Microsoft Programming languages C# and C++ in a package known as Visual Studio 2012. It is a full fledged object oriented programming(OOP) language. However, you don’t need to have prior knowledge of OOP to learn Visual Basic 2012 programming.Visual Basic 2012 retains most of the syntaxes that are similar to older versions of Visual Basic. Start learning VB2012 by following the lessons below: script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”> If you wish to learn more about Visual Basic 2012, you can download our E-Book, Visual Basic 2010 Made Easy written by our webmaster and tutor Dr.Liew.
css - How to apply -webkit-gradient to IE RSS Submit In last four years RSS has become the major way to notify readers about recent updates. It has almost replaced traditional e-mail newsletters and other subscription-based methods due to its effectiveness and ease to use. RSS feeds, however, still need subscribers, so submitting an RSS feed to various RSS directories and search engines should be the vital part of any promotion campaign. Automatic RSS Submitter RSS Submit does the entire job for you. Faster, Smarter RSS Submission Thanks to its multi-threading nature, RSS Submit does its job smoothly and quickly, fully utilizing your bandwidth while not overloading your system. Freshly Squeezed RSS Directories RSS Submit includes a built-in database with handful of various RSS directories and search engines it can submit RSS feed to. Summarizing everything, RSS Submit features: And finally 100% free lifetime upgrades make the tool one of the most cost-effective solutions in the industry!