Web Studio Next Browser CSS Reset & PT to PX update
This tutorial is going to show you a browser CSS reset for Web Studio to make browsers act more consistent.
What is CSS
CSS stands for Cascading Style Sheets
Where is it
Web Studio uses inline styles embedded into it's HTML and internal styles in the HEAD for a few things on the page, like the link colors for example. CSS is really at it's best when it uses as an external sheet where one style change can effect the entire site.
CSS starts at it's least important with the Browser default (which we'll fix).
The Web Site document
Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HyperText Markup Language (HTML) is the main markup language for web pages.
The HTML head element acts as container for global information about the document it loads first.
The HTML body element is where the magic happens, this is what you see.
Browser CSS Reset
CSS Reset avoids browser inconsistencies
How to see the document
You can see any website coding by right clicking on the page with your mouse and use VIEW SOURCE
<!-- -- >
If you view source and see this comment (green) above the doctype line
This is where we have to put the Browser Reset. Right below the </style>
This is the point to pixel repair that is in web studio now. We are going to fix it by adding one lower in the document.
This is where we have to put the Point to Pixel (p2p) update.
NOTE: Web Studio is putting css styles inside this <body> tag.
To show you what I mean, here are the default settings for a paragraph between FF3 and IE7, neither are wrong just different. There are quite a few of these inconsistencies across browsers, so this is a reset I made mainly from the MEYERS reset just for web studio.
Where to paste the CSS reset
Go to the HTML TAB in Insert Page HTML select Inside Head
In the CSS reset style I suggest you add a line that looks like this
Is web studio commenting out your doctype?
That always needs to be first at the top of the web studio HEAD section
If you view source, and that is above your doctype (DTD) then it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Go to the HTML TAB in Insert Page HTML select Before All Tags and paste it there
Why the comment tag?
With inline CSS (like web studio uses) objects under 16px will shift in some versions of Internet Explorer if they don't have the position:absolute tag in the HTML. WS fixed the IE problem with a comment tag, But when you break the doctype in IE it goes into Quirks mode which basically fixes things MS messed up, like this "quirk". Quirks mode is a very base kind of browser that can't read modern coding (simplified).
Web Studio styles it's fonts using pt or points which is really a printer font. The debate what to use has been going on for years, I would prefer em fonts so they can be resized but they won't work in the WS HTML format so px is the choice.
So if you have a higher resolution display then you might see the pt fonts getting scrunched up like the image on the right.
So why fix the Points to Pixels fix?
The original script kicked in with displays over 100 dpi. Surfa discovered font measurements in IE9 don't follow the pattern in previous versions:
PX != (PT * 1.3) in IE9
What that means is compared with IE8, PT text is approximately 1.5% wider in IE9 and PX text is approximately 1% narrower. Basically if you stick with PX sizes the results should be very similar in most/all versions of IE.
If you haven't had anyone notice problems with the text on your site you may have enough width in your text objects for the larger pt font and not need the new fix. I haven't seen the problem in a while too so maybe IE fixed it with an update? The fix is here if you need it though.
Go to the HTML TAB in Insert Page HTML select Between HEAD and BODY
The point to pixel fix
Right click to select all, copy then paste it Between Head and Body
Images under 16px high shifting
The reason small images shift in some IE browsers is because of a bug.
Every little bit helps to keep this site up and running, thank-you.
Web Studio Next
These effects are not officially part of Web Studio