Screen Res problem with website

[tharden3]

Well guys, my first web site is coming along pretty good. I've been reading up on HTML & XHTML books, and learning CSS as I go. I got it up and running on a free web host. It's just a very skeleton-basic layout with little text right now. I went to school to try it out on a small CRT monitor, and some of the boxes were slightly out of place. They weren't so far off that it looks absolutely terrible, but I'd like a uniform design throughout browsers and different screen resolutions. I guess part of the problem is that I'm designing it on a 22" flat screen monitor, and get few chances to ever see it on anything smaller than 1024x740 resolution.
a.) what do you suggest I do?
b.) is there a virtual tester I can download that will show me what it looks like in certain resolutions? You know, sort of like the software that enables you to auto check you're site in several browsers?
Any tips would be appreciated.
Thanks,
Timothy Harden

[David Laakso]

a.) what do you suggest I do?
Timothy Harden

With mouse, right click on the desktop>properties>settings>move the slder to pick a screen resolutions>apply>ok>wait & it will reset to the resolution you picked.

Alternately, when you are at 1024, there is a triangle grab in the lower right corner of the window when viewing a page in a browser. Left click and hold that "grab" down, while simultaneously dragging the window to the left to make the window narrower.

Hang on, I am sure others will provide valuable suggestions...

[tharden3]

With mouse, right click on the desktop>properties>settings>move the slder to pick a screen resolutions>apply>ok>wait & it will reset to the resolution you picked.

Alternately, when you are at 1024, there is a triangle grab in the lower right corner of the window when viewing a page in a browser. Left click and hold that "grab" down, while simultaneously dragging the window to the left to make the window narrower.

Hang on, I am sure others will provide valuable suggestions...

yes, good plan, but I've already tried that and it doesn't give me the same results as a smaller monitor. It's weird.

[David Laakso]

It's weird.

Then provide a clickable link tom the page in question in your post to the forum. I can't fix what I can't see. And for that matter, I can't necessarily fix what I can see. It's weird.

[tharden3]

link
lol, yes very strange indeed. See, the weird thing is, I actually unplugged my 22" flat screen and plugged in one of my old CRT 16" monitors (and yes, a 16" CRT monitor is the size of a boat anchor, although I believe the monitor is heavier...) It works fine on my CRT monitor, but the ones at school, which I believe to be the same size and resolution, change the look very slightly. Like I said, it's not a huge deal, but why shouldn't my web site look right everywhere? I've worked very hard to make it usable in all browsers and on every resolution, I don't want to stop paying attention to detail this late in the game. Again, any help would be nice.
Thanks
Timothy Harden

[tharden3]

P.S. Give me your opinion of the rough outline. Is the color scheme good? Do you like the choice of navigation?

[David Laakso]

It's is a given that no two monitors on the face of the earth, regardless of their screen resolution or dpi, are likely to render any Website the same in terms of "how it looks." The best we can do is to try an ensure that the site is readable, easy to use, and accessible.

Following are some suggestions for correcting the page for IE/6 and IE/7:
Putting IE/6 in "quirksmode," rather than attempting to correct it in its "less than standards mode" is the easiest and most efficient way with your current layout. To do so add an xml declaration above the doctype.

<?xml version="1.0" encoding="utf-8"?>
 

and

html {font-size:100%;}<----- :: defeat all versions of IE em font-scaling bug
body{font-size:1em;text-align: center;margin:0; padding:0;}<------------:: add all to center IE/6, and provide default margin/padding for all browsers
.all{ 
margin-top: /*-25px*/25px; <---- :: amend to keep page from hitting chrome in IE/7
text-align:left;} <------ :: add to change text-align center to left for the page proper
 

I hope I did not forget anything as this was done quickly.
Validate the markup and CSS.
I don't want to "rain on your parade" but constructing a layout entirely using absolute positioning may prove to be the bane of your existence further down the road...

[David Laakso]

I have the feeling you have a sense of humor, so remember not to forget to ever take my comments too seriously (if at all).

Give me your opinion of the rough outline.

See above thread regarding the use of absolute positioning. Making the primary content (middle panel) first in the source order of the 3 columns might be a nice touch. As would making the vertical navigation column third in the source order of the 3 columns. The narrow widths of both sidebars may be problematic. The splash page, is not necessary, and some think of them as a kind of a throwback to the 90s-- do you really want your site to be indexed by search engines as "enter?"

Is the color scheme good?

Compared with what? The tile background image is a little overwhelming on my 1680 MBP, and may cause some to have difficulty concentrating on whatever it is that will be your actual page content?

Do you like the choice of navigation?

See this page for ways to set horizontal and vertical navigation lists with CSS [1] (be sure to check the browser support chart, as not all of those menus work cross-browser):
listamatic

[tharden3]

The splash page, is not necessary, and some think of them as a kind of a throwback to the 90s-- do you really want your site to be indexed by search engines as "enter?"

If I don't have the splash page, should I change the main page name/extension to index.html instead of PN.html? I was told somewhere else on bytes that a server will always direct the user to the index page first. Is that true?

[David Laakso]

Yes, to both questions.

[tharden3]

so when you go to a plain ole' http://www.NewbQuestion.com that's actually considered the index page, even though it doesn't have the extension index.html right? What tells google and other search engines "Hey! This one is really an index page, even though it end with .com/ instead of .com/index.html"

P.S. Don't crucify me for this, because it was a very stupid newbie mistake, but I figured out the problem. I have IE7 (as well as 4 or 5 other browsers) on my home PC to figure out what my site looks like across different browsers. The ones at school have IE6. DUH!!!! It had nothing to do with the monitors... it was an old version of IE, just being its way-behind-standards self. Forgive me for wasting 10 minutes of your life that you will never get back. I'm going to go sit quietly in the corner of my room with the lights of, and not do anything for 10 minutes. We're even.

[David Laakso]

Yes.
http://www.whateveryoururlis.com seeks the default file on the server. You must upload the default file to the server. The default is named index.html.
Please knock-off the "newbie" stuff, already. Everyone of us are "newbies" (some of us just have different issues to cope with than yours).
I'm glad you resolved the monitor question.
The correction for IE/6 is above (providing I did not make an error very early this morning before coffee).

[tharden3]

Yes.
http://www.whateveryoururlis.com seeks the default file on the server. You must upload the default file to the server. The default is named index.html.
Please knock-off the "newbie" stuff, already. Everyone of us are "newbies" (some of us just have different issues to cope with than yours).
I'm glad you resolved the monitor question.
The correction for IE/6 is above (providing I did not make an error very early this morning before coffee).

Thank you very much. You've been a lot of help.

[tharden3]

I don't want to "rain on your parade" but constructing a layout entirely using absolute positioning may prove to be the bane of your existence further down the road...

I know this was one of the older posts we discussed, but I forgot to ask you.... why? Why should I not use Absolute positioning? How else to websites achieve proper column positioning? If not absolute, then what? Are web standards changing in favor of something else?

See above thread regarding the use of absolute positioning. Making the primary content (middle panel) first in the source order of the 3 columns might be a nice touch. As would making the vertical navigation column third in the source order of the 3 columns.

Another question... why? Just better HTML? I guess a screen reader might have a tough time reading it huh.

[David Laakso]

I know this was one of the older posts we discussed, but I forgot to ask you.... why? Why should I not use Absolute positioning? How else to websites achieve proper column positioning? If not absolute, then what? Are web standards changing in favor of something else?

Web Standards sites:
1/ consist of valid HTML or XHTML
2/ use CSS instead of tables for layout
3/ are properly structured and semantically marked up
4/ work in any web browser
There is nothing in "Web Standards" that says thou shalt structure thy layout using position:absolute or any other "specific" positioning method that are available with css.

Float structured layouts, particularly negative-margin layouts, tend to survive cross-browser with more flexibility, robustness, and stability. Absolute positioning (AP), if even necessary at all, within such float structures, is usually limited to positioning small elements.

Granted your entirely AP construct layout appears to be functional, such layouts tend to be brittle and are easily broken with user discretion. This may be more apparent once you get around to putting "real" content in them.

I am merely expressing that a better learning experience, and more user friendly method of constructing the layout may be advantageous.

Either way, it is your site and your call-- not mine.

[tharden3]

Web Standards sites:
1/ consist of valid HTML or XHTML
2/ use CSS instead of tables for layout
3/ are properly structured and semantically marked up
4/ work in any web browser
There is nothing in "Web Standards" that says thou shalt structure thy layout using position:absolute or any other "specific" positioning method that are available with css.

Float structured layouts, particularly negative-margin layouts, tend to survive cross-browser with more flexibility, robustness, and stability. Absolute positioning (AP), if even necessary at all, within such float structures, is usually limited to positioning small elements.

Granted your entirely AP construct layout appears to be functional, such layouts tend to be brittle and are easily broken with user discretion. This may be more apparent once you get around to putting "real" content in them.

I am merely expressing that a better learning experience, and more user friendly method of constructing the layout may be advantageous.

Either way, it is your site and your call-- not mine.

so with this in mind, I guess that goes back to the center column being my first line of order huh? Then float the other objects and set margins based on that center content (which is the most important part of the site anyway). If my site were a sandwich, the middle column is the beef! Hope your not kosher....

[David Laakso]

This negative-margin float layout [1] will provide what you need and will work well cross-browser (providing you mind well what you put inside it). Adjust the outermost width, and you're good to go. There is no need with what you have so far to use any absolute positioning whatsoever. Learn how to use and clear floats. It may not be the greatest method for structuring layouts, but until something better comes along in the future-- it's the best we got...

[1]
http://blog.html.it/layoutgala/LayoutGala08.html

[tharden3]

It may not be the greatest method for structuring layouts, but until something better comes along in the future-- it's the best we got...
]

alright, thanks. I will redo what CSS I have so far (and modify some of the HTML too) this weekend. I will post a link in here when I'm done, so it can be
re-evaluated.

[oler1s]

so when you go to a plain ole' http://www.NewbQuestion.com that's actually considered the index page

I actually want to clarify this point. There is no requirement of a file or directory on the server. The URL is just an addressing mechanism. It doesn’t say what the server must do or have. It’s typical for a server’s default configuration to be a simple directory of files. But many complex sites don’t work that way.

When you go to http://www.example.com/ , you expect something in return. An HTML page is the usual expectation, although it doesn’t have to be. Moreover, there is no need for a corresponding file on the server. It could (and probably is) dynamically generated. My websites do not have an index.html. You just have simple URLs like example.com/my/profile/ which is then examined by a program. The appropriate page is assembled and then sent back. No index.html.

[David Laakso]

Thanks for the clarification. 3px double, you need an index.html page on your server if you have any hope of getting your first (x)html/css page functional on the Web in your lifetime and mine.