Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css in IE/NS

Posted on 1999-06-25
14
Medium Priority
?
223 Views
Last Modified: 2013-11-19
I wrote the css code for NS4.5x. It works perfectly, at elast for now. But when I viewed in Ie4.0, it doesn't work as well. the css coded words are distorted, i mena it's very far...

<STYLE>
.Font1 { font-family:verdana;
        color:green;
        font-weight:bold;
        font-size:25pt;
        letter-spacing:0.3 em }
.Font2 { font-family:verdana;
        font-weight:bold;
        color:yellow;
        font-size:25pt;
        letter-spacing:0.3 em }
</style>
<title>Editorial Page</title>
<body background="images/lavendarlt.gif" text=#cc66cc vlink=green link=red>
<center>

<!--#geoguide-->
<p>
<DIV style="position: absolute; margin-top: 160; margin-left: 170; z-index: 1">
<P class="Font1">Virtual Railroad, Inc.</P>
</DIV>
<DIV style="position: absolute; margin-top: 160; margin-left: 173; z-index: 0">
<P class="Font2">Virtual Railroad, Inc.</P>
</DIV>

<table cellpadding=3 cellspacing=3 border=0 width=95%>
<tr><td>
&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>
<blink>You may want to bookmark this site to come back later to read the
articles slowly.</blink><p>

i'm using schc onection, so i cant ftp/upload for ez viewing.
Anyone has a solution for this?
0
Comment
Question by:java_kevin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 1851215
what do you mean by "distorted"?  could you describe the error more?

I'd also remove the space between the letter spacing and the 'em' in your code, like this:

letter-spacing: 0.3em }

if you have a space there I believe the measurement won't be ignored and the browser uses some kind of standard measurement, and that's probably not what you want.
0
 
LVL 1

Expert Comment

by:BillyAbbott
ID: 1851216
in ie4 it displayed the text in one line...
ie.

you may want to....     Virtual Railroad

in ns, it displayed the 'you may want to...' bit overlapping the virtual railroad bit, but that's probably due to the fiddling i had to do to the page ot get it to work (ending tags etc...)

could you describe what disortion you are talking about.
0
 

Author Comment

by:java_kevin
ID: 1851217
i mean, the word to be in css. in IE, it is written to the far right of the webpg. making users need to scroll to right.

the uploaded pg is at http://www.geocities.com/Heartland/Acres/9698/new/ccar1.html
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Accepted Solution

by:
gramdee earned 150 total points
ID: 1851218
you should not use margin-left and margin-top for this stuff. these selectors are partially different in rendering methods in NN and IE. you should use
left and top instead of previous ones or with them
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851219
keep in mind though, that left & top are CSS level 2 stuff, and not level 1 like margins are.  left & top are often referred to as part of CSS-P (CSS positioning) which Netscape 4 supports even though it has no support for CSS2 to speak of.

in this case I wouldn't be surprised if java_kevin should continue to use 'position: absolute;' though, thereby specifying that the DIVs are positioned in reference to the top-left corner of the canvas.

and btw, for more information drop by W3C's web pages since they're the ones that publish things like that.  URL is http://www.w3.org/Style/CSS/
0
 

Author Comment

by:java_kevin
ID: 1851220
since nettrom mentioned that top and left are stuffs of ccs-2 and netscape doesn't support it much, I don't thnk I'll use it. Anyway, my page is specifically set up for netscape users.

In fact, in the start of my page, I test if users are using Ie or NS. And I hinted that they should use NS.

But if I should use top and left, will it work for NS? since it's CCS2... which NS doesn't really support...
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851221
Netscape actually supports positioning through CSS even though it's part of the CSS2 specification.  that's one thing that's positive with Netscape's CSS support (the rest of it ain't that positive).  so  if your target is users with Netscape 4.x you can safely use left & top to position both your DIVs so that they show up just like you want to. :)
0
 

Author Comment

by:java_kevin
ID: 1851222
ok... so NS4.x support ccs2's top and left attribute and it works fine with IE, I'll choose to use top and left.

But there's no change in the position: absolute; top and left value right?
0
 

Author Comment

by:java_kevin
ID: 1851223
hello... I've changed them to top and left. But it didn't seem to work in IE still.

Before I removed the margin form top and left, IE showed the css words right to the far right side of the webpg, which is in a frame.

Now I've removed the margin, and only the word supposed to be shown in green is seen on the page. The one to be in yellow (which "hides" behind the green word) can't be seen at all.

I tried viewing with NS (which showed the right things) and IE, which shows only the green word and is not properly aligned in the centre of the page.

To get a better view, it's better that you try viewing http://www.geocities.com/Heartland/Acres/9698/new/frame.html with IE, and go to "Animal Abuse" by clicking the applet on the left frame.

Good luck :)
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851224
all three browsers I tested with (IE5, IE4 & Netscape 4.5) show the yellow text slightly off-set from the green.  but it's still not the way you want it to be.

I did work a bit with the Animal Abuse page to try to get it the way you want it to be, and it wasn't easy.  I've come close though.  IE4 & 5 shows things the way you want to, while Netscape put it slightly offset to the left.  what I've done is:

1: add 'type="text/css"' to the STYLE element so it becomes <style type="text/css">
2: put the FONT definition into quotes so it becomes correct.  font families with spaces in the names have to be quoted to be correct.
3: added "Arial, sans-serif" to the font-family definition.  neither browsers found the defined font with the result that IE chose a serif font and Netscape a sans-serif.  I'm not sure what "Lucida Casual" actually is, so I chose sans-serif.
4: moved </center> to before the DIVs.  since we're using CSS we should take it all the way and put as much of the presentational data into the style as possible.  since we've lost centering by <center> (which I never use, I use <div align="center"> instead) I added "text-align: center;" to the style-definitions of the DIVs.
5: I've removed the absolute positioning (x,y) from the style-definitions of the DIVs and instead put them to the far left.  the DIVs shouldn't have their left edges defined as 190 & 193 but instead 0 & 3.  the centering of the content makes sure things work correctly anyway (this probably explains why things didn't work right in IE).
6: removed the 'top' positioning since it's not really needed.  things work-well without it.
7: set z-index to '100' and '101' since I like doing it that way.
8: removed the whitespace from the letter-spacing definitions.  was '0.3 em' is now '0.3em'.
9: added 'width: 100%;' to the style definition of both DIVs to make IE4 correctly center it.  without it IE4 aligned it to the left edge of the window.  if you take it out Netscape correctly center things, but with it Netscape's centering is slightly offset to the left.  I consider it a minor problem, blame it on Netscape and wait for Mozilla to come out. :)

the code I've used when I tested was (yes, I also added boundaries of the HEAD element even though they're not really needed):

<html>
<head>
<style type="text/css">
.Font1 { font-family: "Lucida Casual", Arial, sans-serif;
        color:green;
        font-weight:bold;
        font-size:25pt;
        letter-spacing:0.3em; }

.Font2 { font-family: "Lucida Casual", Arial, sans-serif;
        font-weight:bold;
        color:yellow;
        font-size:25pt;
        letter-spacing:0.3em; }
</style>
<title>Animal Abuse</title>
</head>

<body background="images/lavendar lt.gif" text=#cc66cc bgcolor=white vlink=green link=red>
<center>
<!--#geoguide-->
<p>
</center>

<DIV style="position: absolute; left: 0; width: 100%; z-index: 101;text-align: center;">
<P class="Font1">Animal Abuse</P>
</DIV>
<DIV style="position: absolute; left: 3; width: 100%; z-index: 100;text-align: center;">
<P class="Font2">Animal Abuse</P>
</DIV>

if there's anything more let me know. :)
0
 

Author Comment

by:java_kevin
ID: 1851225
Hi,
nettrom, thanks for the help. I is MUCH better now... Just that it's strange, it shows that something seems a little too wide to display on the screen of IE5. ie, there's a horizontal scroll bar below. But on NS, everything is still fine... Just that the words doesn't seem to be that nice anymore :P b'cos I purposely chose Lucida Casual as it looks nicest to me.

So, for now, the problem is totally solved.nettrom, since you took up some time to debug for me, would you like some points to be given to you? I can open up another "question", you "answer" it and I'll give you about 100 points.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851226
the scroll bar probably appears because we use "width: 100%".  I did test things with IE4, IE5 and Netscape 4.5, and without the "width: 100%" IE5 refuses to center the text.  IE4 & Netscape doesn't need it though.  it's just like everything else, small quirks here and there that makes things not work as you want them to. :(

it surprises me that the font changed though, maybe the browers treated it as two separate fonts, therefore looking for "Lucida" and found that?  I'd check the available fonts on my system and see if anything comes up.  either way, the CSS specification states that if the font name contains a space you have to quote it for it to be correct.  you can of course freely change the font name to something else if you find a font you like. :)

it was fun figuring out how to get this to work, so if you open a question for 50 points and give me an A I'll be all happy.  no need for you to end up without any points left. :)
0
 

Author Comment

by:java_kevin
ID: 1851227
well, as for the fonts, I tried on my school computer. I found that there were no "Lucida casual" font installed. So I changed it to arial and courier. And the wording changed immediately.

So I think the "problem" lies with the computer, having the nice font installed or not... probably I'll upload the font and ask them to save it in their font dir :) but i wonder if mac computers use the same font dir...

And thanks for the great and undying effort of yours to help me. After this commenting, I'll open up a new question for you.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851228
you don't need to change the font to Arial or Courier as long as you remember to give alternatives.  if you prefer "Lucida Casual" then set that as the primary font.  then either use a general font family, or other specific fonts (but have a general font family last to make sure the correct font-type is used).  that's the beauty of the system.

I believe Lucida Casual is a font of the type that Comic Sans MS is?  that means we're using "fantasy" fonts.  if you then use:

font-family: "Lucida Casual", fantasy;

it will tell the browser to use "Lucida Casual" if it's available on the system.  if it's not it'll instead use a font defined as a "fantasy" font.  if there's none for that it'll go back to Courier or the default font.

and that's how it's supposed to work.  you'll always have the problem that some users won't have the fonts you want installed, so you give them options.  that way the browser can fall back on a different font that may look nearly the same.  the most common example is:

font-family: Verdana, Arial, Helvetica, sans-serif;

if the user has Verdana he gets that.  if he hasn't, but he has Arial, he'll get that.  Mac & Unices get Helvetica, since they probably don't have neither Verdana nor Arial.  and if none of these are available the browser will pick a generic sans-serif font (same family as all the others).

the availability of fonts can be manipulated using dynamicly embedded fonts in the document, but I think that'll take more effort than what's really necessary, given the options available in the CSS.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question