CSS

Zyxware default image2
| 2 min read
The problem: HTML elements have inconsistent sizes across different browsers. The solution: Set box-sizing for all elements to border-box. A long-time bane for web developers, Internet Explorer did one thing right: It sized boxes properly. Other browsers only look at the content when calculating the width of an HTML element, with everything else treated as surplus. A width: 200px div, with 20px padding and a 2px border, renders as 242 pixels wide.
Zyxware default image1
| 5 min read
As we know CSS is an important part in Front end development. By using CSS latest versions, we can make good dynamic effects just like jQuery effects. But sometimes we are spending lots of time to fix some cross browser issues or to modify some styling changes. And if you want to modify the common styling, we have to write many coding in CSS. But if you are using some preprocessors like LESS it will make the CSS coding easily because we can add the code with a small effort. There are many advantages when you use a preprocessor like LESS or SASS. Just we need to install the LESS and a compiler which compiles the less file into CSS. For more details you can refer http://lesscss.org
Zyxware default image2
| 3 min read
Most of websites today anywhere some time requires speech bubbles. Speech bubble are mainly used for themes purposes were we need to to display some thing different from other part of contents(Include certain text such as tips of any information). With out any images we can create the speech bubble with CSS alone for your websites. The speech bubble creation is not a big task we can create it simply with a few line of css codes
Zyxware default image2
| 3 min read
In the near past, I had a requirement to add inline CSS to the content that comes after submitting the form. Let me explain the context a bit, I have a form, only on its successful submission, a block need to be displayed. If the submission failed, all I need is to return the form and error message back.
Zyxware default image1
| 3 min read
Some alignment issues occurring in IE may be a test for your patience. We had once worked in a Drupal 6 site, and the design look well every where, but there is a small alignment problem shown up in IE. Applying a conditional style sheet saved our time. Read on to know about how to apply conditional css in a Drupal 6 site.
Zyxware default image2
| 4 min read
While working on a wordpress site I came across a problem to customize the file upload button in Contact Form 7 plugin. I tried a few tweaks using CSS to customize the button but no luck. Later I found a trick using CSS and jQuery which is explained below. In my previous article "How to display location of an user in a mail send using Contact Form 7 plugin by passing the IP address in a Wordpress Site?", I have explained about Contact Form 7 plugin.
Zyxware default image4
| 2 min read
It is very good if we can create a pure CSS multilevel drop-down menu in Drupal. We can simply avoid adding additional modules or jQuery for the multilevel drop-down menus. As we had a requirement to create a multilevel drop-down menu without using jQuery, we created it in pure css. And it works well in different browsers. We created this menu as main menu for the header navigation part. And there is a region for the header part called "region-header" and it wrapped in a class called .header-wrapper. Also Drupal provides a class called 'menu' for ul. So we had to define the class-name along with the ul.
Zyxware default image1
| 3 min read
One of our Drupal clients asked us to customize the search box in one of their Drupal themes and bring in rounded corners and a search icon. However the solution we came up with was causing the search text to overlap the search block from in IE. If you are facing the same issue in your Drupal site and would like to know how to prevent search text from overlapping Drupal search block form in IE then read on to find out the solution.
Zyxware default image1
| 2 min read
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. On one of my Drupal sites, while validating a form, when a required input field has not been filled before hitting the Submit button, an error message is shown, and the field is highlighted with a red border. The red border was achieved with this CSS: