Help in critiquing website

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Cheyenne
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by 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?
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD »

Cheyenne wrote: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
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by 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
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by 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
Last edited by CaryD on Sun Mar 18, 2007 9:54 pm, edited 1 time in total.
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD »

Cheyenne wrote: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
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne »

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

Now to the "ole' sacaroo!
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD »

Looks like you should only use this:

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

Otherwise, your rollover effect stops working.
Cheyenne
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne »

NOW, I understand.

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

Cheyenne
Cheyenne
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne »

Worked, CaryD. Image

Thank you for your help. Image

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.
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Post by 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
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne »

Hi, MikeGale. :D
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
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne »

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

:(
John Zeman
Rank III - Intermediate
Posts: 54
Joined: Sat Dec 11, 2004 2:17 pm

Post by 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
Rank III - Intermediate
Posts: 86
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by 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.

:roll:
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
Rank III - Intermediate
Posts: 54
Joined: Sat Dec 11, 2004 2:17 pm

Post by 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
Post Reply