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;
}
I have lost my flash file, how do I get it back? What is a decompiler? How do I turn .swf files into .fla files?
Now, Chris and I differ on our opinions about this.
For $79.99, you can but this program called Sothink Decompiler. You can download a Flash movie off the internet, put it in this program, and it will make it into a Flash file for you to view the work of any developer around the world, including their script.
Now, for me, having no training in Flash on my own, I have to learn everything on my own. I do no know anyone to talk to Flash about, and so my experience with moving Graphics is one I have to gain on my own. Then, there is the problem that no matter how hard I try, and the fact that I don’t do it day in and day out and probably never will, I can’t seem to just sit down and write really complex programs.
For me, this program lets me see how it is done. I am not taking graphics out of the files, and more than likely, I will rewrite a script to fit my needs, using the original for a basis of what I need. So this is a great tool to learn. I actually used it for a project where there were these burning spark effects, and I wasn’t sure how it was being done. So I took a look at the file where I viewed it, and then was able to see how they did it, and created from scratch my own interpretation for my needs.
But it’s a double edged sword that is up to the individual to use wisely. There are many downsides to using it, becoming creatively lazy, alienation from the design world for what they view as “stealing”, and possible even problems at a job if you judiciously copy another piece of work from somewhere that comes back to reflect badly on your company.
So, it is one of those things, “Just because you can, doesn’t mean you should”. It is a good learning tool to be a passive observer, but can be a terrible tool in the hands of an unscrupulous person.
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.
How do I validate my .html for xhtml when it has Flash in it? What is the Satay method?
I had read about how to validate any .html files with Flash included in an article by A List Apart a couple of months back. Now as we are nearing the end of the project development, I am needing to go through and finalize the details in browser compliance and also in XHTML validation.
The Satay method was created by A List Apart, and it is a way to get around the non standards compliant, <embed> tag. If you are having problems validating your flash integrated documents, you can read the article on the Satay Method at A List Apart’s website.
This is what I found.
The article doesn’t go into too much depth. If you read, you will notice that you will be loading the actual movie into a blank movie container. The article doesn’t specify, however, how big that container should be in relation to the actual movie. It only say that it should be small so that it can load quickly, hopefully less than 4k.
What I found worked for me, was to set the container to the same dimensions as the actual movie I was loading. In this case, the movie I was loading was 740 x 100, so I made a container of the same size.
The second thing that I did different is in how I loaded the movie. The article says to pass a variable through the get string to the Flash movie container similar in fashion to this;
c.swf?path=movie.swf
In this example, I actually stripped off everything after the question mark (?), and changed the actual actionscript information in the container movie.
His method suggests you enter this into the first frame of your container’s timeline;
_root.loadMovie(_root.path,0);
I changed mine so that the path to the movie was actually in the container. In this case, the end result looked like this;
_root.loadMovie(‘/main_banner.swf’,0);
The final thing that I learned was actually about child elements in using the <object> tag. Basically, you can nest additional html information inside of the <object> tag in case the users browser does not understand. It is kind of like an alternative. In this case, we are going to use an image inside of the <object> tag that will display when it fails, or in this case, when the user does not have any version of Flash installed. Which is very rare, with something like 96% rate of use of at least Flash version 5.0
So now I have a valid XHTML compliant document that loads and contains Flash. Pay attention to the final code that is suggested for insertion. The main reason that it works is because it uses both the “data” attribute for the <object> tag, and the <param> tag with the attribute set of name and src to load the movie, which works for loading in both IE and Netscape type browsers.
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 can I run multiple versions of Internet Explorer on my Machine?
There were a couple of ways that you could do this unpleasantly, and one of them would have been to partition your system, and load different Operating Systems on each, with different browsers. So in order to view your all CSS website for testing, you would have to logout, and change to Windows 98, for example.
Well, I came across an article on Sitepoint.com, on how to get any older IE browser to run on your system simultaneously with others.
I could go into detail, but basically is came down to this one guy, who downloaded an update of IE 6.0, and looked at the files he got, asked a question, and then set out to answer it.
I know you are hooked, so go ahead and view the article by Joe Maddalone.
Now, this is the advice I would give anyone who is trying to do this. As Joe suggests, you should unzip each set of .cab files individually. The way he explains it was a little confusing to me. I would suggest to go to evolt.org and get the IE browsers you need, then completely unzip all of the .cab files into another directory. Then, I would copy all of the files for the version he suggests into a new folder, and try the browser by clicking on the .exe icon.
This worked best for me. Plus, as he is stripping out so much stuff, the “About” won’t display the right browser, but it does display like the version you are using.
Enjoy. This is a great tool.
Google sets it's sites on Mapquest and Yahoo with Google Maps!
If you want to try this out, the beta version is at maps.google.com.
This is the best thing I have seen from Google since their browser. You can hold your mouse down and drag a map in any direction you want. It is fast at re-rendering that map.
When you search for a map, they are up to date. Unlike Yahoo and Mapquest, which will have outdated information.
The directions it lists on the side of the screen in an easy to use fashion, and if you click on each step, it will animated the map with a highlighted icon that is 3d and stands up.
You can zoom in any direction, much faster than yahoo maps. It will actually zoom in and show you the intersection so you can get a clear, clean, and uncongested idea of what you are doing at each interval.
So, go and check this out. It will make your destinations that much easier to achieve, and it is fun to play with!
Google mail released to the public!
I signed up, by invitation only, for Gmail late last fall. With great space, 1 GB, and a super fast interface, I thought that this was a cool product. But for the longest time it was in beta only, because Google wants to test before they actually release. Well, it is finally public. Here is the actual email I got regarding their release.
Thanks for signing up to be updated on the latest Gmail happenings. We hope it’s been worth the wait, because we’re excited to finally offer you an invitation to open a free Gmail account!
Since last April, we’ve been working hard to create the best email service possible. It already comes with 1,000 megabytes of free storage, powerful Google search technology to find any message you want instantly, and a new way of organizing email that saves you time and helps you make sense of all the information in your inbox. And here are just some of the things that we’ve added in the last few months: – Free POP access: Take your messages with you. Download them, read them offline, access them using Outlook, your Blackberry or a ny other device that supports POP – Gmail Notifier: Get new mail notifications and see the messages and their senders without having to open a browser – Better contacts management: Import your contacts from Yahoo! Mail, Hotmail, Outlook, and others to Gmail in just a few clicks.
Add phone numbers, notes and more. Even use search to keep better track of it all. We also wanted to thank you. For showing us your support and for being so patient. And to those who have already signed up for Gmail, thank you for giving it a try and for helping us make it better. Our users are what have made this product great. So whether you’re just signing up for your account or you’ve been with us since the beginning, keep letting us know how we can build you the best email service around. That’s it for now. We hope you like Gmail and will share it with your friends. We’ve got lots of cool new stuff planned and we can’t wait for you to see our work in your Gmail accounts! Stay tuned… Thanks, The Gmail Team
So, there is no excuse to switch. Except that it could be a little work to update everyone that you know that you have changed your email. But that happens fairly frequently, right? The space and speed is more than worth it.
Plus, read on and you will see why Google is on a roll!
Free Google notifier for Gmail!
Notifier is kind of like having MSN, or AOL messenger on your desktop, but not annoying. This is little program that stores in your system tray that lets you know when you have new email on Gmail.com. Simple and easy to install, and like most of their programs, highly unobtrusive.
Here is an image of it, a tiny little envelope icon that signals that you are connected to your gmail.
How do I format my HTML code? How to I remove the extra blank lines in the code quickly and easily?
Because I am a designer, I am able to read code, but I can’t read it when it is all on one line jammed together. Table tags running into table row tags, that run into the table data tags, and so on. So I spend a good deal of time formatting HTML code if it isn’t already from previous work at Esystems.
Alot of times I will delete whole lines and have blank spaces and have to drag my mouse and hit delete. This is a two step process that I do a ton and this tip will help cut that time down greatly.
To remove spaces in your code, just double-click in any of the spaces, and Dreamweaver will highlight that code and then just hit “delete” and it will take it out.
A small little nuance, but can save a ton of time if you are deleting spaces as much as I do. And in one day I may edit anywhere from 25-50 different web pages.
How do I bold text in Dreamweaver? What are the proper HTML tags to bold text?
By complete accident in using shortcuts, the other day I figured out how to bold text in Dreamweaver using a shortcut in the Code View.Bascially all you have to do, is highlight the text, and press;
Ctrl + B
This will add the <strong> tags, which are the correct tags to use when bolding some text. The old tags, and the less semantic way to bold text using HTML are the <b></b> tags. When I say semantic, I mean using the markup to actual tell what kind of content they contain, mostly for the benefit of impaired users.
<b> tags don’t mean anything to an impaired user. Do they mean boy, ball, or bongo?. At least when you use <strong></strong> to surround text you know that the text inside inside is thicker in weight, or “stronger”.
I had always been aware that I could highlight text in “Design” view and click the “B” button in the Properties inspector, but I didn’t know I could use this shortcut in “Code” view.