Re: Problem in the FF Opera Safari world

[BMc]

I just want to take a moment to say thank you to so many of you who
posted a response to my request for help about the problem with THE GAP
(see below?)!

Your suggestions were not only a solution to the problem, but they were
given in a way that encouraged further learning about the subject and
gave me more information that helped me move forward today.

I have actually gotten the page to work with the same style sheet for
ff, opera, safari and IE without doing a separate sheet for IE. I am
still holding my breath that it will work in IE6, but that is work for
another day. I didn't have the energy to post the update yet, maybe
tomorrow.

Thanks for the kind nudging and expert advice. This community is a
blessing.

PEACE

betsy



So, as per Beauregard's suggestion, I have delved into the world of
percentages and more fluid design for my next project. I am going along
okay so far and have already determined that I will be doing a
conditional comment for a separate Stylesheet for IE but I am having a
problem now in Firefox, Safari, and Opera.

If you would like to see my problem, please visit

http://myweb.fltg.net/users/bethmcgee/index.html

As you can see, it looks lovely in IE (except for the annoying little
gap at the very bottom of the wrapper of the page which I will figure
out when I do a separate stylesheet I hope), but in any of the other
browsers there is this really annoying gap above the menu. The code is
so simple so far, not really much padding or margin to anything and I
have tried tweaking just about everyone and changing the floats of all
elements that do float, adding floats to those I didn't initially float.
I have been perplexed for days.

I don't normally post until I am down to my last hair...so if anyone has
a moment and wants a challenge or even just wants to rant about how bad
my my code looks, I'd be deeply appreciative.

I hope you are all enjoying the onset of Spring...

Peace

[dorayme]

In article
<_c******************************@posted.fingerlak estechnologygroup>,
BMc <be******@yahoo.comwrote:

If you would like to see my problem, please visit

http://myweb.fltg.net/users/bethmcgee/index.html

As you can see, it looks lovely in IE (except for the annoying little
gap at the very bottom of the wrapper of the page which I will figure
out when I do a separate stylesheet I hope), but in any of the other
browsers there is this really annoying gap above the menu.

Add margin:0; to your .menulist ul {...

You should remove height on your #header and other heights...

--
dorayme

[BMc]

Okay, so not a problem in IE7 or Safari or Firefox any longer...

But I have some questions about the lower resolutions. For the most
part, I can get the elements that are containers to be flexible and
expand and contract with resolution. But what about text, specifically
list text? Also, my heading text is not as it should be at a lower
resolution.

Is there a specific way to code for text to expand and contract as a
whole with the document? It would seem logical to me that if you set
all of your font sizes like headers and paragraph text, etc...that it
would end up being the percentage of the whole document. Is it because
each containing div is actually appearing at a percentage of it's
containing div and not the percentage of the document that using
percentage on font size isn't going to work effectively?

Would it work better to set the font size inside each element that I
need it to be different in such as the list and the header text? Would
it then, if coded inside the element itself, override the primary
settings that I set at the beginning of the CSS document?

And, is it a percentage of the base property of font size (is it 16pt?)
or a percentage of the size of the containing div?

Am I making any sense or am I babbling?? After a while, I can't even
tell.

Again, the site is at:

http://myweb.fltg.net/users/bethmcgee/index.html
Thanks heaps in advance.

betsy


dorayme wrote:

In article
<_c******************************@posted.fingerlak estechnologygroup>,
BMc <be******@yahoo.comwrote:

>If you would like to see my problem, please visit

http://myweb.fltg.net/users/bethmcgee/index.html

As you can see, it looks lovely in IE (except for the annoying little
gap at the very bottom of the wrapper of the page which I will figure
out when I do a separate stylesheet I hope), but in any of the other
browsers there is this really annoying gap above the menu.

Add margin:0; to your .menulist ul {...

You should remove height on your #header and other heights...

[Bergamot]

BMc wrote:

Please don't top post.
http://web.presby.edu/~nnqadmin/nnq/nquote.html

my heading text is not as it should be at a lower
resolution.

FYI resolution is pretty meaningless. Browser viewport size is what
matters. I assume that's what you meant.

Is there a specific way to code for text to expand and contract as a
whole with the document?

Not sure what you mean, but left alone, text will flow normally. It
takes care of itself.

It would seem logical to me that if you set
all of your font sizes like headers and paragraph text, etc.

Over specifying font sizes for every little thing is one way to get
yourself into a bind, plus it adds a lot of unnecessary bloat to the
stylesheet.

Leave body at font-size:100% and everything will inherit that by
default, plus as a bonus it prevents weird things happening in IE. Then
adjust heading (hx) sizes up from that, as you've already done. Set
legalese, like in the page footer, to not less than 80%. There may be
some sections or portions of text that should have something slightly
larger or smaller than 100%, but try to set it on a container, not
individual elements within it if at all possible.

Is it because
each containing div is actually appearing at a percentage of it's
containing div and not the percentage of the document that using
percentage on font size isn't going to work effectively?

One has nothing to do with the other. You may be using % units for both,
but what that references is different for text vs. a container block.
Both, however, refer to % of their respective parent elements.

if coded inside the element itself, override the primary
settings that I set at the beginning of the CSS document?

I hope you aren't referring to inline styles. They are a PITA to
maintain and should be avoided. Just remember that styles are applied
top-down, but don't forget about specificity.

And, is it a percentage of the base property of font size (is it 16pt?)
or a percentage of the size of the containing div?

The parent of the body font-size the visitor's default text size,
whatever that may be. In my case, it's 20px.

http://myweb.fltg.net/users/bethmcgee/index.html

It's not a bad try, but it doesn't adapt to smaller window sizes as well
as it should. Don't set explicit heights on text blocks unless you fully
understand the repercussions, and not at all on #header or .menulist.
What's happening at enlarged text sizes and/or smaller windows is the
content at the top ends up longer than the height you set and spills out
of the containers. By not setting height they will stretch as needed for
the content. Use min-height if need be, and padding and/or line-heights
to get the amount of spacing you want in those blocks. You may also have
to adjust your background images to repeat better.

The right column has issues because you're mixing % widths for the text,
but using a fixed px width background image. They don't jive, so for me
some portion of that text is yellow on yellow, and unreadable. The fixed
height:75em just makes a bunch of vertical scrolling with nothing to
show for it. It needs to be constructed/styled differently to get the
effect you want. I think, though, using a % width for the column will
look "off" with the butterfly image. You might want to use a fixed width
for that column instead, or rethink how you're using images over there
so it will look better at varying window sizes.

--
Berg

[Ben C]

On 2008-05-21, BMc <be******@yahoo.comwrote:

>
Okay, so not a problem in IE7 or Safari or Firefox any longer...

But I have some questions about the lower resolutions. For the most
part, I can get the elements that are containers to be flexible and
expand and contract with resolution. But what about text, specifically
list text? Also, my heading text is not as it should be at a lower
resolution.

Is there a specific way to code for text to expand and contract as a
whole with the document? It would seem logical to me that if you set
all of your font sizes like headers and paragraph text, etc...that it
would end up being the percentage of the whole document. Is it because
each containing div is actually appearing at a percentage of it's
containing div and not the percentage of the document that using
percentage on font size isn't going to work effectively?

[...]

You can make a box's width relative to the font-size of the text inside
it by using ems.

That way if the user makes the fonts bigger or smaller the boxes grow or
shrink with them.

I think you're asking: is the inverse possible? If the user makes the
boxes bigger or smaller (by narrowing or widening the viewport) can the
fonts be made to grow or shrink?

It would be a logical thing to be able to do, but there's no way to do
it without JavaScript.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-05-21, BMc <be******@yahoo.comwrote:

Okay, so not a problem in IE7 or Safari or Firefox any longer...

But I have some questions about the lower resolutions. For the most
part, I can get the elements that are containers to be flexible and
expand and contract with resolution. But what about text, specifically
list text? Also, my heading text is not as it should be at a lower
resolution.

Is there a specific way to code for text to expand and contract as a
whole with the document? It would seem logical to me that if you set
all of your font sizes like headers and paragraph text, etc...that it
would end up being the percentage of the whole document. Is it because
each containing div is actually appearing at a percentage of it's
containing div and not the percentage of the document that using
percentage on font size isn't going to work effectively?

[...]

You can make a box's width relative to the font-size of the text inside
it by using ems.

That way if the user makes the fonts bigger or smaller the boxes grow or
shrink with them.

I think you're asking: is the inverse possible? If the user makes the
boxes bigger or smaller (by narrowing or widening the viewport) can the
fonts be made to grow or shrink?

It would be a logical thing to be able to do, but there's no way to do
it without JavaScript.

Or without using images of text...

--
dorayme

[BMc]

dorayme wrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2008-05-21, BMc <be******@yahoo.comwrote:

>>Okay, so not a problem in IE7 or Safari or Firefox any longer...

But I have some questions about the lower resolutions. For the most
part, I can get the elements that are containers to be flexible and
expand and contract with resolution. But what about text, specifically
list text? Also, my heading text is not as it should be at a lower
resolution.

Is there a specific way to code for text to expand and contract as a
whole with the document? It would seem logical to me that if you set
all of your font sizes like headers and paragraph text, etc...that it
would end up being the percentage of the whole document. Is it because
each containing div is actually appearing at a percentage of it's
containing div and not the percentage of the document that using
percentage on font size isn't going to work effectively?

[...]

You can make a box's width relative to the font-size of the text inside
it by using ems.

That way if the user makes the fonts bigger or smaller the boxes grow or
shrink with them.

I think you're asking: is the inverse possible? If the user makes the
boxes bigger or smaller (by narrowing or widening the viewport) can the
fonts be made to grow or shrink?

It would be a logical thing to be able to do, but there's no way to do
it without JavaScript.

Or without using images of text...

OKAY!!! You have all been such a great help! I went back to the
drawing board and wrote everything up from scratch like I actually
understood it. And now, I think I do. Rather than just coding for all
of the quirks in all the browsers I went for the simplest approach for
each element and am down to everything looking really great even in
800x600 and on IE6 (my biggest hair pullers).

I have tested it in IE6, IE7, Firefox, Opera, and Safari and at three
different screen resolutions (or whatever you choose to call it). And it
validates with the exception of two small rules.

It can be seen here:
http://myweb.fltg.net/users/bethmcgee/index.html

I have a mysterious issue with a couple of images though that I can't
figure out. I have 6 pages, each with a wrapper that is specific to it.
These hold different images that run down the side as the background
image as was suggested by someone who responded and it was a great
suggestion. Some of these images show up and some don't. They have
different heights but are set to repeat-y except for one that should not
repeat because a flash video will be on that page and it only requires
the height of one side image.

My question: why aren't these images showing up? By the way...THIS ONLY
HAPPENS IN FIREFOX, SAFARI and OPERA. In both IEs they all work so if
you have IE you can see what they are supposed to look like. On the
three previously mentioned browsers only the one on the index page
(home) and the one on the video page do (although it isn't extended its
full length because the video isn't there.)

Any suggestions? I have done a lot of work on the graphics as well to
make them repeat more seamlessly and I am really happy with the simple
layout and the way it has come together. It even zooms in and out
pretty well.

Thanks again for your encouragement and help. I have learned a lot
working on this site.

Betsy

[Ben C]

On 2008-05-25, BMc <be******@yahoo.comwrote:
[...]

It can be seen here:
http://myweb.fltg.net/users/bethmcgee/index.html

I have a mysterious issue with a couple of images though that I can't
figure out. I have 6 pages, each with a wrapper that is specific to it.
These hold different images that run down the side as the background
image as was suggested by someone who responded and it was a great
suggestion. Some of these images show up and some don't. They have
different heights but are set to repeat-y except for one that should not
repeat because a flash video will be on that page and it only requires
the height of one side image.

My question: why aren't these images showing up? By the way...THIS ONLY
HAPPENS IN FIREFOX, SAFARI and OPERA. In both IEs they all work so if
you have IE you can see what they are supposed to look like. On the
three previously mentioned browsers only the one on the index page
(home) and the one on the video page do (although it isn't extended its
full length because the video isn't there.)

Any suggestions? I have done a lot of work on the graphics as well to
make them repeat more seamlessly and I am really happy with the simple
layout and the way it has come together. It even zooms in and out
pretty well.

The problem is the height of #wrapabout (etc.)

On the "Home" page, there's a div called #wraphome which has the
background image on it. Inside it there are various things ending with
div#foottext, which has clear: both.

Because it has clear: both it clears the floats in #wraphome (i.e. goes
underneath them) and #wraphome ends up with a height of several hundred
pixels, therefore you can see its background image.

But on the "About" page, #wrapabout, which is doing a similar job, ends
up with a height of only 0px because here #foottext is not nested inside
#wrapabout, but instead is its sibling.

I expect it's the same sort of thing on the other pages that aren't
working.

The height of a container depends on its contents, but not usually on
its floated contents. They're supposed to spill out of the bottom. This
means that if all a container contains is floats, its height is 0,
unless you put something in it that clears the floats (or use various
other tricks). Except in IE which gets it wrong under certain weird
circumstances.

More explanation here: http://netweaver.com.au/floatHouse

[BMc]

Ben C wrote:

On 2008-05-25, BMc <be******@yahoo.comwrote:
[...]

>It can be seen here:
http://myweb.fltg.net/users/bethmcgee/index.html

I have a mysterious issue with a couple of images though that I can't
figure out. I have 6 pages, each with a wrapper that is specific to it.
These hold different images that run down the side as the background
image as was suggested by someone who responded and it was a great
suggestion. Some of these images show up and some don't. They have
different heights but are set to repeat-y except for one that should not
repeat because a flash video will be on that page and it only requires
the height of one side image.

My question: why aren't these images showing up? By the way...THIS ONLY
HAPPENS IN FIREFOX, SAFARI and OPERA. In both IEs they all work so if
you have IE you can see what they are supposed to look like. On the
three previously mentioned browsers only the one on the index page
(home) and the one on the video page do (although it isn't extended its
full length because the video isn't there.)

Any suggestions? I have done a lot of work on the graphics as well to
make them repeat more seamlessly and I am really happy with the simple
layout and the way it has come together. It even zooms in and out
pretty well.

The problem is the height of #wrapabout (etc.)

On the "Home" page, there's a div called #wraphome which has the
background image on it. Inside it there are various things ending with
div#foottext, which has clear: both.

Because it has clear: both it clears the floats in #wraphome (i.e. goes
underneath them) and #wraphome ends up with a height of several hundred
pixels, therefore you can see its background image.

But on the "About" page, #wrapabout, which is doing a similar job, ends
up with a height of only 0px because here #foottext is not nested inside
#wrapabout, but instead is its sibling.

I expect it's the same sort of thing on the other pages that aren't
working.

The height of a container depends on its contents, but not usually on
its floated contents. They're supposed to spill out of the bottom. This
means that if all a container contains is floats, its height is 0,
unless you put something in it that clears the floats (or use various
other tricks). Except in IE which gets it wrong under certain weird
circumstances.

More explanation here: http://netweaver.com.au/floatHouse

Thanks so much for the fix...that was it! I appreciate your taking the
time to look it over. After looking at it for hours, it's hard to tell
where discrepancies are. Thank you for the tutorial on containers and
floats as well. It's very helpful.

I'm really happy with how this site looks and your help has been great.

Betsy

[dorayme]

In article
<29******************************@posted.fingerlak estechnologygroup>,
BMc <be******@yahoo.comwrote:

Ben C wrote:

On 2008-05-25, BMc <be******@yahoo.comwrote:
[...]

It can be seen here:
http://myweb.fltg.net/users/bethmcgee/index.html

I have a mysterious issue with ...

The problem is the height of #wrapabout (etc.) ...
More explanation here: http://netweaver.com.au/floatHouse

Thanks so much for the fix...that was it! I appreciate your taking the
time to look it over. After looking at it for hours, it's hard to tell
where discrepancies are. Thank you for the tutorial on containers and
floats as well. It's very helpful.

I'm really happy with how this site looks and your help has been great.

Betsy

Just a few things that you might consider further:

Probably best to put in the opening <htmland closing </htmltags.

Don't mix up XML type construction with HTML: Not <link... />. Leave the
forward slash out here.

Don't use <p align="..."but use css instead.

Encode your "&"s as "&amp;"s

And on more substantial matters:

I suggest get rid of most of your pairs:

margin:auto;
width: 100%;

Also get rid of most of your

width: 60em;

They are on so many things!

Consider instead a simplification, putting something like on just:

#outside {
....

margin: auto;
width: 60em;
....
}

A div is 100% wide by default, no need to be saying this so often unless
the circumstances are special.

75% is a bit small for the footer. I suggest 85%.

And, one day, perhaps you need to look into the issue of allowing your
site to be more user friendly at 800px wide.

--
dorayme

[Bergamot]

BMc wrote:

>
http://myweb.fltg.net/users/bethmcgee/index.html

FYI...

#outside (et al) {
width: 60em;
}

This is really a poor practice. Those of us who use large default type
sizes end up with a huge amount of horizontal scrolling. It also affects
the column widths, so what you think is 30% (or thereabouts) in the
right column is rather wider than the dark background image. It's still
partly yellow text on yellow background for me.

You cannot use % or em widths and expect it to stay within the confines
of that fixed px width background image. It's mixing apples and oranges.

It even zooms in and out
pretty well.

Only if you do page zoom. It does not adapt to text zoom as well.

Thanks again for your encouragement and help. I have learned a lot
working on this site.

You aren't done yet, but don't give up.

--
Berg

[BMc]

What would be the alternative to the example you gave?
Bergamot wrote:

BMc wrote:

>http://myweb.fltg.net/users/bethmcgee/index.html

FYI...

#outside (et al) {
width: 60em;
}

This is really a poor practice. Those of us who use large default type
sizes end up with a huge amount of horizontal scrolling. It also affects
the column widths, so what you think is 30% (or thereabouts) in the
right column is rather wider than the dark background image. It's still
partly yellow text on yellow background for me.

You cannot use % or em widths and expect it to stay within the confines
of that fixed px width background image. It's mixing apples and oranges.

>It even zooms in and out
pretty well.

Only if you do page zoom. It does not adapt to text zoom as well.

>Thanks again for your encouragement and help. I have learned a lot
working on this site.

You aren't done yet, but don't give up.

[Bergamot]

BMc wrote:

[top-posting corrected]

Bergamot wrote:

>BMc wrote:

>>http://myweb.fltg.net/users/bethmcgee/index.html

#outside (et al) {
width: 60em;
}

This is really a poor practice. Those of us who use large default type
sizes end up with a huge amount of horizontal scrolling. It also affects
the column widths, so what you think is 30% (or thereabouts) in the
right column is rather wider than the dark background image. It's still
partly yellow text on yellow background for me.

BTW, here's a screenshot of your page in my browser:
http://www.bergamotus.ws/screenshots/bethmcgee.jpg

Note that's a fixed width and my default text size, not zoomed text. At
my usual window size, which is about half that width, there's no way to
read the content without lots of horizontal scrolling. I had to maximize
my window, something I rarely do, to get this.

What would be the alternative to the example you gave?

Here's an idea:
http://www.bergamotus.ws/bmc/

The right column is a fixed width to match the image widths. Some things
you had set in ems or % have been changed to make better use of the
available screen space and other scaling issues. It probably hasn't
occurred to you that 2em is a reasonable amount of padding when the type
size is small, but can be excessive when the type size is large.
Sometimes px *is* better.

The index and practice pages are there so you have a better idea of some
of the CSS rules, particularly regarding varying background images. It
scales with both window size and the user's default font size, whatever
that may be. Individual words can overflow the right column if the text
size is huge, but that's the only caveat I'm aware of.

Compare this to your page in IE (both 6 and 7 if you got 'em) at all 5
View->Text Size settings, Smallest to Largest. I've already looked at it
in Opera, Safari and Seamonkey/Firefox.

BTW, some of your images are in the wrong format. The photos should be
jpg, not gif. The quality will be much better and the download size much
smaller.

And please stop top-posting.

--
Berg
now killing all posts from google groups

[BMc]

Bergamot wrote:

BMc wrote:

>[top-posting corrected]

Bergamot wrote:

>>BMc wrote:
http://myweb.fltg.net/users/bethmcgee/index.html
#outside (et al) {
width: 60em;
}

This is really a poor practice. Those of us who use large default type
sizes end up with a huge amount of horizontal scrolling. It also affects
the column widths, so what you think is 30% (or thereabouts) in the
right column is rather wider than the dark background image. It's still
partly yellow text on yellow background for me.

BTW, here's a screenshot of your page in my browser:
http://www.bergamotus.ws/screenshots/bethmcgee.jpg

Note that's a fixed width and my default text size, not zoomed text. At
my usual window size, which is about half that width, there's no way to
read the content without lots of horizontal scrolling. I had to maximize
my window, something I rarely do, to get this.

>What would be the alternative to the example you gave?

Here's an idea:
http://www.bergamotus.ws/bmc/

The right column is a fixed width to match the image widths. Some things
you had set in ems or % have been changed to make better use of the
available screen space and other scaling issues. It probably hasn't
occurred to you that 2em is a reasonable amount of padding when the type
size is small, but can be excessive when the type size is large.
Sometimes px *is* better.

The index and practice pages are there so you have a better idea of some
of the CSS rules, particularly regarding varying background images. It
scales with both window size and the user's default font size, whatever
that may be. Individual words can overflow the right column if the text
size is huge, but that's the only caveat I'm aware of.

Compare this to your page in IE (both 6 and 7 if you got 'em) at all 5
View->Text Size settings, Smallest to Largest. I've already looked at it
in Opera, Safari and Seamonkey/Firefox.

BTW, some of your images are in the wrong format. The photos should be
jpg, not gif. The quality will be much better and the download size much
smaller.

And please stop top-posting.

Sorry about the top posting. It's foreign to me and a bit difficult of
a habit to get out of. I'll try harder.

Thanks for taking the time to give me an idea of how it would work
better. I have printed off the html and the css AND your message so I
can look them over alongside my own and see where the differences are
and I think I will be better able to make sense of them seeing them side
by side.

I already see one item I am not sure about the reasoning of. But I'll
save it and get back to you if I can't figure it out myself. Thanks again.

PS I know a few of the images are in gif and should be jpg. I will
convert them soon. I just haven't gotten to them all.

Betsy