Google Toolbar – Auto Complete – Yellow Text Fields
Posted by jerothe in 
Ever have this problem? I know I have. And I always wondered how to take care of it because as a web designer, on certain sites that have dark backgrounds, I don’t want my potential users to have some of my text fields yellow and some not. read more
Multiple Standalone Internet Explorer Browsers Evolved
Tredosoft has developed a nice little installer that will package up all of the stand alone versions of Internet Explorer into an easy executable. read more
Review of Greybox (Lightbox clone)
There are a ton of lightbox clones floating out on the web now. It’s funny that I only heard of lightbox late last year, and how much it has exploded. I see it everywhere, and I love it. read more
What are Conditional Comments in Internet Explorer?
It would figure that about five minutes after the ink dried on my previous post about child selectors, and “proper” use of them to send specific rules to each browser by exploiting a shortfall of Internet Explorer’s rending of CSS (breathe…..pause), I am now going to explain the better way to deliver specific rules to each browser using Internet Explorer’s Conditional Comments. read more
CSS Hacks with the Child Selector
I am sure that this comes as a real shocker to most of you, but CSS isn’t supported consistently across browsers. Wow. Ok. Now that we got that out and on the table.
When I say browsers, usually the clients I deal with don’t have a strong need to do in depth testing for multiple browsers versions as well as many different browsers. I am able to get a good portion of the primary visiting audience by testing for Internet Explorer 6 and Mozilla Firefox (any version).
Lately I have been testing more with IE 5 and Safari, mainly because I am getting a lot better at laying out complex pages in CSS in a concise manner, with reusable and portable little sections of code, and because I just got that Mac in the last couple of months. But I do run into some things pretty consistently with IE 5, and I wanted to share one of them with you tonight.
Child Selector Hack – html>body vs. class > class
There are many “hacks” in CSS which are floating around the internet. Hack is a little more vulgar of a term then the actual code you are writing. What you are actually doing most of the time is exploiting a bug or a way the browser parses certain types and orders of code to make the browser render things the way you need.
Child Selectors are something that are written into the CSS 2.1 spec. Eric Meyer, a guru on CSS, has a write up on Child Selectors at his website for more information
If you are doing complex CSS layout, you will quickly find great use for targeting specific instances of selector when they occur in your document. The Child Selector is properly supported by Mozilla Firefox because of their painstaking attention to following the standards, but Internet Explorer does not.
What this means, is that you can write a rule specifically for Firefox, and IE will completely ignore it. There are many times where I find that IE and Firefox render pixels in margin and padding differently. Usually the margin that they are rendered differently is somewhere between 4-10 pixels. Now, if you are a true expert that lives and breathes CSS, there is probably a true explanation for this. I haven’t researched that much into it yet, so as of now I don’t know that that is.
Many times I will have something positioned using margins that are relative to each other. For example, let’s say I want a two column layout inside of my main .wrapper. Here is how I would write those styles;
.leftCol{
float:left;
margin:0 0 0 20px;
width:200px;
}
.rightCol{
float:left;
margin:0 0 0 10px;
width:400px;
}
Now, a lot of time I will need all of that real estate, and totaled up here it equals 600px. So my calculations can mess up when it is off by just a couple of pixels, the floats can shift the blocks down, all sorts of fun stuff.
So, when I have my .leftCol being rendered with a margin on the left of 20px in Firefox, but in Internet Explorer it is rendered with more like a margin of 30px on the left, that is a problem. In step child selectors
For the above rule, this is what I would write instead to fix this problem. Since it is 10px more in IE, I will subtract that from my first rule;
.leftCol{
float:left;
margin:0 0 0 10px;
width:200px;
}
Now, this targets IE. But for Firefox, I want it to be 20px, so I would write this rule specifically for that browser;
html>body .leftCol{
float:left;
margin:0 0 0 20px;
width:200px;
}
What this is saying, is that when the body directly follows the html element in a document, apply the .leftCol rule.
Now, I thought this was a weird format, html>body .class. It seemed unnecessary, when I could just write a child selector rule that would work when two classes were right by each other. In this case, let’s say that the .leftCol style is right inside the main .wrapper, which we didn’t define here, but would normally. I used to write the above rule like this;
.wrapper > .leftCol{
float:left;
margin:0 0 0 20px;
width:200px;
}
But as I found out the other day, Internet Explorer 5 doesn’t seem to like this. It will actually not ignore the rule, instead read it. But it does understand that it just needs to skip over the html>body version. Now, I read online the other night that spaces make a difference. So, you have to write html>body and not html > body. So I don’t know if the spaces mattered in my above example or not, but I have started to write html>body to make sure that I cover my bases for both Internet Explorer 5 and 6.
Hope this write up was helpful. I am always looking to expand my knowledge base, just time is limited. If you have answers for any of my thoughts above, please, comment and correct me. Let me know how Margin and Padding get calculated differently, or why two .class Child Selectors together doesn’t render right in Internet Explorer 5.
How do I write my css classes with div tags?
I am constantly looking for css shorthands when it comes to writing my stylesheets. I tend to try to plan to make my stylesheets formatted with the best logical sense, portability across a site, and in a condensed, concise manner. Because I layout my website in CSS, doesn’t mean I design them any less complex, and that is why I believe that my style sheets push the range of 10-12 kb. The ideal size would actually be somewhere between 7-8 kb. With that in mind, that is why I like techniques like this all the more.
I read about this before, but didn’t really grasp it. To review, the Margin property. There is;
- margin-top
- margin-right
- margin-bottom
- margin-left
Instead of writing out each of these margin properties individually, we can give them a shorthand like so;
margin: 10px 0 0 0;
Notice, I don’t give 0 a measurement because 0 is still 0 no matter what measurement you use. A little shorthand trick. But, each of those measurements
listed goes in the following order; margin: (top) (right) (bottom) (left)
Let’s make our Margin shorthand even smaller.
To rewrite our example above;
margin: 10px 0 0 0;
I can actually condense the (left) and (right) margin because they are the same measurement. Our margin property would now look like this;
margin: 10px 0 0;
What the directly above example says is, margin-top = 10px, margin-left and margin-right = 0, and margin-bottom = 0. That is the order. This shorthand is specifically for instances when you have a different margin-top and margin-bottom property.
Why do I want to write class independant of my selectors?
This isn’t a rule you apply to every element, instead it is based on situation. As you get in depth into CSS, it is very useful to have certain classes only able to be applied to certain elements. But for your main block level containers, the containers that hold all your HTML page content from words to images, I prefer to leave them independant for one reason only, testing.
When I am trying to root out a problem, that generally stems back to some clearing issue, I will add my “border” style that I talked about
setting up in last month’s article solely for testing. If you are going through, testing your site, by adding a double class, trying to find the boundaries of the container and how they are acting with a border around it like so;
<div class=”wrapper border”>
You can’t have a double class applied to a selector specific class. Wow. That was a mouthful. Basically, by saying;
div.wrapper
If you apply any other class to that div element, it no longer will be valid and won’t display correctly. This is what I those two styles might look like;
.wrapper{
margin:0 auto;
width:760px;
text-align:center;
}
.border{
border:1px solid #000;
}
When I setup my class above, basically what I am doing is defining my main wrapper class, and telling it, “Hey, also add a border around it
to this specific instance.”
How do I write my css classes with div tags?
This is a general title that I hope will bring users in who are just trying to find information. But more specifically, I wanted to address a style of formatting vs. an advantage in formatting when it comes to writing your CSS website.
Stemming from last month’s entry, since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. As often as I notice that there are many sites that use “ID” selectors to define a class for block level div element, I have also found that this format is used for the class definition in the CSS file;
div#wrapper
or
div.wrapper{}
Ignore the ID for now (the first example), instead what I wanted to argue, was that there is a reason that you would not want to format your styles in this manner;
div.(classname)
This formatting is known as a selector specific class. What this means without the jargon, is that you are only allowed to have this class name, in the above example wrapper, on a div element. In your html page, you would only be able to add that class in this fashion;
<div class=”wrapper”>
You would not be able to add that class to any other structural HTML element and have it work correctly, for example these two wouldn’t work;
<p class=”wrapper”>
<li class=”wrapper”>
I hope that was clear
Sometimes it is hard to explain this at such a rudimentary level, there is so much knowledge you have to assume for one person to even understand this article. But that is why I no longer use selector specific classes on my main block level elements, rather using it where appropriate on a cases by case basis.
How do I write my class so that it isn't selector specific?
Just like any other style. I will assume that you know a little something about this if you are already here and reading this entry. If we got back to our stylesheet, you would retype;
div.wrapper{}
Instead to look like this;
.wrapper{}
This way, you can apply this style to any element you want, including the paragraph(p) and list(li) element tags I used in the above example.
Which should I use when laying out my CSS website, Classes or IDs?
Since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. I notice that there are many sites that use “ID” selectors to define a class for block level div element. I have wondered why that is, why they don’t use a “class” instead, but haven’t been able to say why one way would be more or less better than the other.
For example, you may have your main container, which is commonly called the “wrapper” defined either of these two ways;
<div class=”wrap”></div>
<div id=”wrap”></div>
But now I do have a good reason. I have recently figured out a good technique for testing a fully CSS layout. I will digress and admit that Dreamweaver does a decent job of rendering the complex CSS in the design view of the program. But it still is not very accurate, and when it comes down to it, you have to be able to analyze the problems on a website with only your knowledge at hand. Where, coming from a design background, this was much easier to see in Dreamweaver using a table layout.
I have found myself defining to styles in my style sheets, and although they are only used for testing and the real CSS loyalists say that keeping them in the stylesheet defeats the whole purpose of being concise, I leave them anyway for future use. This is usually what I define;
.border{
border:1px solid #000;
}
.background{
background-color:#000;
}
Basically these set classes for a solid 1 pixel black border, and a solid background color of black. That way, I am able to easily apply these styles as a double class to an existing class to help me test and visually see what is going on and where I need to fix my problem. Most of the time it is related to floats and clear issues. This is what the example with the wrapper would look like with my border class;
<div class=”wrap border”></div>
But, when you use an “ID” you cannot define a double class. I actually knew this, but had never really paid close attention until I tried to add a second class and everything messed up and I couldn’t figure out why. This is the big no no;
<div id=”wrap border”></div>
Now, granted, I learned this the middle of last month, and I have since found out about the “Web Developer” extension for Firefox, which I wrote about in my browser section. This allows you to draw borders around all block elements. But this doesn’t solve the same testing issue in IE, or Opera.
So, for that reason, I would recommend using “Classes”. If for nothing else, to make your life easier when testing out your beautiful CSS website.