feedback and suggestions on my site

The site has a quiet, sparse elegance about it. It's the kind of thing I tend to like. Don't listen to me, though, where design is concerned.

The page breaks in IE. It is not centered, and the navbar is wonky. I think this is due to your having the xml declaration above the DTD. That throws IE6 into quirks mode where it is even less standards compliant, if that's possible. Remove that line (it's optional anyway) and the problems may go away.

I'm not at all happy with the cut and paste approach to layout. The way you're using absolute position (AP) elements for layout is a remnant from print design and makes for a brittle web design. This page should be completely made up of in the flow elements, except for the image and perhaps the navbar. Turn off styles, and you'll see the page almost lays itself out.

You might also consider, and it's not critical, sizing to fit an 800×600 window.

The catalog page needs a link back to the home page. It would be a good idea to have the full menu.

The contact page should make specific mention of snail mail and email addys in addition to providing form-mail and the footer info. The form-mail button needs to be more obvious as to its function. It is hard to discern that it is actually clickable. Never underestimate the user's ability to miss the obvious and depend on it if you get too cute.

cheers,

gary

Hi soianyc

Why have a mailto:[email protected] anchor in the email address? Why not point to the contact page instead?

The contact page has a button Send Email, which you may want to enlarge, as well as replace the text with just Send.

I would also take out the italicised property for the font in bottomdivider.

In general, I would try to limit the amount of font-families to 2.

I suppose the search functionality is under construction?

As kk5st suggested, also your catalog menu shows up entirely differently - and probably unintentionally so - in IE than in FF and Op.

Hope this helps

Tech

Thanks for the feedback, ill be sure to implement your suggestions into the sight and have it re-evaluated. I have a question though about using Absolute Positioning.

kk5st wrote

I'm not at all happy with the cut and paste approach to layout. The way you're using absolute position (AP) elements for layout is a remnant from print design and makes for a brittle web design. This page should be completely made up of in the flow elements, except for the image and perhaps the navbar. Turn off styles, and you'll see the page almost lays itself out.

Im not quite sure as to what you mean to this. Im still new to CSS and html so can you elaborate on how i would do this. I used AP so i can make sure that all my elements would be placed in the correct way, is this a bad way to design the site???

Look at the rewrite I made of your stylesheet. With no html changes, it still matches your layout (closely, and index page only), and allows for different window sizes and changes to the text. My changes do not consider your bg gradient image. You would likely need to alter that.

html, body{
    margin: 0;
    padding: 0;
    background-color: white;
    color: black;
    }

#mainbox {
    position:relative;
    width: 90%;
    margin: 0 auto;
    }

#logo{
    height: 100px;
    width: 150px;
    padding: 0;
    text-align:center;
    }

#logo img{
    border: none;
    }

#navcontainer {
    background-color: #666666;
    height:18px;
    width: 100%;
    }

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#navcontainer ul li{
    width: 115px;
    float: right;
    text-align: center;
    }

#navcontainer ul li a{
    height:14px;
    border: 1px solid gray;
    border-right: 0 none;
    padding-top: 2px;
    color: white;
    text-decoration:none;
    display: block;
    font: normal small-caps 600 medium/10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

#navcontainer ul li a:hover{
    color:white;
    background-color: #999999;
    }

#navcontainer a:active{
    background: #333;
    color:white;
    }

#navcontainer li#active a{
    background: #333;
    color:white;
    }

#main {
    background: url(../pix/gradient.jpg);
    width: 100%;
    background-repeat: repeat;
    padding-bottom: 1px;
    }

#mainpic {
    float: left;
    height: 300px;
    width: 350px;
	/*border: 1px solid gray;*/
    }

#textbox {
    text-align: justify;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    }

#textbox p{
    margin-top: 0;
    margin-bottom: 1.5em;
    }

#textbox a{
    }

#bottomdivider {
    height: 40px;
    background-color: #333333;
    color: white;
    text-align: center;
    letter-spacing: 2px;
    clear: both;
    }

#bottomdivider abbr{
	border:none;
}

#bottomdivider a{
    color:white;
    text-decoration:none;
    }

#toc{
    color: gray;
    text-align: center;
    font: smaller Arial, Helvetica, sans-serif;
    }

#toc a{
	color: gray;
}

#copyright{
    color:black;
    text-align:center;
    font-size: smaller;
    }

cheers,

gary

k55st

I tested out the stylesheet you gave me and its almost dead on to what i have. This is very interesting and i will definitely have to study how all of this works. I do have to change the gradient but that is a piece of cake.

I appreciate the rewrite you gave me and after i learn how it all works i will start to apply this new way of CSS layouts to my future projects.

Thanks again for all your posts and suggestions. after i make some more changes and add some more content i will be reposting my site for your evaluation again.

-Regards
soianyc

Wow i pretty much realize how you did all this. This is what i found out so far.

Basically my html code was fine. with the css you just defined each property and the html code was already setup to put each item in order, which means that all the AP stuff was redundant. This way it makes the site flexible and everything gets placed according to how my html code was setup.

If my theories are incorrect please elaborate but that is what i have figured out studying the updated CSS code you wrote.

Again thanks for all your input.

-soianyc

A classic makeover of a classic mistake!

Gary, as usual you have done a great job and soianyc you are the kinda person we love to help because you not only want help - you want (and willl work toward) understanding. Also, to your pleasant surprise, well formed, semantic HTML makes it a breeze to transform the CSS to something that captures the elements of your very chic design into a robust and flexible positioning structure.

Here is an alternate take on some of the dimensioning that makes div heights more responsive to font-size changes:

html, body{
    margin: 0;
    padding: 0;
    background-color: white;
    color: black;
    text-align:center;
    font: 85%/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

#mainbox {
    position:relative;
    width: 90%;
    margin: 0 auto;
    text-align:left;
   }

#logo{
    height: 100px;
    width: 150px;
    padding: 0;
    text-align:center;
    }

#logo img{
    border: none;
    }

#navcontainer {
float:left;
xpadding:.1em 0;
    background-color: #666;
    font: normal small-caps 600 1em/.8 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

#navcontainer ul {
    margin: 0;
    padding: 0;
    }

#navcontainer ul li{
    margin: 0;
    padding: 0;
    float: right;
    list-style-type: none;
    }

#navcontainer ul li a{
    display: block;
    text-align: center;
    white-space:nowrap;
    width: 7em;
    border: 1px solid gray;
    border-right: 0 none;
    padding: 2px 0 3px 0;
    color: white;
    text-decoration:none;
    }

#navcontainer ul li a:hover{
    color:white;
    background-color: #999;
    }

#navcontainer a:active{
    background: #333;
    color:white;
    }

#navcontainer li#active a{
    background: #333;
    color:white;
    }

#main {
    background: url(../pix/gradient.jpg) repeat ;
    padding-bottom: 1px;
    }

#mainpic {
    float: left;
    height: 300px;
    width: 350px;
    }

#textbox {
    margin-left:350px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: justify;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-size: 14px;
    }

#textbox p {
    margin-top: 0;
    margin-bottom: 1.5em;
    }

#textbox a{
    }

#bottomdivider {
    padding:.2em 0;
    background-color: #333333;
    color: white;
    text-align: center;
    letter-spacing: 2px;
    clear: both;
    }

#bottomdivider abbr{
   border:none;
}

#bottomdivider a{
    color:white;
    text-decoration:none;
    }

#toc{
    color: gray;
    text-align: center;
    font: smaller Arial, Helvetica, sans-serif;
    }

#toc a{
   color: gray;
}

#copyright{
    padding:.2em 0;
    color:black;
    text-align:center;
    font-size: smaller;
    }

Addendum: You should consider a max and min width. There is css for that for compliant browsers and a way to fake it in IE using conditional comments and proprietary IE CSS expression: coding. But we can leave that for another day.

DE