CSS

Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: CSS border for Select (Drop down) element does not work.

Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: In IE7, the CSS 'border-collapse' does not override cell spacing related tags.

Many Drupal users have wished to know how to use customized fonts in Drupal themes. If you are facing the same question when creating or modifying or editing a Drupal theme and want to know how to use customized fonts in a Drupal theme then continue reading.

Firefox seems to add an extra top-padding for all the anchor tags inside li elements. If you are facing the same issue in your website and want to know how to remove the extra top padding for anchor tags inside a li element in Firefox then read on to know the solution.

We had come across many situations while developing Drupal based websites where we had to create Javascript popups without using third party Javascript libraries. Third party libraries often lead to dependency issues or conflicts with existing Javascript functionalities. If you want to know how to create a simple Javscript popup in your Drupal website without using third party Javascript libraries then continue reading.

Almost all the browsers have different settings for base margins and padding. It is always important to set margin and padding for the body and html tags while styling web-pages. Otherwise it might result in some inconsistencies while displaying the pages across various browsers.

Normally while using Flag module, the flag name is displayed as a link. If you want to change this behaviour and replace the link with a button, you can do this easily by using CSS. You need not alter any forms for this. For this you may add the below code to your CSS.

Implementing multiple color mode switching is so simple! In HTML we can easily add the switching color style sheets as alternative style sheets.

Eg : <link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="../css/orange.css" />

But when it comes to Drupal there is a slight change. Here is how we can implement multiple color switches in Drupal theme. We normally include style sheets in .info file and we cannot specify 'alternative stylesheets' just like in HTML. So here we need a module called Drupal 'Styleswitcher'. By enabling this Drupal module you will get the option 'styleswitcher' to add alternative style sheets.

For more details just follow these steps.

The trick explained briefly

We are not actually going to theme the file upload field as it is presently nearly impossible to do that. Instead we are going to put an ordinary looking 'dummy' input text field over the file field. Next we proceed to make the 'original' file upload field invisible but accessible to the user via CSS. So when a user clicks on the dummy input text field they are actually clicking on the file upload field itself. To make it authentic we are going to copy the file path from the file upload field to the text input field via javascript.

Developers often overlook CSS as something very simple and not requiring a lot of thought. This leads to poorly thought out CSS rules, CSS abuse, inefficient CSS and ultimately bad rendering performance and slow page load times. Here is a simple tip to improve CSS performance and page load times - avoid descendant selectors.

Cross browser compatibility is one of the most important concerns of an HTML/CSS developer. Here’s how you can easily add shadow effect to your div blocks with cross-browser compatible CSS. Simply add the below code to the div to which the effect is to be added. You can change the size, strength and direction of the shadow in all browsers, except for IE, in which you can change only the strength and direction of the shadow.

We were trying to create a new theme for our Drupal site and we came across an issue. How to create div "left" to be the same height as div "right" which can be smaller or bigger?

Is it possible to have the "left" div height adjusts automatically according to the "right" div height?

Here is what saved us:

It is required of every Drupal developer to keep ahead of common browser compatibility issues. IE is probably the most notorious browser in any drupal developer’s dictionary.

For any site - be it Drupal or non-Drupal, this is most probably due to simple mistakes made while entering attributes. Let us see one very common case where a simple mistake can cause glaring issues:

We usually see the css given something like this. We do not see any glaring issue in the class defined below.

If we are using a custom font on our webpage and if that particular font is not installed on a user’s computer, then there is a good chance that our website would become unreadable. One of the best solutions to overcome this scenario would be to embed the said font file into the CSS in the webpage source. Checkout the most simple method of embedding fonts within a CSS.

What is CSS? This is a common question asked by most web users hoping to understand how websites are created when they encounter the three letters on the web? Almost everyone is familiar with Html as it is a simple markup language but CSS seems to be an enigma. Since most of our work in developing web apps based on Drupal revolves around CSS, we have decided to share our knowledge with you.

While designing fixed width layouts it is advantageous to use percentage based width for inner containers in the layout to make it easy for easy scaling up of the layout for other widths. When doing so you should be very careful about setting the actual percentage values. The percentage based width should result in a whole integer as the width. If not, you will end up with fractions as widths of containers leaving the rounding off to the browsers.