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

[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