Creating PDF's with Microsoft Word using PDF995.
Posted by jerothe in 
I posed the question of, “How do I make PDF’s using Microsoft Word” today to my fellow developer. He said, go to PDF 995 and you can download a plugin for Word that allows you to do just that.
When you get to the site click on downloads. Make sure that you download both the PDF995 Printer Drive and the Free Converter Version 1.0.
Once they are finished downloading, double click the installers from wherever you chose to save the file. These should pretty much auto configure.
Then, when in Microsoft Word, when you want to save a file as a PDF, just go up to File > Print and select PDF995 as the option to print. This will open a dialog box that will ask you where you want to save your file, and presto, you have a Word converted PDF.
Which HTML Selectors are block elements and which are inline elements by default?
We have talked about the display property before, but I just wanted to make note here what the defaults are for a select few HTML Selectors.
Elements that default to display:block, and will force a break, are;
p, h1, and div
Elements that default to display:inline and will stay as the name says, inline with other elements, are;
strong, span, and em
Remember, you can change the rules for all of these selectors in your external style sheet in how they display. Here is an example of what you write;
h1, h1, h3 {
display:inline;
}
span {
display:block;
}
In the second example for the redefined span tag, here is what would happen.
The redefined span element with a display of block will now force a break mid line.
Using images on a regular HTML input button
Using images on regular HTML buttons is something I have discovered in the last five months that can really help with the graphical appearance of a static form. Here is an example of a graphical button and the code;
Now granted, this is a quick example I pulled from my image archive, but you can design anything you want and use it in it’s place, here is the code;
<input type=”image” src=”/images/design/why_question.gif” alt=”Submit Button” />
The thing that is most important about graphic buttons is to use the alt attribute and here is why. Most browsers have options to turn off the downloading of images. Some people who have slow connections take advantage of this option, and therefore you button won’t be downloaded, and without an alt attribute, the user wont’ have any way of using a form, or any indication that there should have been a button there.
However, if you include the “alt” attribute, that alt text will come up in the dimensions of the button and the user will still be able to click the text instead. (This also helps if you are lazy and forget to check your link, and it becomes broken.)
I left out the “src” attribute for the input field below and look what the alt text does.
When I have an image right next to text in a table cell, why does the text start at the baseline of the image?
I’d had enough of this problem. It seemed stupid to have two table cells, one for an image and one for some text that was right next to each other. But every time I put an image right next to some text in a cell, the text aligned at the bottom edge of the image.
After some research, I found a “new to me” attribute for the image tag, Align. The align attribute will take care of that problem with the text and the image.
Here is the traditional image next to some text;
See what happens? It aligns to that bottom edge.
But if you add an “align” property to the image tag like this;
<img src=”/images/design/html/indy.jpg” align=”absmiddle”/>
This is what that thumbnail does now;
See what happens? Now it aligns in the middle.
Now, I am not sure what the difference is between the “absmiddle” and “middle” declaration of that property, but when I was using them the other day with two sets of text and images in cells next to one another, with the same sized thumbnail icons, the thumbnails were not on the same like, but were off one pixel when I used the “middle” declaration.
Here is the same example with “middle” set for align;
It seems to align pretty much the same as absmiddle.
Try it out, either way it is a nice little code saver and very useful on a day to day basis.
Empty div containers will cause a break without a comment in them.
Using a “Clear” container like I have mentioned in a previous article, to correctly extent the wrapper div element around content that has extended longer than it’s base dimensions, is a necessity when optimizing in Mozilla browsers. Mozilla browsers correctly followed the w3c spec for the “clear” element and as a CSS designer you have to be familiar with a blank “clear” element.
The other part you need to be familiar with is that a comment inside of the div element will prevent a break after it. So you may try this when setting up your “clear” element.
This is what you type to set it up.
div.clear{
clear:both;
}
Then when putting it in your document, it should look something like this;
<div class=”clear”><!–This is the clearing element–></div>
How to use float to get a gallery of thumbnails to evenly space each other.
I am still learning the proper way to use the “float” property in CSS.
Until the other day, I was under the impression that you can do is float two objects side by side with either a “float:right” or “float:left”. But when I was rebuilding a section of our Online Show Management System the other day, I figured out that by setting a number of “div” layer blocks to float left, that they will align next to each other.
The other nice part of that is they will go down to the next line when they reach the boundary of their container. Let me demonstrate.
Here is my class;
div.container{
width:250px;
}
This previous class is the container I will use to set up my little example thumbnail gallery. Here is the container for the thumbnails;
div.thumb{
float:left;
width:30px;
height:30px;
border:5px solid #cccccc;
background-color:#3399cc;
margin-right:8px;
}
I have set up a background color and a border so you can see the benefits of setting up some of your design to take advantage of the super fast CSS markup. Plus, it makes it easy to see each of the thumbnails. I then setup a margin to the right of each of the thumbnails and the bottom so they aren’t right up against one another. Finally, don’t forget the float:left, which will allow each of these thumbs to push against each other, minus to margin.
Here it is;
This is useful is so many ways, but just remember that a float:left will stack against each other horizontally. But also, this works best with objects that are the same height, because otherwise, this will happen.
The div block will go to the next line, but hit the lowest dipping layer and stack accordingly. But like I said, useful no matter what direction you are floating.
How do I make Super or Subscript letters and numbers using HTML?
Like those neat little footnotes you can add when doing word processing so you can properly annotate all of your sources? Of course not. But do you want to know how to achieve it anyway using HTML? Sure you do.
This was something I assumed, wrongly, that was done with CSS. But there are actually HTML tags to achieve subscript and superscript footnote type annotations. These are the two tags;
<sub></sub>
<sup></sup>
Surround the number, or whatever else you may be using these tags for, with this markup and you have your effect. You can redefine the selector in CSS, but I didn’t have much luck. I added a font-weight:bold to the selector, but when trying to adjust the font size, when set to font-size:10px I couldn’t see the number as good as when I didn’t set a font size.
Now, when I was reading about these two tags, I read that sometimes they can cause some problems with line height and making your line spacing look larger between lines in places where there is subscript or superscript. You can easily adjust that by added a little line height for your paragraph<p> for a certain section or a specific class, something like this;
p.lineChange{
line-height:20px;
}
or
.lineChange{
line-height:20px;
}
How do I turn the visibility off on a layer (div block)?
When I was working with layers in Dreamweaver before I built this site I was familiar with the visibility property for a layer. But not until recently did I learn that the best way to make a layer invisible is actually to change the declaration on a display property.
When working with visibility, which is written like this;
div.test{
visibility:hidden;
}
will actually hide the content in the layer, but it will not remove it. The dimensions will still affect the other layers. So, if you have a layer that is 200 pixels high that you want to show only after some user interaction and you use the visibility property, the content in that 200 pixel high area won’t show up, but the container will, so there will be a huge blank space on your page.
The better way to accomplish this, if you are using some Javascript for some DHTML is to use display:hidden. When you set display:block, this layer when then show up and push everything down below it.
So instead the above copy would be written like this to hide the layer;
div.test{
display:hidden;
}
And then to show it again;
div.test{
display:block;
}
This can create some great menus using only CSS which I will get into at a later tutorial.
Are height properties depreciated in XHTML 1.0?
According to the W3schools.org website, not only the height but the width properties are depreciated in XHTML 1.0. I am not sure why width is depreciated, but I have found that height is practically a useless measurement when it comes to CSS layout.
The content will drive the height of the containers and the correct use of paddings and margins will help cure any need for the use of a set height.
I found that it will cause problems when height is used in a CSS block container this weekend actually. My sidebar with the links and such was getting truncated after I switched my homepage into the archives. Turns out, my new blog entry wasn’t as long as the previous month of September, so I hadn’t noticed that the site was getting truncated in Mozilla browsers. This was because I had a height of 400 pixels set for my sidebar.
After taking out an absolute height, the content container resized the content and allowed the “clear” block element to extend the background down the height of the page, fixing the truncation problem.
How can I turn off scrolling if I know that I don't need it on a webpage?
I have encountered this before here at work. A freelance programmer was working a site that had frames and was database drive. Some of the pages he was working on would fit fine in the screen, but he still had a scrollbar for whatever reason.
If you know a specific page that you don’t want scrolling on, try this;
Add to your style sheet for a global change on every page:
<style type=”text/css”>
<!–
body {overflow:hidden;}
–>
</style>
Or as in inline style:
<body style=”overflow: hidden;”>
By default IE puts a vertical scrollbar on every page even when it doesn’t need it. That doesn’t explain anything in regards to scrolling bugs and frames per say, but it is a fix.