Css Netscape Help

Problem with CSS and text positioning

[colorspots]

I am having problems getting my text positioned exactly where i need it to go in both netscape and ie. My example page is at /newsite/test in my profile site. In IE6 it displays as I intended it. In Netscape it doesn't wrap and the font sizes are different. Here is my CSS.

A, A:LINK {
text-decoration: none;
color : FFFFFF;
font-weight : bold;
}
 A:HOVER {
text-decoration: underline;
color : FFE790;
font-weight : bold;
}
.more{
text-decoration: underline;
color : EE0050;
font-weight : bold;
}
#headline {
color: #cccccc;
padding: 0px;
position: absolute;
left: 35px;
top: 132px;
text-align : justify;
font-size : 26 px;
font-weight : bold;
}
#headline_1 {
color: #006699;
padding: 0px;
position: absolute;
left: 33px;
top: 130px;
text-align : justify;
font-size : 26 px;
font-weight : bold;
}
#quote {
color: #000000;
padding: 0px;
position: absolute;
left: 2361px;
top: 1661px;
text-align : justify;
font-size : 16;
font-weight : bold;
}
#quote_1 {
color: #C40042;
padding: 0px;
position: absolute;
left: 230px;
top: 165px;
text-align : justify;
font-size : 16 px;
font-weight : bold;
}
#headline_2a {
color: #FCF9DA;
padding: 0px;
position: absolute;
left: 85px;
top: 220px;
text-align : justify;
font-size : 20 px;
}
#headline_2 {
color: #333333;
padding: 0px;
position: absolute;
left: 86px;
top: 221px;
text-align : justify;
font-size : 20 px;
}
#text_1 {
color: #FCF9DA;
padding: 0px;
position: absolute;
left: 70px;
top: 260px;
text-align : justify;
font-size : 14 px;
width=380;
font : bold;
}
#text_1a {
color: #333333;
padding: 0px;
position: absolute;
left: 71px;
top: 2610px;
text-align : justify;
font-size : 14 px;
width=380;
font : bold;

Any help in fixing this would be grately appreciated. I am relatively new to using CSS but have been a long time html coder.

[edited by: tedster at 5:45 pm (utc) on Aug. 22, 2002]

[tedster]

The exact size of a font varies from browser to browser (and even from one "version" of a font to another!)

The only cure for really precise positioning is browser sniffing and serving a different stylesheet for each browser, platform, etc.

In my experience, that becomes a total PITA very quickly. As much as possible, I create pages that allow the browser as much latitude as I can.

<added>The use of justified text online is quite problematic, with line breaks coming at odd spots on different browsers and the readability going down as the browser jockeys the letter spacing to make the edges of the text block come out exact. I suggest not using justified text online, except for special effects on short phrases - it's hard enough to read from a monitor as it is.

One other note - hex color declarations in CSS always need the "#".</added>

[tedster]

On a closer look, you're depending too much on your own browser defaults here. For instance, you need to set a font-family.

Your design concept is beautiful, but very print oriented. Perhpas your client is pressing you to do that, but it tends to get very problematic.

[colorspots]

do you have suggestions about how to have text over a graphic instead of text included in the background graphic? I am trying to keep file sizes low but have a visual site since we are a mountain resort and that is our selling point. Any help would be appreciated.

[colorspots]

you are exactly right in that we want more of a print feel. We want our website and brochures to compliment each other. We want a site that is easy to navigate and is consistent all the way through on look and feel but is also visual. I would like to do the whole site in flash but that isn't really an option with budget concerns and limited resources. I appreciate you taking the time to help me.

thanks
colorspots

[tedster]

Well, the operative word should be "complement", and not take that to mean duplicate. You can create a very similar overall look and feel, but adapt it as needed to the realities of the web.

I'd suggest you take the following steps, and see how the text works at that point:

1. Add font-family declarations to your CSS.

2. Validate your HTML [validator.w3.org] and your CSS [jigsaw.w3.org] with the W3C free online tools.

3. If your code validates, and the text layout is still not working well enough cross browser, then add a browser sniffer and create dedicated stylesheets as needed.

Again, I strongly urge you to consider using ragged right text online, especially for passages longer than one line.

[tedster]

Text over a graphic can be accomplished by absolute positioning of divs in the same page location, but using a z-index to handle the layering order.

However, a lot of equipment today still renders pretty ragged looking text, no matter what you are seeing on your own monitor. When the look of a page matters a lot, I layer a gif for the lettering over a jpg for the image.

You also might want to try ImageReady (Save for the Web) in PhotoShop, if you have it available. The algorithms Adobe uses have become quite sophisticated at avoiding those ugly jpeg artifacts around the sharp edges of graphic text. In most cases, I use one image - a jpeg - to get text over a photo.

[colorspots]

i have tried some image solutions using Photoshop 5.5/6/7 with the versions of imageready that come with them but the amount of text used is creating large files sizes so I was trying alternative solutions to keep file sizes down. I appreciate the tips.

[MikeFoster]

Hi colorspots,

I like that page - very sharp!

1) For the wrapping problem, you probably need

overflow:hidden

IE6 would probably render it the same as Gecko, except that you put IE6 into back-compat mode by not providing a doctype.

2) Here's another way to put text over an image. Make the div the same size as the image, use css to make the image the background of the div, then whatever text is in the div will render on top of the img.

3) Don't forget to specify units for width... width:380px;

4) Here's a suggested usage for font-family:

sans-serf:

font-family:verdana,arial,helvetica,sans-serif;

serif:

font-family:georgia,"times new roman",serif;

[colorspots]

thanks MikeFoster

Your advice solved my problems.

Colorspots