How do I get this to work?

D

delerious

Please take a look at the following page:

If you are using IE: http://home.comcast.net/~delerious1/index2.html
If you are using Mozilla: http://home.comcast.net/~delerious1/index2_moz.html

I'm trying to have a navigation menu on the left, and content on the right.
With my default browser setups, there is a little bit of whitespace between
the navigation menu and the content area, which is what I want. But I would
also like the user to be able to view the page with whatever text size he/she
prefers, and that is where my page breaks. If I increase (in IE) or decrease
(in IE or Mozilla) the text size, then the navigation menu all of a sudden
overlaps with the content area. I'm using em to specify the left side of the
content area, so I thought that would move the content area over the correct
amount when the text size gets adjusted, but either I don't understand em or I
am not doing it correctly.

I also thought that the fact that I am using images in my navigation menu
might be screwing up the em, but that is not the case, as you can see here:

If you are using IE: http://home.comcast.net/~delerious1/index3.html
If you are using Mozilla: http://home.comcast.net/~delerious1/index3_moz.html

Any tips on how I can get this to work would be appreciated! Thanks!
 
D

delerious

Hmm... it would appear that tables *are* still necessary in some cases to
manage layout.
 
T

Toby A Inkster

delerious said:
Hmm... it would appear that tables *are* still necessary in some cases to
manage layout.

Or that most of us are bored of all these layout questions and don't feel
compelled to answer every "How do I..." question posted.

The fact of the matter is that any table-based layout can be replicated in
CSS (as long as you're not worried about retrofitting it to work in
years-old broken browsers).
 
S

Stan Brown

comp.infosystems.www.authoring.stylesheets said:
Please take a look at the following page:

If you are using IE: http://home.comcast.net/~delerious1/index2.html
If you are using Mozilla: http://home.comcast.net/~delerious1/index2_moz.html

Does nobody but me see something very wrong with the idea that there
should be different pages for different browsers?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
 
B

Beauregard T. Shagnasty

Quoth the raven named Stan Brown:
Does nobody but me see something very wrong with the idea that there
should be different pages for different browsers?

Hey, I'm with ya. See the other thread that begins with "arghh."

Separate browser versions are complete headaches to maintain. A
well-planned layout doesn't even need two versions for screen and print.
 
L

Leif K-Brooks

Beauregard said:
A well-planned layout doesn't even need two versions for screen and print.

How so? I don't know about you, but I don't want to see navigation or
login information on a printed page.
 
W

William Tasso

Leif said:
How so? I don't know about you, but I don't want to see navigation or
login information on a printed page.

quite right, but that doesn't mean two versions
 
S

Stan Brown

comp.infosystems.www.authoring.stylesheets, Leif K-Brooks
How so? I don't know about you, but I don't want to see navigation or
login information on a printed page.

Neither do most of us -- that's why most of us assign classes to
those items that are display:none on the print stylesheet.

The idea is that there are two stylesheets, but only one of every
Web page.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
 
L

Leif K-Brooks

William said:
quite right, but that doesn't mean two versions

Sorry, my mistake. Thought Beauregard T. Shagnasty was talking about
seperate style sheets, not seperate pages.
 
B

Beauregard T. Shagnasty

Quoth the raven named Leif K-Brooks:
Sorry, my mistake. Thought Beauregard T. Shagnasty was talking about
seperate style sheets, not seperate pages.

Yes, I was referring to not needing separate pages for screen and
print, as well as not needing separate pages for different browsers.

My print style sheets remove the display of navigation and other fluff
and also set the default font to serif, which my clients seem to
prefer on paper.
 
R

Richard Clark

If you are using IE: http://home.comcast.net/~delerious1/index2.html
If you are using Mozilla:
http://home.comcast.net/~delerious1/index2_moz.html

Greetings, First note above that in quoting from your message I broke the two
lines into four, so each URL is on a line by itself. That makes it easier for
people to select/highlight the url and copy and paste it into the address bar
of the browser without getting some extra text at the beginning or end in
error. My browser SO TOTALLY did not understand an "If you are using IE"
protocol, and then I had to wait for a thirty second system response timeout
before going back to square one. Be advised also that I went to view the pages
before reading the rest of your message to see what you were asking about, so
my observations are based mainly on problems I observed before reading your
message completely.
I'm trying to have a navigation menu on the left, and content on the right.
With my default browser setups, there is a little bit of whitespace between
the navigation menu and the content area, which is what I want. But I would
also like the user to be able to view the page with whatever text size he/she
prefers, and that is where my page breaks.

Allright, with my browser set to 640x480 and using IE, medium font setting,
both your IE and Mozilla page appeared the same. Here are my observations:

1. The "first paragraph" line was invisible, positioned under the navigation
bar.
Two possible reasons for the 1st paragraph disappearing under the toolbar:
a. The "content" DIV is located before the "navigation1" DIV
b. The "content" DIV has a height=100% value. (?)
2. The glaring "Cyan" text background is hard on the eyes. A lighter shade of
the toolbar blue would be a nice contrast.
3. The left edge of the Cyan text area appeared under the second "I" of
NAVIGATION_MENU_ITEM2
4. Did I mention I really like the shade of blue on the navigation bar? :)
5. The lighter mouse hover bgColor was too close to the light text color, but
that's a minor issue since the mouse pointer blocks the view of the text
anyway.
6. Your STYLE section is in the BODY instead of the HEAD, which is no big deal
for Internet Explorer as long as it is before the sections it modifies, but
some browsers may get confused.
7. The margin-left of 12em, besides putting the left edge of the text area over
as noted above, also apparently caused the page to be larger than my screen
size by the same amount, making it necessary to use the bottom scoll bar to
shift left to display the entire Cyan area. I didn't see any other width
elements or other code that would have forced the page to display wider than my
screen resolution.
8. Almost forgot, the 3 navigation links were side-by-side at the top,
beginning in the upper left, and not one below each other in a left column like
the 2nd group in the page displayed at this URL:
http://home.comcast.net/~delerious1/

I didn't think to change my font display size to see the effect on the "em"
thing. As noted in another message thread, an "em" in typography is a letter
"M" width. However, my HTML Reference, style section for "em" says it is "the
HEIGHT of the element's font." (And an "ex" is the height as the letter "x".)
If you included a content margin-top of 1em, the first paragraph should appear
lower, whether your content DIV is located before or after the navigation DIV.
I'm using em to specify the left side of the content area,
so I thought that would move the content area over the correct
amount when the text size gets adjusted,

Wait a minute, I just realized, sometimes when you change the browser font
display size while a page is displayed, you need to refresh/reload the page for
all aspects of the display to re-adjust to the different setting.

Welp, can't seem to scratch any more thoughts out of my brain...
Best Wishes. --Richard


Pilgrims and the Mayflower Compact
http://members.aol.com/RichClark7/pilgrims.htm

Jesus' Birth (and related issues)
http://members.aol.com/RichClark7/read/birth_JC.htm
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top