Help in critiquing website

[Cheyenne]

Gary:

Go here for everything about this script, including support forums and proper packaging.


Here’s what you do

First, put this file and this file in your CSS directory.
Second, paste this code into your CSS file:

img { behavior: url(iepngfix.htc); }

Downloaded iepngfix.zip as suggested in first sentence above. Unloaded into the respective folder on my computer. Copied/pasted img { behavior: url(iepngfix.htc); } into my CSS, saved, uploaded. Didn't work. What did I miss?

[CaryD]

Downloaded iepngfix.zip as suggested in first sentence above...What did I miss?

There are two links in that sentence, iepngfix.htc and blank.gif. I have no idea where you found iepngfix.zip, unless you meant .htc. In any case, make sure you get the correct files and read the comments. Some useful tips there as well.

[Cheyenne]

Go to the website you gave me.
Go to this sentence below. HERE will bring up the website giving the iepngfix.zip download.

Go here for everything about this script, including support forums and proper packaging.

It has the iepngfix.htc and blank.gif plus 3 other files.
Cheyenne

[CaryD]

Try this:

img, #top, #content, #bottom, #menu li a { behavior: url(iepngfix.htc); }

and get this file. It uses a fix I found in the comments for repeating images. Let me know if it messes up the shapes of any of your pngs.

iepngfix.htc

[CaryD]

It has the iepngfix.htc and blank.gif plus 3 other files.

Oh, okay. The three other files are just for the sample. You only need the first two, but replace the iepngfix.htc with the one I gave a link to above. Otherwise, your repeating content background png image will disappear.

Stick the two files in the same folder as the html and css file. According to the comments, if your css and html are in different folders you need to stick the .htc file in the same folder as the html and adjust the css code to point to the new location for the .htc file. Fortunately, your site doesn't require to worry about that.

[Cheyenne]

Thank you, CaryD. I'll be working on this tomorrow.

Now to the "ole' sacaroo!

[CaryD]

Looks like you should only use this:

img, #top, #content, #bottom { behavior: url(iepngfix.htc); }

Otherwise, your rollover effect stops working.

[Cheyenne]

NOW, I understand.

Thank you for your patience & looking at my site for me!

Cheyenne

[Cheyenne]

Worked, CaryD.

Thank you for your help.

Now all I need is for me to go http://websitetips.com/tools/#screenshots
and check out other browsers, and to my Customer to give me more testimonials plus partners.

[MikeGale]

What were your results from the cross browser checks??

I noticed that the page did not resize when I changed font size. (Important for those who don't have perfect vision.) You have fixed pt sized fonts which cause this.

Here is a completely untested (and hurried) revision of your style sheet, which might fix that issue:


img, #top, #content, #bottom, #stuff, #menu li a {
behavior: url(iepngfix.htc);
}

.man {
font-size: 1.5em;
text-align: center;
}

.center {
text-align: center;
}

.color {
color: blue;
}

.size {
font-size: .80em;
}

.small {
font-size: 1.5em;
}

.smaller {
font-size: 1.0em;
}

h2 {
font: normal 136%/273% verdana, arial, sans-serif;
text-align: center;
}

/* Body and Wrapper */

body {
background-color: #B0C4dE;
font: normal 73%/118% verdana, arial,sans-serif;
margin: 0;
padding: 0;
}

#wrapper {
margin: 0 auto;
padding: 0;
text-align: left;
width: 800px;
}


/* Top Piece */

#top {
background: url(images/bgtop.png) top center no-repeat;
height: 78px;
width: 800px;
}

/* Content , another wrapper that holds all the content */

#content {
background: url(images/bgmiddle.png) center repeat-y;
padding: 0px 17px 0px 17px;
width: 766px;
}

/* All the content */

#header {
background: url(images/header.png) top center no-repeat;
color: white;
font-size: 4.1em;
margin: 0px 0px 10px 0px;
padding: 30px 0px 30px 20px;
text-align: center;
width: 746px;
}

/* Menu */

#menu {
float: left;
margin-left: 10px;
text-align: left;
width: 200px;
}

#menu li a {
text-align: left;
text-decoration: none;
voice-family: "\"}\"";
}

#menu li a:link, #menu li a:visited {
background: url(images/off.png) top center no-repeat;
color: navy;
display: block;
font: normal 118%/164% verdana, arial, sans-serif;
height: 29px;
padding: 8px 0 0 10px;
text-align: left;
}

#menu li a:hover {
background: url(images/on.png) top center no-repeat;
color: blue;
padding: 8px 0 0 10px;
text-align: left;
}

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

#stuff {
border-bottom: 2px navy;
margin: 0px 0px 0px 220px;
width: 520px;
}

img {
border: none;
}

/* Bottom */

#bottom {
background: url(images/bgbottom.png) bottom center no-repeat;
width: 800px;
}

[Cheyenne]

Hi, MikeGale.
Browser checks went ok.
Thank you for taking the time to give me a revision of my style sheet. I'll work on it tomorrow.

[Cheyenne]

MikeGale,
Tried this and the percents threw everything out of wack. em's weren't too helpful either.

[John Zeman]

Cheyenne I haven't been following this thread so I know I'm way out in left field as to what ya'll are doing, but in regards to using em units in stylesheets, I use them on almost all of my web sites. I've found I get the most consistent, reliable results with em when the base unit size is a percentage, especially when it's 100%. For example here is one of my typical starting stylesheet templates.


/* Begin Stylesheet */


a{
background:transparent;
color:#0000a0;
text-decoration:none;
}
a,body,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,ol,p,td,th,ul{
font-family:"Verdana","Arial","Georgia","Helvetica",sans-serif;
font-size:100%;
}
a:hover{
text-decoration:underline;
}
a:active{
background:transparent;
color:#00ff00;
text-decoration:none;
}
body{
background:#ffffff;
color:#000000;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
div{
line-height:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
div.center{
text-align:center;
}
h1{
font-size:1.5em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
h2{
font-size:1.4em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
h3{
font-size:1.3em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
h4{
font-size:1.2em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
h5{
font-size:1.1em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
hr{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li{
line-height:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
p{
line-height:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
table{
border-collapse:collapse;
margin:0px;
padding:0px;
}
td{
line-height:100%;
}
ul,ul ul,ul ol,ol ul{
list-style:disc;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

/* End Stylesheet */



The above gives me a starting point, the primary thing the template does is to establish sizes, margins, and padding values for each of the primary elements I tend to use in web pages. For text I'll adjust upwards or downwards from 100% via em values in my CSS rules.

Just offering it as some food for thought. There's other methods for sure, this is just one I prefer for my own work.

John

[Cheyenne]

I'll keep that information about your css.

I have been doing research in Google to find out what percent/em's equal a px. So far 1em = 100% = 10px. So, 1.1em would = 110%=11px?

I'm doing this not for height, but for font,'cause I've read em's are good for height and percent is not. Why???? I have Not a clue. I would say a pixel is a pixel, a % is a % and a em is an em!! BUT that the differences cause a problem in different browsers.


Well, while I await your answer, I'm going back to MY webpage, http://www.cableguymom.com and work on that. Maybe you'd like to take a look at it. I'm not asking for any help with this one 'cause it's not for a customer (except me tee,hee). My goal for my site is family genealogy and snaggs I've found that are free to others. Yes, I am watching out for copyrighted ones.

[John Zeman]

Years ago when I was trying to figure out what you're trying to figure out Cheyenne I found the following web site cleared up a lot of confusion for me.

http://www.richinstyle.com/masterclass/lengths.html

The one thing I do differently than richinstyle.com is I purposely use 100% in the following rule instead of 1em.

a,body,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,ol,p,td,th,ul{
font-size:100%;
}

The reason I use percentage rather than em there, is because the em unit there, when used as the base size, tends to result in drastic font size changes when a person increases or decreases the font size in their browser. Using 100% instead in that rule alone (using em pretty much everywhere else) results in more gradual linear font size changes. At least that was true a few years ago when I did my testing then.

The majority of the CSS sample template I posted above is based upon the richinstyle.com master class recommendations. Again, they very well may have changed their recommendations since I perused their pages.

I've bookmarked your cableguymom.com web site and will check it out a little later on tonight or over the weekend. Right now I'd better get outside while it's still nice out so I can get a little yard work done.

John