REVIEW REQUEST : cardinalart.com

I think we all get that (if you look at it long enough ...)

First up, very impressed with the top banner/section part, mind you, you're an artist
a few alignment problems however (sorry to ruin the party)

NS4.7
there are to 1 pixel vertical lines, one under the left eye and one to the right of the right eye, height is flush with the bottom of the left section, and the very bottom right corner (of the top section) has about 5-6 pixel gap. also the word galleries isnt aligned, the bottom (or top) part of that image is about 2 pixels out to one side. there is also about a 2 pixel over lap half way up on the very right border. bottom section lines up great.

Opera6 (as Opera6)
same as NS4.7, except the bottom of the top section (where it goes to a point) does line up

IE5
same as NS4.7 but has an extra vertical line, right of the right eye on the top table row section, also the second to last image from the point is to far left

NS6
same as IE5 except bottom point bit is like the others, doesnt have the extra misalignment

Since your site is a graphic intense site, maybe help your loading time by using text links, the loading time wasnt to bad but using text links would help it that little bit and allow you to use mouseovers (a:hover)

I use 800x600 but took a look at bigger size, I think you should make the top and bottom section expand/contract with page sizes, cut the top image off after your name and add a td cell with background at 100%, this with table width of 100% would be awesome. same as bottom, add a extra cell to expand. could even consider using zero margins.

on the "blaze" page the top right icon isnt aligning properly in IE5 or NS4.7, ok in the others I've mentioned.

you also have little lines under your images, if you place the img code on the same line as the link code you wont get this line.

I am very hard to impress (I havent even done anything that impreses me ) but your stetch and layout design has impressed me, I hope you go with it.
as for the alignment of your work, depends on how much you have to show, if its heaps then what you have is ok, if not then spreading them out would be ok too.

Thank you so much for the compliment Busy!
Gee, you make me blush. :blush:
I know you make some impressive sites yourself, so I am honored to have "impressed" you.

Thanks so much for pointing out the alignment problems! I work on a 12 inch monitor (gee... that was embarrassing to admit to)
It's hard sometimes for me to judge how things look on a larger screen and I don't always catch those kind of problems.

I was contemplating using text links.
I'm so used to putting links in a standard "nav bar" that I've just gotten used to having to make graphics for most of my links.
I have the link graphics compressed pretty small, but with the way I have them it could probably look just as good as text.

Quote: I use 800x600 but took a look at bigger size, I think you should make the top and bottom section expand/contract with page sizes,...

Ohhh... I didn't think about that. That could be neat. It could really "frame" the page. Thanks!

Now I wish I didn't have those updates to do (and I promised someone a logo that I still haven't gotten done).
I'm anxious to fix those alignment problems and try the cell expansion.

Thanks so much for all the encouragement!

I see the same alignment issues as busy - it occurs in the headers graphic where it curves to meet the menu.

The menu is another issue -

There is something "off" about the quality of the text graphics. At first, I thought that they may be jpgs but no, they ARE gifs. Maybe it is just my dislike of serif fonts.

The other thing that caught my eye is the variation in font size throughout the menu, most noticeably "Portrait Lesson" and "Coloring Pages"

Regarding the expandable table idea, I think this would depend on the content. based on the main page, I'd be tempted to say a fixed width centered table would look better. This might also make it easier for you to design since you can't really test hi res views on a 12 (did you say 12?!?) inch monitor.

Good luck and I look forward to seeing more of this site.

Here is a screenshot of the alignment probs so you can see what I see on IE 6.0. The cellpadding settings may be making the gaps....not sure.

Confidence booster! Great artwork there Karen. I love your drawings.

You defitnitely need to resolve the alignment issues but I'm not particularly keen on the lilac graphic though, but that's just me! It would look better without a margin at the top of the page and as Busy said have text links instead of images as the links.

screenshot of the alignment issue at a higer resolution (1152x768)

http://www.sitesunseen.com/twf/kc_hires.jpg

As you see, it gets worse.

Thanks so much everyone for the great feedback!

I worked on trying to fix the alignment problems. Hopefully it will all line up now.

I really like the way it works with the margins set to 0.

I'm still getting a gap in NS6 right above the very bottom image (where it turns into a point). I can't figure out why it won't push that image to the top of the cell.
If anyone can tell me what I'm doing wrong I'd appreciate it.

I also turned the links into text. You all were right. There was no reason not to. Since it's done through CSS I can change the fonts or colors once I get the alignment issues strait.

The only thing I haven't changed is the color.
Sorry Webmistress, I like the lilac myself.

Thanks again everyone.
I really appreciate the help!

Looks perfect in IE 6.0 at 800X600.

Quote: I'm still getting a gap in NS6 right above the very bottom image

I don't have netscape here but have you tried turning off the cellpadding in the table where that image is to see if that will make the gap go away?
Oh, I forgot...I like the margins set at zero too.

Just grasping at straws...

I just hauled your code off to dreamweaver and I have another screenshot for ya. It looks like the cell that the image 5.jpg is in has a bigger height than the image. Take a peek HERE.
Maybe this could be causing you troubles???

Thanks disaster-master!
I'm glad it's finally lining up.

I don't know what I'm doing wrong with the bottom cell.
I have the cellpadding and cellspacing set to 0. I also have valign="top" in the td.

For some reason NS wants to push the image down.
I just wish I knew why.
I've gone over the code to make sure everything was on the correct line. (I know NS will put gaps in if the table coding is not perfect).

Oh well.... I'll look at it again in a little while. There's got to be something small and stupid I'm overlooking.

Oh, and Thanks again Busy for suggesting to set he margins to 0. I think that did a lot of good for the page!

I did find some places in the code where the cell height was specified. I love GoLive, but it does have a tendancy to put things in that I don't want.

I took out the height attributes in the cells, but I'm still having the same problem.

(I don't think it hurt to clean up the code though)

This is an image of what it's doing in NS:

I'm officially stuck for a solution now.

Thanks for all the advice so far!
Every little bit helps.

looks great in NS4.7, ie5 and Opera6 (as opera6), slight hickup in NS6, but we can fix it, or die trying as they say lol

the gap you extended is a slightly different color in Opera and IE, NS displays it the same, actually your site is best viewed with NS4.7

I'll have a look at your code and see if I can find the bug, NS6 is bad for things like this, this is why I stick to NS4.7 (I know I could upgrade, but the fact it has this bugs helps to solve these lil problems)

my display problem is different to your sin NS6, I see two gaps at the bottom

the word galleries could be taken off the margin a lil too

[edit] whoa, not going to be an easy job lol, I counted 18 tables, I think you need to fire your html editor lol, should/could be done in about 4 tables, could even get away with 3, but 5 would be tops.
I'm always up for a challenge I'll go play a while with it (to hot to work work anyways)

Ok found the slippery lil sucker lol

I used editpad (text editor) after saving (file/save as) so your line numbers may be different.

to fix your alignment problems change cellpadding from 10 to 0 on lines 89 (holds table with storytime) and line 104 (holds table with blaze) you can use at the bottom of the table (before ) instead to set the height of the content.

and the last thing is remove the tag on line 62 (under the td cell that holds portgal_titlebottom.gif) - between the center and table tags.

tested and works on IE5, Opera6 (as opera6), NS4.7 and NS6
no coffee was spilled in the finding of this

I would seriously consider changing your layout to use less tables, a few reasons, one would help load time and two would make editing, updating etc so much faster, at the moment you have to edit each table cell, using one main content section you'd only have to type in name etc.

oh and noticed your missing a few alt tags and have background="" and noticed you dont use quotes, to future standards you should get in the habit of using quotes always (or getting an editor that uses quotes)

Thank you! Thank you!
You have saved my sanity.

I was doing so well with the cross-browsers until NS6 came along. I think they made it just to frustrate people like me.

I know I need to rethink my design methods.
I love tables.... a little too much.

I have been trying to figure out how to lay this page out with fewer tables and still keep everything where it's supposed to be.
I was able to cut out one table.

I also realize I have a lot of important images that need good alt tags. I just haven't gotten around to putting them in yet.

What's the best way to put alt tags in for place holder images? I've heard some people say use alt="" while others have told me not to put any alt tag in at all.

I don't know where the background="0" came from. I think it's something GoLive added. I edited the code in Simple Text so I wouldn't have that problem.

Now I need to ask a stupid question...
What do you mean "use quotes"? What are quotes?
(Oh no..My lack of knowledge is showing... I've got to learn to hide that better.... lol)

Thanks again so much for the help!
It's always so much fun to come up with a different design then try to figure out how to make it work.

a good layout could be

1/ table for top section, ending before the thumbnails
2/ table for your thumbnails and navigation (navigation could be in nested table but isnt realy needed)
3/ table for bottom section

and everything in those tables can be aligned etc using rowspan, colspan and/or align and valign tags. dont be afraid to use table cells (td's) or table rows (tr's)

there are many ways to do layouts, this is only one way. no real right or wrong when it works, some are just easier to work on/with

always use alt tags, for spacers etc, just use alt="" (no gap between "'s)

" <-- quote (well its really a double quote)

is wrong
is right
the only difference is the quotes are added to all values, adding quotes and coding in lower case now will only make it easier for future versions of html (xhtml)

Well, I'm still working on honing down the design of my site.
I've changed a couple things around so hopefully there aren't any gaps in any of the images.
I'm also working on reducing the number of tables (although I know there are still a lot of them).
I've also added the first work-up of the home page.

I would really appreciate it if you could look at it and let me know if the menu's are working on the home page, and if they all line up.
I've tried testing it on all the browsers I have, but I only have a Mac with 4 browsers, so there are a lot of different systems out there that could be showing the pages much differently than what I'm seeing.

The home page is at: http://CardinalArt.com/KarenCardinal/index.html

Thanks so much!

Tried it in IE5, NS4.7, NS6.2 all fine and looking much better for having no margins but in Opera there is a load of text - Portraits Portraits Self Portraits Self Portraits Fantasy Fantasy Black & White Black & White Sketches Sketches Originals Originals Products Products Win a Print Win a Print Portrait Lesson Portrait Lesson Coloring Pages Coloring Pages Calendar Calendar Postcards Postcards Awards Awards Links Links Privacy Privacy Updates Updates - which appears at the top of the page.

Thanks for checking that for me Webmistress!

I'm not sure what's going on in Opera. It has to be a problem with the menus.

Hmmm.... I'm not sure what's the best way to have the links appear. (I guess it wouldn't be so frustrating if I weren't trying to make it as cross-browser friendly as possible).

I guess if I can't figure out how to make it right, I could go back to text links across the bottom of the home page.
I was just shooting for something nicer than that.

Thanks for the heads-up on the problems with Opera.
I'll see if I can figure out why it's doing that.

The plethora of text across the top is just on the home page isn't it? (I hope)

I think I would go for having the links next to the pictures as it isn't immediately obvious that they are where the links are anyway and that'll stop the Opera problem.

you have a error message in Opera6 (as Opera6)
Error:
name: TypeError
message: Value on left hand side of '.' is not convertible to Object: sub
when it loads, and
Error:
name: ReferenceError
message: Reference to undefined variable: No such variable 'hideMenu'
when trying to mouseover the images.

I also see the words across teh top of the layout, also your margins arent at 0 in Opera, i noticed you put html margins (leftmargin="0" etc) in your css file, "=" isnt a valid css indentifier, its ":", try margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px;
or remove them all together from your css file and just use the html body ones.

in IE it looks great, I like the way you have stepped down those images, very creative , if you can get this to work, maybe make the mouseover the same size as the image, the small bits of images that remain make it look a lil messy.
the top text "learn about the ..." should be the same size as the copyright text, or copyright text smaller.
back to your source code again for a sec, you have a few tags joined together, 3 tags in your body tag and the alt tag on images, older browsers dont like this, plus makes for easier editing later
looking good

I like the way you have this page layed out. Looks great. But I am not sure I like how the meuns cover up the images. Maybe do like Webmistress suggested and put the links next to the image. You would have to modify the layout a bit but I think it would look better.

Thanks everyone for the suggestions about the menus.

I am still trying to figure out a way to make them work. I still have a little sanity left, before I go nuts and do away with them all together because they won't work in Opera.

btw: The mouseovers for the images (as well as the menu layers) are the same size as the pictures. I just have to figure out what the offset for the coordinates are on a Mac. They line up perfectly on my machine, but I was afraid they wouldn't be lined up on a PC.

Thanks again Busy for catching my code problems!
I have EVERYTHING going through the CSS now.
The only thing I had to keep was the marginheight, marginwidth and the alink in the body tag. I wanted to do away with them (W3C doesn't accept marginheight and marginwidth as valid code). The only problem is NS4x wants to show a margin if I take them out and since it won't show the ahovers, I left the alink in just to keep it consistant. I'm not sure if there's an alternative.

I don't know if Opera is still showing all the text across the top (probably) .

I will keep working on the menus. I'm working out an alternative layout where the links are beside the pictures.

Thanks again for all the help!

arrrgghhhh i just typed out a big thing then it signed me out and lost it

still has words in Opera
the problem is in your first .js file (sample_data.js), encase all that code in a html comment tag at the end, should stop opera displaying the text, probably wont fix the onmouseout error thou

you could jut do a standard mouseover and make the link go to the page which has the sub menu on it.

cant remember what else i said .....

oh yeah and change your meta tag from http-equiv="keywords" to name="keywords"

Well, I know everyone is completely sick of me by now.

I just wanted to let you know, I'm trying a completely different approach for the navigation on the home page.
I'd appreciate any comments you may have on it.

Thanks so much.... again!

I bet you'll be glad when I stop this posting.

No no...no one is sick of you posting. That is the purpose of this forum. So keep posting til ya get it right.

I do like that. I think maybe you have it now. Lets see what the other say

If people didnt post we wouldnt have a reason to come and help, so ya'll post now ya hear

This is the part of the critique I dont like, *sigh* nothing more to say, works well in IE5, NS4.7, NS6 and Opera6, looks the same in all, works the same in all *sob*
I suppose I could mention the drop down boxs actually look best in NS6 as its only the down arrow and words, no boxing.

*maybe if I try bigger screen size it will fall apart? **checking** doh* even works at 1280x1024, spacing, alignment all good.

congrats, good well done

[edit] just noticed a couple of things when resized back to 800x600 in NS4.7 - the style sheet isnt being seen on the top text, you have the style sheet set to td, make a seperate class (can be anything) with the same specs as for the td and add class="??" into that td cell, as NS4.7 is showing default size and font, creating a small gap in the right image.

and thanks for the comment thanks but it was a team effort.

Very good now, well done

Thanks again for all your help with this!
Gee... looks good on all browsers.... That almost scares me. LOL

Let's see if I can goof it up then.

I have worked on fixing my "logo" up a little. I have 2 versions now. One is on my home page: http://CardinalArt.com/KarenCardinal/index.html
and the other is on my gallery page: http://CardinalArt.com/KarenCardinal/KCsubpgs.html
I think they need to be seen on the page to know if they work or not

Here's the questions:
Do they look too ginchy (fadish)?
Do they clash with the other text on the page?
Should I start over and try for something completely different?

I've also changed the link colors. They are all shades of purple and blue now. I'm afraid they may all be too similure though.

I'd appreciate your thoughts on the new elements.

Thanks again!

I think I like the second one (KCsubpgs.html) but could be missing something I cant put my finger on.
maybe as the other headings are over lapped and this one isnt looks different?

ever thought about using a pencil for part of your name, say the K or L?
or having your surname going across a pencil as if it was the brand name?

I still see black links

Well, as another member at this board knows...
Logos are definately not my strong suit (to put it nicely).
I'm sure he's given up on me finiishing his, because I can't come up with one I like for him either.

I was concerned that the logo and section header graphics might not look right together (that's why I asked if it clashed).
I do like the idea of intergrating a pencil into the design.
I'll play with that idea. Thanks.

Hmmm.... black links? I'll have to check out what I did wrong.

Thanks again!
I really do appreciate the help.

I like the second one as they stand now, although I'm not sure about the colour of the cardinal, but I do like the idea of itegrating a pencil into the logo as this would also tie in the pencils at the bottom. I think the way the second one is set up but with the l of cardinal being a pencil? May not look right when it's done but it's worth a try