Shaun Mccran

My digital playground


My handy IE CSS tweaks list

I'm not really a design kind of person, I like designing things, and I'm learning more and more CSS all the time, but it's the server side coding that I love like Apple Pie and custard.

Recently I've had to do a bit more design work, so I've been tripping all over myself to get CSS working in IE6,IE7,IE8 and firefox. I've learnt a few interesting things in the last few days, and I know I'm going to need to use them again. Some are considered 'hacks', some are just clever CSS techniques. They all feel a bit like secret rules of a club I'm not really a member of yet though.

So I'm making a handy list, so I don't loose them. I hope to refine and add to this on an ongoing basis, so if you know a better / easier way please let me know. After all coding standards are for life, not just Christmas, and I don't like the idea of anything being a hack, even if it is CSS.

Adding a 1px high line to IE

I am trying to add a 1px line, like a HR line to the page, it displays fat in IE?

It seems that some versions of IE will display a div without content as the same height as your font size. Add html comments to it to drop it down to the right height:

view plain print about
2.yellow-ruler {color: #ffd520; background-color:#ffd520; width: 100%; height:2px; margin: 3px 0px 0px 0px;}
4<div class="yellow-ruler"><!-- --></div>

IE is adding padding and margins to everything by default

I think there is a lot more information about this out there, but for now I've found that adding the code below will kill most of IE's random padding/margin issues.

view plain print about
1* {margin:0; padding:0; border: 0px;}

I've built a JQuery accordion and the content doesn't move correctly

When expanding a JQuery accordion element the content underneath it is not moving down, and the accordion is expanding over it. This was a simple fix, but a bit of a pain to find. Just do not specify a height attribute on the div that hold the accordion, IE will stick to the height, but firefox will let it grow to be longer.

Styling form element borders

If you have a CSS rule like the one above that removes all the margins, padding and borders then all your form elements will have no border. IE your text fields and textareas etc will not have a clearly defined edge to them. By adding the line of CSS under this (select,input, etc) you can set the style width and colour of your form elements so that you control them, rather than the browser defaults. In Internet explorer this will also add borders to the checkbox and radio form elements. There does not seem to be any way of writing a CSS style to remove this inherently, so create a style of borderless and set all your radio and checkbox fields to "class=borderless".

view plain print about
1* {margin:0; padding:0; border: 0px;}
3select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;}
5/* IE stops the radio borders */
6.borderless{border: 0px;}

Strange IE positioning fix

Sometimes in IE (mainly 6) using position: absolute just does not render the div on screen. I am not sure why. Adding a "clear: both;" or a "clear: left;" or a "clear: right;" appears to fix this.

Easy centering of elements

I used to struggle with centering elements on a page all the time, but now you can do something like this:

view plain print about
1P.blockoftext {
2 margin-left: auto;
3 margin-right: auto;
4 width: 6em
7<p class="blocktext">Text</p>

This will center a block of text and give it a width of 6.

For images you can do this:

view plain print about
1img.displayed {
2 display: block;
3 margin-left: auto;
4 margin-right: auto }
6<img class="displayed" src="..." alt="...">

That will auto center the image inside its containing div.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
salmanonline's Gravatar Thanks for this wonderful tutorial article. Yes I agree that addition of padding and margins by default is a major issue that needs to be resolved by IE ASAP as it just affects the look of any website.
# Posted By salmanonline | 15/12/2015 15:19
free blogger template's Gravatar The above tweaks you have listed here is quite handy for your viewers you will find some more handlers
# Posted By free blogger template | 15/12/2015 22:23
free blogger themes's Gravatar I am glad to read this wonderful post.
# Posted By free blogger themes | 16/12/2015 05:31
Katrina Kaif HD Wallpapers,Images Download 2015's Gravatar Amazing post. Thanks for the share. get Katrina Kaif HD Wallpapers,Images Download 2015 in 1080p Resolution. Katrina Kaif images download, Katrina Kaif wallpaper hd, Katrina Kaif photos hd from
# Posted By Katrina Kaif HD Wallpapers,Images Download 2015 | 19/12/2015 15:09
aditi's Gravatar t doesn’t don't forget what number of blogs you need to cowl up with content material, GreenHatWorld spinner will permit you to rewrite your article with the improved vocabulary in addition to elevated fee from the preceding one. Every other splendid component here is th
# Posted By aditi | 10/01/2016 04:01
Back to top