Web pages

[Michael Bartos]

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

 

[dorayme]

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.

 

[John Hosking]

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]

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

 

[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

 

[Toby Inkster]

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.

 

[Jukka K. Korpela]

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).

 

[Toby Inkster]

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?

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.

 

[Blinky the Shark]

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?

 

[Andy Dingley]

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.

 

[Ed Seedhouse]

Or:

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

How about just

font-family: sans-serif;

Then you are guaranteed that the person browsing will see either the
sans-serif font he or she prefers, or at least one they don't object to
strongly enough to learn how to change the default.

 

[Bergamot]

I have a web page in two versions of the same page. One uses absolute
positioning and the other relative positioning.

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

Please don't use *any* positioning method unless you understand how it
really works. Your use of relative positioning shows that you do not
understand it at all.

There are plenty of 2-column templates out there that are already tested
out and will give you better results. Plus they should teach you more
about positioning methods in general. Here is a place for you to start:
http://css-discuss.incutio.com/?page=CssLayouts

 

[dorayme]

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

....and they like sitting around coffee shops discussing what is
wrong with Republicans.