Solved

Default Styles in IE/Moz

Posted on 2003-10-21
7
343 Views
Last Modified: 2006-11-17
Is there any part of Internet Explorer or Mozilla Firebird that contains their default stylesheet in CSS format?

I'd like to be able to apply the sheet for one to the other, theoretically as a cheezy way to have content display the same in either browser.  Inspecting the binaries (quickly) I didn't see anything that looked like it would set all/most of the default attributes.

Assuming that there is no built-in file, how can I create the CSS (or equivalent)using JavaScript to extract all of the attributes of all the styles on a page?  I've used getElementById and getElementsByTagName to pull styles before, but I have no idea what I'd use to get every style used on a page, let alone all the styles that didn't get used.  Beyond that even, I haven't seen anything that would let me enumerate all possible sub-styles (color, background-color, etc.) for an element without knowing what it was called.
0
Comment
Question by:DullsVillager
7 Comments
 
LVL 17

Assisted Solution

by:dorward
dorward earned 50 total points
Comment Utility
0
 
LVL 4

Expert Comment

by:Fendrin
Comment Utility
I think dorward is thinking in the right direction... I think that even if you do manage to get eh exact defualt stylesheet and apply it to the other browser, there will be some slight differences.

You are far better off if you don't try to make every browser display your page EXACTLY the same. it won't work... and along the way you will have to make many sacrifices in useablity...

Find or make a stylesheet that makes your pages look good in as many brwsers as possible... Remember that looking good does not mean you have to have a pixel-perfect rendering of the page. If that is what you want, you are designing for the wrong medium. Try paper :-)

If you want the default look, just don't use any styling.

On a separate thought, if you are approaching this from a purely intellectual way...
I found this in my installation of Mozzilla Firebird 0.6.2
C:\Program Files\MozillaFirebird\defaults\profile\chrome\userChrome-example.css

I have to say, my favorite line is :
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
yeah, Ghostbusters.

--start file--

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */
0
 
LVL 2

Author Comment

by:DullsVillager
Comment Utility
Is it really that futile to try and match between browsers?

If I can style a TD so that it has a one-pixel border, two-pixel padding and six-pixel spacing, why would it look different in different browsers?  (assuming those are the only settable styles for a TD)

I know there's gotta be a way...  still looking for the JavaScript to pull attributes of a style.

(just FYI, i'm a moron and was looking at a phpinfo() sheet, so the ACCEPT header was different, and that's why the particular page I was viewing was considerably different... but it should still be possible!)

0
 
LVL 4

Accepted Solution

by:
Fendrin earned 150 total points
Comment Utility
Well, for starters, some browsers do not understand the box model correctly, and thus will distort just about anything that relies on it. Also, many browsers have problems with styling tables. Some will colapse the borders on those tabls cells. others will not.  Etc.

They shouldn't display significantly differently, but in some cases, they do.as to the why, it is typically caused by an incomplete or incorrect implementation of the standards. Another problem is varying levels of backwards-compatibility. Theoretically, tht should be eliminated by a doctype, but unfortunately, that doesn;t always work. (especially when so many web designers are using a mash of standard and non-standard code... browser developers don't want to keep their users from viewing older sites, so they need backwards compatibility... having backwards compatibility available leads many designers to write out-of-date code.... or worse, mixing concepts. The most hellish thing I have seen was somthing along the lines of <font color=red class=smalltext style="padding-left:5px">)

So can you match between browsers? Yes, if you are careful, limit yourself to certain widely supported selectors, and above all, don't expect pixel perfect rendering. Instead of trying to control everything, control the really important things, and let the browser defaults handle the rest. ( I mean, really, who cares if one browser has the body tag with a few pixels of padding? If that breaks a site, then a  reevaluation of the design is needed)

PS. You aren;t the only moron on EE... I posted the CSS for controlling Mozillas BROWSER, not the default pagestyle! :-)
0
 
LVL 5

Expert Comment

by:pmsyyz
Comment Utility
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now