Topic: why?!?!?!? damn browsers (Page 1 of 1)

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

argh!

example?

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

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.

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.

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

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

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.

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.

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

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.

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