Website Validation + What Does It Look Like on Another Screen?

[tharden3]

Hey Bytes,

I've been having a bit of trouble with my site. It is HTML Valid, at least as far as I can control. There are three errors that show up on the HTML Validator, but these are errors with PHP scripts on the host server... scripts that are not mine and that cannot be accessed. I'm almost certain though that none of those three errors are effecting anything having to do with how my site renders.

The problem is that a client of mine complains that the links on the left side navigation are acting strange and are hard to access. It should not be doing this. I've check the site over FF, IE, Opera, and Safari. Works fine in all of those. My HTML is valid and it works correctly in both IE and Firefox. What else could cause this to render incorrectly?
link

P.S.
It renders correctly from IE 5 and above.

[drhowarddrfine]

I'm not sure what you're talking about but, if you mean the 4 product links on the left side, the popups obscure the other links underneath, so that's what he means by inaccessible, I guess. The easiest solution is to just give them more than 8em margin on the left.

[tharden3]

@drhowarddrfine
Yes, that is precisely what I am talking about. The problem though is not that they obscure the ones beneath, thats fine, but rather that sometimes when they would hover over the link, the box that pops up is about 300 px away from the one they are hovering over. So imagine hovering over one of the side links only to find that the pop up box is too far to reach with the cursor before the box disappears. I'm not sure this issue matters anymore... I suspect they were looking at the site before I fixed this problem about two weeks ago. They haven't checked it in 2 weeks, and they are reporting a problem to me from two weeks ago that has already been fixed! They just need to check the site again...

Anyway, too much of me rambling in this post. I'll come back for help if the problem persists.

Did it render correctly for you Doc? Anything look really strange or odd?

Like I said: HTML Valid, works over IE and FF. I don't know what else could cause the problem.

Thanks for the help,
Tim

[tharden3]

Update:
The problem is still there. The pop up box is floating too far to the right for them to click on it before it disappears.

Here is a question that, if answered, would really help me.

What can cause a website to render differently?

- Web Browser
- Valid HTML

What else? Can screen resolution? I don't know I'm just throwing stuff out there.

[drhowarddrfine]

What's happening is you have the parent <dd> absolutely positioned removing it from the flow. The child <ul> is now jumping outside that box when the page widens. Setting the <dd> to 'relative' solves that problem but misaligns the links when you hover over them.

[tharden3]

@drhowarddrfine
would it be wiser to scrap that entire navigation bar and go with an easier design? Just open a new page when the first link is clicked?

[drhowarddrfine]

I don't think it's worth doing that. There's not much wrong with what you've got. It's just a positioning issue. (I'm not saying I would have done it that way but no one knows the markup better than you.)

[tharden3]

@drhowarddrfine
Thanks for the help.

[tharden3]

Making 'dd' relative solved the problem. I'm just concerned that I have no way of seeing what they see in their wider screen.

Is it just a matter of understanding my code across various computers? Or is their software or something to help me check?

I wouldn't have caught that issue if the client I made the site for didn't have a large screen. That would have made the site unusable to a lot of visitors.

[drhowarddrfine]

I assume you can do this on Windows. Resize the browser and grab the frame and slide it halfway off the monitor. Then grab an edge and stretch it wider. Slide that off the screen some more and stretch again. Continue as often as needed.

[tharden3]

@drhowarddrfine
Not quite. I tried it... it didn't work. I'm going to Google around. I'm sure somebody has solved this problem already.

[drhowarddrfine]

@tharden3
Another win for 'nix.

[David Laakso]

What can cause a website to render differently?

In your case, with this site?
-- Making assumptions
1/ That since it worked for you with your stuff it will work for everyone with their stuff (insufficient testing)
2/ That everyone in the universe is the same age as you and has the same vision needs you require (insufficient testing)
3/ If it works in whatever OS/browsers you have, it will work in whatever OS/browsers everyone else in the universe has (insufficient testing)
4/ Author error (as in human bugs)
5/ On a less than 950px width page, as yours is, having the flyouts 100px outside of the the outermost wrapper, is well... (insufficient testing).
6/ The belief that users are morons and that they do not know how to use their machine (insufficient testing).

Aside: As of this writing your menu is unusable at +2 font scaling in Safari and Seamonkey. And you don't want to know what Opera does to it at min font-size 32px.

[tharden3]

@David Laakso
You are being a bit harsh, don't you think? I haven't assumed anything.....
1.) I know that not everyone uses the same browser and I accept that. IE needs a lot of fixes (but thats what Google is for).
2.) I understand that that I'm new to coding and don't know everything. (hence me here on Bytes asking for help)
3.) I know that most people who will be using the site are not technically inclined.

I never assumed anything.... I just asked for help because I knew I was wrong.
@David Laakso
I've asked on several occasions in this thread about better testing methods. Instead of an answer, I just got someone to tell me how wrong I am.

I got less of an answer and a lot of discouragement in that post David Laakso, I'm a bit disappointed.

[David Laakso]

Yes I was too harsh and please accept my apology.

[tharden3]

@David Laakso
It's ok, don't worry about it.

I found some software that I think will help me out. If I find anything on Google that can solve the issue, I'll post it here in the thread... or at least an answer to some extent. Don't want any advertising on Bytes.

[David Laakso]

I have used this jQuery [1] menu successfully a couple of times without cross-browser issue or incident. An accordian menu though, not a flyout. See what you think. If you use it get the latest ver jQuerry to go with it as I think the download uses an older version.
http://www.i-marco.nl/weblog/jquery-...n-menu-redux2/

[tharden3]

@David Laakso
That's really neat! I'll have to play around with that. Thanks for the help.

[Markus]

Browsershots.org may be helpful for you, tharden.

David, please do not take that tone with posters.

- markus.

[tharden3]

@Markus
That is extremely helpful. Thanks for the tip Markus.

[David Laakso]

@Markus
Perhaps. Providing you are willing to wait hours to get a static grab. And are sufficiently satisfied that any or all of the below are working as intended in the os/browsers you are testing...

--If your page is too deep you won't know what's going on below the fold.
-- Regardless of depth you will not know if dynamic content is functional or useable.
-- You will not know if there is vertical cross-over, horizontal-crossover, float-drop, content shooting out height restricted containers, or a zillion other problematic conditions that can only be tested with font-scaling and testing by setting a high minimum font-size.
--You will not know if the page works in a window greater of smaller than yours unless you know enough to check the right boxes in the first place
-- You will not know if the page is functional for mouseless users.
--You will not know if the link states are working properly

And these above are just for starters.

Solutions?

Never, ever, trust static screen grabs much less deploy a clients site based on thinking bcause it looks ok in a grab that it will actually work in the intended os/browser.

Always ask an experienced and well seasoned operator to check your work cross-browser, long, long before even thinking about deploying it. One way to do this is to post for a cross-browser site review.

It is a given, when posting publicly, on any public forum or list that you are open to frank and honest opinion, or downright nasty intentional hostility. Each of us is in the position to know and separate the wheat from the shaft-- to pick the good from the bad, and to come up perhaps a better and more knowledageble designer and developer.