Web pages

I have a web page in two versions of the same page. One uses absolute
positioning and the other relative positioning.
Both work very nicely in IE 6 but I'm having trouble with both in Firefox
and Netscape 7. It's the same problem for each version,
#container3, the main body of the web page doesn't "fit" correctly into its
slot in Firefox and Netscape.

Any help is greatly appreciated.

Thanks.

Michael Bartos


http://www.panamphoenix.com/index2b.htm

and http://www.panamphoenix.com/index2c.htm

Michael Bartos

In article <45888eb0$0$17201$>,
"Michael Bartos" <> wrote:

> I have a web page in two versions of the same page. One uses absolute
> positioning and the other relative positioning.
> Both work very nicely in IE 6 but I'm having trouble with both in Firefox
> and Netscape 7. It's the same problem for each version,
> #container3, the main body of the web page doesn't "fit" correctly into its
> slot in Firefox and Netscape.
>

Nor in Safari...

>
> http://www.panamphoenix.com/index2b.htm
>
> and http://www.panamphoenix.com/index2c.htm

Which one uses absolute?

Use a validator and fix up the things it mentions, especially the
doc type.

I was able to fiddle with your dims to make it look "nice" in FF
over a small range of font-sizes but then it breaks. These
"fixed" size designs are quite brittle.

Don't use mm for dims on borders for web sites.

--
dorayme

dorayme

Michael Bartos wrote:
> I have a web page in two versions of the same page. One uses absolute
> positioning and the other relative positioning.
> It's the same problem for each version,
> #container3, the main body of the web page doesn't "fit" correctly into its
> slot in Firefox and Netscape.
>
> http://www.panamphoenix.com/index2b.htm
> and http://www.panamphoenix.com/index2c.htm
>

They both look relative to me.

Here's your CSS, revised:

body {margin-left: 0px; font-family: "Lucida Sans", Verdana; }

#container1 {
border:0px; width:760px; height:50px;
background-color:#CC6600; color:#fffbd0;
padding-top:10px; padding-bottom:0px; }

#container2 {
border:0px; width:100px; padding-left:10px;
height:525px; background-color:#FF9900; color:#fff; }

#container3 {
border:0px; padding-left:25px; padding-right:25px;
width:600px; height:525px;
margin-left:110px;
background-color:#FFFBD0;
position:relative; top:-525px; left:0px; }

#container4 {
border:0px; padding-left:25px;
width:760px; height:40px;
background-color:#C13100; color:#fff;
position:relative; top:-525px; left:0px; }

You were leaving the padding out of your calculations. If container2 is
525px tall, so should container3 be. And that's how much the negative
offset vertically should be. The left offset for 3 should be 110px,
because the width (100) + padding (10) for 2 dictates it. And so on.

BTW, "container2" is kind of a meaningless name for a div; why not
"samples", "footer", etc.?

Your biggest problem is the fact that you're specifying pixels. Try a
fluid design and consider that the font sizes might be different.

What happens if a visitor lacks both Lucida Sans and Verdana? Try adding
sans-serif as the last family. (And drop Verdana.)

Good luck. HTH.
--
John

John Hosking

Thanks for your reply. Abslute positioning is now in 2b. My mistake. In
working with the files, I got the names confused and uploaded two with
relative positions. Let me work with your suggestions. Appreciate your help.

Michael

dorayme wrote:
> In article <45888eb0$0$17201$>,
> "Michael Bartos" <> wrote:
>
>
>>I have a web page in two versions of the same page. One uses absolute
>>positioning and the other relative positioning.
>>Both work very nicely in IE 6 but I'm having trouble with both in Firefox
>>and Netscape 7. It's the same problem for each version,
>>#container3, the main body of the web page doesn't "fit" correctly into its
>>slot in Firefox and Netscape.
>>
>
>
> Nor in Safari...
>
>
>>http://www.panamphoenix.com/index2b.htm
>>
>>and http://www.panamphoenix.com/index2c.htm
>
>
> Which one uses absolute?
>
> Use a validator and fix up the things it mentions, especially the
> doc type.
>
> I was able to fiddle with your dims to make it look "nice" in FF
> over a small range of font-sizes but then it breaks. These
> "fixed" size designs are quite brittle.
>
> Don't use mm for dims on borders for web sites.
>

mvbart

Thanks for your reply. Abslute positioning is now in 2b. My mistake. In
working with the files, I got the names confused and uploaded two with
relative positions. I'm going to follow your suggestions--including the
name scheme. Appreciate your help.

Michael

John Hosking wrote:
> Michael Bartos wrote:
>
>> I have a web page in two versions of the same page. One uses absolute
>> positioning and the other relative positioning.
>> It's the same problem for each version,
>> #container3, the main body of the web page doesn't "fit" correctly
>> into its slot in Firefox and Netscape.
>>
>> http://www.panamphoenix.com/index2b.htm
>> and http://www.panamphoenix.com/index2c.htm
>>
>
> They both look relative to me.
>
> Here's your CSS, revised:
>
> body {margin-left: 0px; font-family: "Lucida Sans", Verdana; }
>
> #container1 {
> border:0px; width:760px; height:50px;
> background-color:#CC6600; color:#fffbd0;
> padding-top:10px; padding-bottom:0px; }
>
> #container2 {
> border:0px; width:100px; padding-left:10px;
> height:525px; background-color:#FF9900; color:#fff; }
>
> #container3 {
> border:0px; padding-left:25px; padding-right:25px;
> width:600px; height:525px;
> margin-left:110px;
> background-color:#FFFBD0;
> position:relative; top:-525px; left:0px; }
>
> #container4 {
> border:0px; padding-left:25px;
> width:760px; height:40px;
> background-color:#C13100; color:#fff;
> position:relative; top:-525px; left:0px; }
>
> You were leaving the padding out of your calculations. If container2 is
> 525px tall, so should container3 be. And that's how much the negative
> offset vertically should be. The left offset for 3 should be 110px,
> because the width (100) + padding (10) for 2 dictates it. And so on.
>
> BTW, "container2" is kind of a meaningless name for a div; why not
> "samples", "footer", etc.?
>
> Your biggest problem is the fact that you're specifying pixels. Try a
> fluid design and consider that the font sizes might be different.
>
> What happens if a visitor lacks both Lucida Sans and Verdana? Try adding
> sans-serif as the last family. (And drop Verdana.)
>
> Good luck. HTH.

mvbart

John Hosking wrote:

> body {margin-left: 0px; font-family: "Lucida Sans", Verdana; }
>
> What happens if a visitor lacks both Lucida Sans and Verdana? Try adding
> sans-serif as the last family. (And drop Verdana.)

Or:

font-family: "Lucida Sans", "Lucida Sans Unicode",
"Lucida Grande", "Trebuchet MS", sans-serif;

On Windows XP the full name of Lucida Sans is "Lucida Sans Unicode", so it
might be a good idea to specify that somewhere. (One could even
argue that it's a good idea to specify LSU before LS.)

"Lucida Grande" is a font bundled with OS X (and is indeed the default UI
font for OS X) and is almost identical to Lucida Sans. (The only common
glyph that's distinguishable between the two is the number '1' which has a
bottom serif in Grande, but not Sans.)

"Trebuchet MS" is a similar, though not identical font, which was
available with earlier versions of Windows than Lucida Sans was --
Microsoft also made it available as a free download from their website,
and bundled it with Internet Explorer, so it has a very wide coverage. It
should look a little closer to Lucida Sans than a typical sans serif font
will, so I've put that in as the last named fallback.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Toby Inkster

Scripsit Toby Inkster:

> On Windows XP the full name of Lucida Sans is "Lucida Sans Unicode",

No, they are two distinct fonts. Their overall designs are similar (with
considerable differences in some details - see e.g. how "ft" looks on the
two fonts), but Lucida Sans Unicode has thicker lines. In 12pt size, it
looks semi-bold as compared with 12pt Lucida Sans. Moreover, as the name
suggests, Lucida Sans Unicode has a wider coverage of characters.

> "Trebuchet MS" is a similar, though not identical font,

Similar? Hardly, any more than being a sans serif font. Look at "g", the
typical indicator of font design style. Or look at "M", or "a".

> It should look a little closer to Lucida Sans than a
> typical sans serif font will,

I wouldn't bet on that. Trebuchet MS is in many ways a nice little font,
though its diacritics are awfully placed, but it's not a better replacement
for Lucida Sans than a randomly chosen sans serif font is, I would day.
Moreover, Trebuchet MS looks considerably smaller (because it _is_ smaller,
in the sense that for a typical font size, the average height of glyphs is
smaller in Trebuchet MS than in Lucida Sans of the same size).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela

Jukka K. Korpela wrote:

> No, they are two distinct fonts. Their overall designs are similar (with
> considerable differences in some details - see e.g. how "ft" looks on the
> two fonts), but Lucida Sans Unicode has thicker lines. In 12pt size, it
> looks semi-bold as compared with 12pt Lucida Sans. Moreover, as the name
> suggests, Lucida Sans Unicode has a wider coverage of characters.

Is LSU not just an updated version of LS, with more glyphs and better
hinting?

>> "Trebuchet MS" is a similar, though not identical font,
>
> Similar? Hardly, any more than being a sans serif font. Look at "g", the
> typical indicator of font design style. Or look at "M", or "a".

I never meant to say that they were the same. Just similar. They have a
similar feel. They're both slightly curvy humanist fonts.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Toby Inkster

Toby Inkster wrote:

> I never meant to say that they were the same. Just similar. They
> have a similar feel. They're both slightly curvy humanist fonts.

What's a humanist font?

--
Blinky
Killfiling all posts from Google Groups
Details: http://blinkynet.net/comp/uip5.html

Blinky the Shark

Blinky the Shark wrote:

> What's a humanist font?

It's one that doesn't require belief in a theistic mandate as the
source of axiomatic ethical principles, but that's not important right
now.


Early 20th century sans-serif typefaces were on the ugly side. They'd
been developed as a reaction against Victorian curlicues, but hindsight
suggests that they overdid it. Helvetica was one of the early
offenders, leading to the group being named "Grotesque". When Modernism
really got started though we saw typefaces like Futura which rejected
many of the ancient principles of calligraphy in favour of constant
width lines for all strokes. These became known as the "Geometric"
typefaces.

Humanist fonts were an attempt to redress this. They re-introduced
traditional pen calligraphy practices such as basing letter shapes on
an oval rather than a circle and in varying stroke widths around the
bowl of a letter. Shapes and proportions also varied between fonts at
different sizes of the same typeface, a practice that appalled the
Geometric advocates. Gill Sans is one of the best known and most
politically motivated, but not the most representative. Goudy Sans is
perhaps the "classic" Humanist typeface. Lucida is also classed as
Humanist typeface, but not particularly distinctive as such. As Jukka
mentioned, the classic give-away for a Humanist typeface is the
lowercase "g" being composed of a pair of distinct separated ovals
above each other, rather than a circle with a single stroke descender.
If you see this "double bubble" you're probably seeing a Humanist
typeface, although not all of them (e.g. Lucida) use it.

Andy Dingley