Suggestions and 'bug fixes' 1

[philote]

Please look at my site and let me know your opinions. My speciality is in cgi programming and not site design so any criticism is welcome. (oh, and I know the contact page doesn't work, I'm waiting on the host to install a Perl module).

I'd also appreciate some help with fixing a few 'bugs' in the look of the site. One is with the purple box at the top. The box is supposed to be of a fixed height but it will not stay that height. It changes to be only as big as the content inside it. Try changing text size in your browser to see what I mean.
The other bug is IE-specific. The bottom border of the boxes seems to be shifted to the left a few pixels and I can't figure out why. I had another problem with IE where it would make the top and bottom border divs be too high. I believe the problem was that since I had to put content in these divs (non-breaking spaces) IE displayed them, causing the divs to grow. I fixed that by setting font size to 0, but is there a better way around that?

Also, I've only tested the site in IE6 and Firefox so I'd like to hear how bad it looks in other browsers.

Thanks for any help you can give.

 

[cLFlaVA]

Hey--

I can't access your site, are you sure that's the right address?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[philote]

Heh, yeah it's right. It just so happens my host is having some 'issues'. And I have a reseller account through them!

It appears that at this particular moment the site accessible.

 

[cLFlaVA]

Hi philote.

Your bottom border problem is a common one. There is a fix, however: it's called the Box Model Hack. You see, IE incorrectly renders browsers.

Take a look here for an excellent description and fix.

Your other problem will likely be solved by 1 of 2 ways. 1) Make the whole thing an image. 2) Give it the following stylistic property: overflow: hidden;

Other than that, I like the design. Make sure you run it through a validator

http://validator.w3.org/

to make sure everything's copasetic under the hood.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[chessbot]

Ummm... cLFlaVA...
Open the page and look to the left (scroll down if necessary)

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[philote]

IE's box model problem supposedly doesn't show up if IE is in standards mode, which it hopefully is with the doctype I used. Also, if it were the box model problem the top 'border' would also have the same issue. Now, when I say 'border' I really mean the divs above and below the div with the box's content. When I decided to do rounded corners I didn't like the other methods I saw and came up with this one. I was hoping to put in enough 'extra' divs so that I would have more versatility when making other styles for the page.

I do appreciate you trying to help, cLFlaVA, but I just don't think that's the problem.

 

[cLFlaVA]

Thanks for the pointer, chessbot, but putting that image on a website does not make it necessarily valid, although this one may be

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[chessbot]

I know, but you can click on it and see that it is valid.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[ChrisHunt]

I don't think it's box model problems, but you may have fallen victim to the "3 pixel jog" that IE applies to floats when it feels like it. You may find some help fixing it here:

http://www.positioniseverything.net/explorer/threepxtest.html

IE float problems can be difficult to nail, though, and you may be better off using single images for both left and right corners - one for the top and one for the bottom of each box. Btw, did your search for ways to do rounded corners include this article?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[philote]

Yeah, I did some research before doing rounded corners and came across that article. I used some of the concepts in that article to make my layout but put in extra divs instead of relying on there being h1 or p tags in my boxes. I'm hoping this will also give me enough versatility when creating new layouts, much like csszengarden has some extra markup for that purpose.

Thanks for that link, Chris! That's one IE bug I hadn't come across yet. I added a height of 1% to the divs with the actual text in them and the problem is solved! And I didn't even have to hide any styles from any browser!

I'm really hoping to get a decent layout without too many hacks in it.... but I have yet to test in browsers other than IE6 and FF. Can anyone look at my site in Opera or other versions of IE to spare me the trouble?

 

[philote]

Oh wait, that created another problem, related to one I posted originally. The purple box was supposed to be a fixed height but was resizing according to its content. Now, in FF, the purple box is too small for the content so its contents are shown after the box. Any ideas for that one?

 

[philote]

Any more comments on the 'look and feel' of the site are wanted and welcome but I'm gonna post this most recent bug in the HTML forum.

 

[janet24]

Seems like there's too much white space.

I might fill in the green spaces on the left menu and news section. Then fill in the purple on the top where text (there's a problem)is. You might have to change the type to white so it reads on top of the green and purple.

Either leave the main text area white or make it a light orange so you keep the type black.

I like buttons that are graphics instead of html. It seems too easy to create buttons with html links, it seems lazy or cheap.

It's just an opinion.

 

[philote]

Thanks for the feedback! Both were good suggestions and I already filled in the background colors in the boxes with a lighter shade of their borders. And I'll probably whip up some images for the menu when I have the time, it was just so easy to put in html links

 

[ChrisHunt]

I like buttons that are graphics instead of html. It seems too easy to create buttons with html links, it seems lazy or cheap.

Not lazy, not cheap, just showing a little consideration for other people. If you use HTML to do your buttons (however you might dress them up with background graphics), screen readers will read them, people with poor eyesight will be able to re-size them and search engine spiders will understand them. They're also much easier to change when you want to alter the colour scheme or add a new option.

It'll save you some bandwidth too!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[philote]

Good point, Chris. Usually I just spruce them up with styles, so I guess I won't stray from the norm.