A bugs in IE 5.0 with the use of text-transform and font in the same declaration.
Posted by jerothe in 
I found another IE 5.0 bug today.
When using the text-transform property in the same declaration as the font property, IE 5 ignores the text-transform.
For example;
div.testContainer{
text-transform:uppercase;
font:bold 12px verdana, arial, sans-serif;
}
This would totally ignore the fact that you may want the text in the testContainer to be completely capitalized.
When doing some research, I found that it didn’t help if I wrote out the font shorthand into it’s individual properties like font-size, or font-weight, like some articles claimed.
What I did find worked for me was to seperate the two, where the font tag was inherited.
In my real life example, I actually had a header defined specifically for use inside of my div container. So for our previous example I had this;
div.testContainer{
width:400px
margin:0 auto;
}
div.testContainer h1{
text-transform:uppercase;
font:bold 12px verdana, arial, sans-serif;
}
As you see I changed the previous example a little. But you get the point. I had a header that I specifically wanted to use inside of testContainer so that helped facilitate my solution. In the end, I actually took the font declaration and moved it into the div container, so the header declaration would inherit it but IE still would recognize the text-transform declaration. So now our example looks like this.
div.testContainer{
width:400px
margin:0 auto;
font:bold 12px verdana, arial, sans-serif;
}
div.testContainer h1{
text-transform:uppercase;
}
How do I control my margin vs. padding? Is there any other way to get around using the "child" element hack?
As I have been writing more and more CSS, I have found that the best rule of thumb is that when placement is concerned, do not use any sort of padding-left, or padding-right in Internet Explorer. When I use padding for top and bottom, that doesn’t affect things too much, but because IE adds all padding values to the actual size of a table cell, or div, it is unpredictable at best.
But even when I use margin to add space to the left and right of an element, I have problems with that measurement being consistent between browser types. As a result, I have a bunch of ugly child element hacks that look something like this;
div.mainContent{
margin-left:20px;
}
/* This hack will re-set the margin left in Mozilla browsers */
body > div.mainContent{
margin-left:10px;
}
This is the problem I am having. It is stupid extra code, and if a different user comes in later to use this stylesheet, they may have no idea without lengthy, code bloating comments on what this specific hack is all about.
So, what I should have done from the start when creating placement for elements was to use relative placement. Relative placement mean, in relation to, and seems to be consistent across browser, even old ones. So for this previous example, I would use this code instead;
div.mainContent{
width:200px;
position:relative;
top:10px;
left:20px;
}
When using Relative positioning, you can use any of these value pairs, top, left, bottom, and right. But I think you will find that you will use top and left the most.
From here on out, I am going to stay away from using Margin for positioning and use this instead.
I have seen three digit hex codes to define color. What are they? How do three digit hex color codes work?
When first starting to look through CSS styles sheets to see how things were done, I would come across hex codes for colors in this format:
color:#000;
I think I may have read about how they worked, but glazed over it. I had the impression that a three digit code meant that you were shortening a repeating number that was all the same. So for the previous example I figured that the shortened three digit version was actually the full definition for the color black which is;
color:#000000;
But today I learned that was wrong. Instead the code is a shorthand for three sets of digits that repeat. So this is my new example;
color:#060;
This shorthand version for this hex code is actually this written out in long version;
color:#006600;
Need another example? Ok how about;
color:#251;
Translates into;
color:#225511;
So you see, it takes each one of the repeating numbers, and pairs it down. This is just a small little simple way that may save you time, and may even save you a little bit of loading time for the style sheet, but in all actuality, I think is a little more preference. Most of the advanced style sheet users do it this way, so at the very least you look like you know what you are doing.
How do I reduce the size of my CSS file? Can you teach me some "shorthand" tricks?
In the quest to have the best possible CSS site without going psycho like some of the CSS purists out there, I started to take another look at my CSS sheet.
Having written this over three months ago already, I have learned a great deal during that time about how to reduce some of the CSS rule declarations. I also have doubled my site from the original idea, so the sheet is getting a little unruly at 20k. But for now, I think that I will try to reduce where I can, but am not going to spend many hours for just a couple of “k”. Remember, when your users visit your site and load the homepage, the style sheet will go in their cache and won’t need to be loaded again while they are at your site.
So, the first thing I did that had nothing to do with “shorthanding” declarations, I removed the “px” from the end of any of my measurements with a “0″.
The reason for this being that “0″ is the same value, no matter what measurement you give it. 0px is the same as 0pt and that is the same as 0in.
Now, on to shorthands declarations.
What is the definition of shorthand? To shorthand in CSS is to basically combine a similar set of CSS declarations into one. The main two that I am going to be dealing with here and use on a day to day basis with CSS are the background and font declarations.
Here are some of the possible declarations and value pairs that you can have in CSS;
background-color:#444444;
background-image:url(../images/example.gif);
background-position:0 50%;
background-repeat:no-repeat;
background-attachment:fixed;
I hope that most of these declarations are familiar, but if they aren’t, you can always look to the W3C Schools for more information. I am just going to go over the last three that are a little less explanatory.
background-position – is where the background image is placed. You can either input measurements the first one being for “vertical” and the second being for the “horizontal” with the upper left corner of the browser being the axis, coordinates of 0,0. So I can either put an exact measurement for a position from the top, a percentage, or even some of the other values such as top, center, bottom, left, right.
background-repeat – is to specific how your background repeats. The possible values can be no-repeat, repeat, repeat-y, or repeat-x.
So for this example, we don’t want the background to repeat at all with the “no-repeat” value. But we can have the background repeat on the horizontal axis with a “repeat-x” or on the vertical axis with a “repeat-y”.
background-attachment – is to specify whether a background is fixed or scrolls with the rest of the page. This only has two values, scroll or fixed. I use this in my website because I never know how long my pages will get, but I can make my background image as high as I think the maximum viewing height of any browser will be. In my case I made my background image 1300 pixels high, which may be overkill in size, but I like the look and am willing to go over that little bit for aesthetics.
Back to the original idea.
So for shorthand, you can write all of these properties in one declaration called background. Here is how they would look re-written;
background:url(../images/example.gif) #444444 0 50% no-repeat fixed;
“What is the rhyme and reason to this?” you ask. Well, for the background declaration, you can list the values in any order you want. Also, I think the bare minimum to use this property is just one value, any value, just pick one. It is a flexible declaration and that can save you up to five lines of code when you are using background properties. But the “font” shorthand is not as easy going, but just as efficient.
Here are some of the declarations for the font family;
font-size:12px;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-variant:normal;
I use the first three declarations here over an over on a daily basis. I will admit though that I have never used the “font-variant” declaration, which is basically to set the font in a “small-caps” size or “normal” sized font. There is also a way to incorporate the “line-height” declaration, but again, reference W3C schools for more information on that as it is beyond the scope of this article.
When using the shorthand for font here is what you need to know. In order to use the shorthand you must have at least the font-family and font-size declarations in place, and the size always comes first. So the bare minimum will look like this;
font: 12px Arial, Helvetica, sans-serif;
Now, you can put the other values in. I have found that there is a order to things, and that browsers react better when you put the other values first in order. So our final shorthand would look something like this;
font: normal italic bold 12px Arial, Helvetica, sans-serif;
The success!
By taking out all of my “px” on all the measurements of 0 and shorthanding all of my font and background declarations I was able to cut out 1k of code from my stylesheet. That is good enough for me!
I hope this article was helpful, and didn’t glaze over too much when it comes to CSS. It does assume some knowledge base, but I assume if you are reading this you do have at least that. Send me any questions at my hotmail address, jrothe {at} rothecreations(.)com.
What does the acronym XMLNS stand for, what does XMLNS mean?
I was reading an article today on the accessibility benefits of <tbody>, <tfooter>, etc. tags for definingsections of information for a visually impaired user. That is when I came across was the xmlns attribute of the html selector means.
XMLNS means “XML Name Space”. But you may ask, what is a name space? I can’t really answer that yet. My limited understanding is that it is the path to find the specs for an XML document that you have linked to an HTML page.
I you “view source” on my webpage in the top you will see when I declare my <html> selector the tag has an attribute call xmlns in it and it looks like this;
<html xmlns=”http://www.w3.org/1999/xhtml”>
I can’t totally explain, like I said what it is for, I just know that when I was developing this site, I needed it there to prevent a “bugs” mode from happening where the CSS markup didn’t act properly.
Why do I need to close certain elements in XHTML like the <img> and <meta> tags?
I also happened across a better explanation on why a closing tag is needed on certain selectors in the XHTML spec. When I say “close” I mean with a closing forward slash and bracket like this />.
HTML is a markup language and so is XML. So when you don’t “markup” some information like with an image tag like this;
<img src=”http://www.rotheblog.com/images/design/jenbio.jpg” alt=”Rotheblog Bio Image” />
Where there are no tags surrounding the image, it is a stand alone tag, you need to close it with a “/>“