CSS

@font-face allows designers to specifically embed certain fonts in to their stylesheets. Now a days many sites are providing webfonts. For eg: Fontsquirrel, Webfonts etc. They are providing us with the css too, but it is not correct. This article explain about what they are doing wrong and how to fix this issue.

Continue reading

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.

Continue reading

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.

Continue reading
  • By tintu.manuel on December 31, 2012 - 16:38
  • CSS
0

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.

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.

Continue reading

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.

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.

Continue reading

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.

Continue reading
  • By tintu.manuel on October 12, 2012 - 16:34
  • CSS
0

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

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.

Continue reading

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.

Continue reading

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.

Continue reading

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.

Continue reading
  • By muhammed.fathima on June 5, 2012 - 23:56
  • CSS
0

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:

Continue reading

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.

Continue reading

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.

Continue reading
  • By webmaster on March 27, 2012 - 09:19
  • CSS
1

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.

Continue reading
  • By Deepa on December 15, 2011 - 16:27
  • CSS
0

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.

Continue reading
  • By webmaster on February 19, 2010 - 10:43
  • CSS
11

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.

Continue reading