Topic: why?!?!?!? damn browsers Pages that link to <a href="https://ozoneasylum.com/backlink?for=10916" title="Pages that link to Topic: why?!?!?!? damn browsers" rel="nofollow" >Topic: why?!?!?!? damn browsers\

 
Author Thread
coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 17:55 Edit Quote


why does opera display line height so differently from IE! Is there a fix for this problem??

argh!

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-21-2003 18:30 Edit Quote

example?

coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 18:47 Edit Quote

well if you have both opera and IE look at this page I am doing and you should be able to see what I mean.


http://www.harshks.com/product.html




[This message has been edited by coregraphics (edited 02-21-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 02-21-2003 19:32 Edit Quote

You're specifying your line-height in points (pt). You should *never* specify a length in points when you're designing it for screen display. The reason for this is that points are a real-world measurement, like inches or centimeters. There is no standard way to convert from any of these real-world measurements to pixels. Some browsers will do it differently than others.

Specify your line-height either in pixels (px) or relative to the current font size (em, ex, en) (recommended). Personally, I would use "em".

Using em may have bugs in some browsers that I'm not aware of. If it causes trouble for you, use px instead.

In any case, remove all occurances of "pt" from your style sheet, unless that style sheet is meant to determine how the page should appear when printed.

coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 19:38 Edit Quote

I am using pixels for font size. In my stylesheet there is no points for units of measure, I just double-checked it. It still renders differently in the two browsers.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 02-21-2003 20:02 Edit Quote

Your stylesheet (stylesheet.css) contains two line-height specifications. Both of them use pt units for measure:

code:
.fyi {
font-family: Arial, Helvetica, sans-serif;
[b]font-size: 10pt;[/b]
[b]line-height: 11pt;[/b]
}

.links {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #d3d3d3;
font-weight: normal;
[b]line-height: 15pt;[/b]
}



I don't see line-height specified anywhere else, so if it's being different in other parts of the page, it's because browsers have different defaults, and you should explicitly set it to a value.

coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 20:37 Edit Quote

God I feel like such a dork. You're right slime. I did have pt in the stylesheet so I took those out and set the line-height to px and it worked. Sooooo easy, I don't know what I was doing wrong, I mean now I know what I was doing wrong. After you've worked on a site for hours and hours things start happening because you're tired of working on it. But now I am blabbering. Anyway thanks again slime.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 02-21-2003 20:41 Edit Quote

Heh =)

There was a lot of talk about how Opera was handling pts slightly differently than other browsers during the beta. I forget the details.

coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 21:06 Edit Quote

argh spoke too soon. have a look-see. It is still spaced out differently in opera than in IE. Should I just give up?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 02-21-2003 21:20 Edit Quote

It looks almost identical to me. There might be a pixel difference here or there.

By the way, you're doing some silly things with your CSS. For instance, you're using *only* classes, which is unnecessary. The silliest is this:

<li class="list">...</li>

with .list {...} in your CSS.

That's very unnecessary - if you only want the CSS to apply to list elements, then apply it directly to all list elements! Like so:

HTML: <li>...</li>
CSS: li {...}

No classes/id's necessary.

In addition, I notice that you're specifying the font-family *everywhere* in your style sheet - that is, in each and every single selector, like this:

.smsechead {
font-family: Arial, Helvetica, sans-serif;
...
.list {
font-family: Arial, Helvetica, sans-serif;
...
.links {
font-family: Arial, Helvetica, sans-serif;
...etc.

You can simplify that like so:

.address, .smsechead, .list, .links, ...etc... {
font-family: Arial, Helvetica, sans-serif;
}

And then you don't have to write the same thing over and over. And if you choose to change the font later on, you only have to do it in one place. That's one of the the advantages of CSS.

In fact, you would probably be safe just by doing this:

body {
font-family: Arial, Helvetica, sans-serif;
}

Since everything you want to have that font is the entire body of the page, right? So you can apply it to the whole body like that, and it will be inherited by lower-level elements.

Some browsers have bugs that won't inherit the body's properties into table cells, so you may want to do

body, td {
font-family: Arial, Helvetica, sans-serif;
}

instead.

coregraphics
Nervous Wreck (II) Inmate

From: Kansas, USA
Insane since: Jan 2003

IP logged posted posted 02-21-2003 21:38 Edit Quote

Ah I'm picking up what you're throwing down. haha. I made the changes, thank you! See anymore cleaning up I need to do?




[This message has been edited by coregraphics (edited 02-21-2003).]



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu