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]

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.

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]

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.

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]

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.)

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]

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.

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]

Not quite. I tried it... it didn't work.

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]

-- 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).

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.

(insufficient testing)

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.