Problem in the FF Opera Safari world

[BMc]

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
<0u************ *************** ***@posted.fing erlakestechnolo gygroup>,
BMc <be******@yahoo .comwrote:

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

The most elementary test of a fluid design concept is upping and downing
the text size and your page breaks on this. True, it takes more than a
click or two up, but still, it should not really break given your
material.

Your "Would you like to..." text is almost unreadable because of it lack
of contrast with the background.

Your HTML does not validate. But you will be able to fix the few things
easily.

And as for your big space, what can you expect when you have a fixed
height like that for #header? You could try 7em instead but I have not
examined your html and css much.

--
dorayme

[Beauregard T. Shagnasty]

BMc wrote:

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

Why? I don't see anything out of the ordinary that would require it.
Personally, I never have needed IE-only stuff.

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

No, sorry I can't. Don't have 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.

Your style sheet is still filled with pixels. Er, px measurements. My
general rule is to never use pixels for anything other than image sizing
and borders. Use em units for almost all margins, padding, and so forth,
and percentages for font sizes.

The container for the menu: try a height of around 3em.
I would change the width of the wrapper to 90%.

Be sure to look at it with all kinds of varied sized browser windows,
from around 600px to whatever your monitor can do.

--
-bts
-Friends don't let friends drive Windows

[rf]

BMc <be******@yahoo .comwrote in news:0uqdnXy47t S-
RK************* *****@posted.fi ngerlakestechnolo gygroup:

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

This is very rarely required. It's usually possible to make IE work with
standard CSS. It is only when IE does the exact opposite of what you require
that such stuff is needed.

problem now in Firefox, Safari, and Opera.

Yep. Increase your font size. Narrow the browser window to less than 1000
pixels. Big problems :-)

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

As you can see, it looks lovely in IE

No, it doesn't. See above.

but in any of the other
browsers there is this really annoying gap above the menu.

Unordered lists have a top margin by default. That is what you are seeing.

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

The onset of Spring was six months ago :-)

--
Richard.

[John Hosking]

BMc wrote:

>
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 menu wraps to a second line for me in both FF and IE6 at a viewport
width of just less than 1206px. That's *before* I upsise the text at all.

Regarding the space at the bottom of the wrapper (it's in both IE6 and
FF, BTW), is it from this
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
perhaps?

You want ul {margin:0;} to see the fix to the menu spacing thing in FF.

>
Peace

And to you.
--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Ben C]

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

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.

You've got a default top margin on UL (probably 1.12em, from the default
stylesheet).

That's collapsing with the top margin of the containing div and
resulting in the gap.

IE gets this wrong (in strange ways, Gérard T has some tests of
something similar).

To fix it for Firefox and Opera etc. either add something like:

..menulist ul { margin-top: 0 }

or, if you want to keep the margin but stop it collapsing:

..menulist { padding-top: 1px }

You probably want the former since if you use the latter there isn't
room for the text any more since you only gave it 36px. Better not to
set height: 36px on the div. Just leave it alone and it will be the
correct height for the stuff in it anyway. More tolerant of different
font sizes that way.

Tip: It's OK to set width but you should hardly ever need to set height
on anything.

[Gus Richter]

BMc wrote:

If you would like to see my problem, please visit

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

As Ben said, it's a "Collapsing Margins" problem.
Read up on it in CSS 2.01 and perform a search on it for further
explanations.

An easy way to confirm if a problem is due to collapsing margins is to
temporarily add this line to your stylesheet:

* {margin:0 !important;}

--
Gus