homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Inline CSS Issue

Msg#: 4342403 posted 7:27 pm on Jul 21, 2011 (gmt 0)

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.


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
body {background: no-repeat center fixed}
span {position: absolute; visibility: hidden}
<div style="position: absolute; top: 45px; left: 25px; width:89px; font:bold 9pt Arial; color: #000000">1&nbsp;-&nbsp;Team&nbsp;GS500</div>



10+ Year Member

Msg#: 4342403 posted 12:52 am on Jul 22, 2011 (gmt 0)

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.


Msg#: 4342403 posted 4:47 pm on Jul 22, 2011 (gmt 0)

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.


10+ Year Member

Msg#: 4342403 posted 5:15 pm on Jul 22, 2011 (gmt 0)

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.


WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4342403 posted 8:41 pm on Jul 22, 2011 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4342403 posted 9:32 am on Jul 25, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved