Inline CSS Issue - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Inline CSS Issue

LanceRas

7:27 pm on Jul 21, 2011 (gmt 0)

10+ Year Member

When viewing in IE 9 (Windows 7 x64), the page appears as:

1 -
Team GS500

Under Firefox 4 (Windows 7 x64), the page properly appears as:

1 - Team GS500

I'm using autogenerated code from a report to HTML convert, hence the reason for the inline CSS and absolute positioning.

Is there some adjustments I need to make to make this viewable identically with the browsers?

Thank you for the assist. Code follows.

Lance

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Export</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css;charset=ISO-8859-1" />
<style type="text/css">

</style>
</head>
<body>
<div style="position: absolute; top: 45px; left: 25px; width:89px; font:bold 9pt Arial; color: #000000">1 - Team GS500</div>
</body>
</html>

Hoople

12:52 am on Jul 22, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

First impression is it relates to the differences in bolding and character spacing defaults between the two browsers.

The div width is too tight (narrow) on IE9. A width of 90 px works fine here on Windows 7 with both IE9 and Firefox 5.

LanceRas

4:47 pm on Jul 22, 2011 (gmt 0)

10+ Year Member

Thank you. I'll see if incrementing the values by one fixes it.

If there is a gracefull way in CSS to deal with this without incrementing the number for IE's sake, I'd welcome input.

Hoople

5:15 pm on Jul 22, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

IE in the past has not followed the same box model that other browsers have. I don't have extensive experience with IE9 and how well it now behaves in relation to the non standard behaviour of the earlier versions. There is a substantial 'References' listing at the end of this IE9 Wiki article [en.wikipedia.org ]

I myself design first for Firefox 4/5. Then I check for wonkiness in IE6/7/8 and Safari. I make allowances in the initial design knowing that all browsers have some box, padding, margin and outline default differences. I'm not a pixel perfect insistant designer, esp when it comes to IE6 or those on 1024x768 still.

lucy24

8:41 pm on Jul 22, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

all browsers have some box, padding, margin and outline default differences

This is why it's a good idea to put everything into your boilerplate CSS:

h1, h2, h3... {text-align: your preferred default;}
.div {margin: whatever you expect it to be; padding: ditto;}
.p {margin: ditto; line-height: something nice (I normally use 1.2);}
table, tr, td {font-size: inherit; font-family: inherit; border-color: inherit;}

et cetera. Yes, you include values that the CSS specs say are supposed to be the initial default. And then you build your document-specific CSS by laying out the variations from your default.

Some users will have a browser setting for "always use my own preferences" in some form or other, but that's OK because it is their own conscious choice. You're not expected to deal with it.

Xapti

9:32 am on Jul 25, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thank you. I'll see if incrementing the values by one fixes it.

If there is a gracefull way in CSS to deal with this without incrementing the number for IE's sake, I'd welcome input.

Using EMs for width instead of pixels could fix this across all browsers (although I'm not certain). It is still a good idea to give additional horizontal space in a container whether you are using pixels or em though — I don't know why you have an issue with that.

There is another issue that you also have do deal with if you want those items to stay on one line instead of two, and it requires the use of EMs for width. The issue is that not all users will follow your given fixed font size - they may have a minimum font size specified for their browser, or a custom stylesheet font. Using EMs allows the items to display on one line under all circumstances, regardless of font size.

With regards to editing the auto-generated mark-up (which you should do — leaving it with special/undesirable style info may bite you later on, not to mention is messy and takes up space), you can use an advanced find and replace utility that uses regex, to modify and/or delete various inline styles as a batch job, so that you don't have to spend an hour or more doing it manually (they can even do multiple files at a time). There are free regex editors out there, but even if you don't have one and are too lazy to get one, a normal find& replace function of any word processor or HTML editor will be able to delete simple entries such as "position: absolute" (albeit leaving the defunct/orphaned "top" and "left" entries)

As an alternative (and IMO last resort) to all that, you can add to your CSS style sheet/section saying ".stuff div{position:static!important}" Which will override the inline CSS. Obviously in addition, you will need to wrap your div elements in a new container with a class named "stuff". It's just as good if not better to even use an ID("#") instead of a class(".") here if you want.