LINKS

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.
How to fix web studio when it comments out the doctype which kills some CSS especially CSS3.
Then go over an update for the PT font fix (points to pixels) javscript that web studio uses

What is CSS

CSS stands for Cascading Style Sheets
Style sheets are simply text files (.css ), composed of lines of code that tell browsers how to display an HTML page. It's what gives your web page it's look or style.

Where is it

Cascade?

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).
Then the external is the next important, followed by internal then the inline.
The styles cascade down to the last style and get's the final look there basically.

The Web Site document

DOCTYPE

Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML 

HEAD 

BODY

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
Browsers have built-in default CSS style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

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
then you need the DTD fix below. The doctype needs to be first.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled 1</title>

<meta name="generator" content="Web Studio, Version 5.0 for Windows Build 23">
<meta name="creation-date" content="Fri, 06 Apr, 2012 15:32:20 GMT">
<meta name="website-id" content="WSSITE7DC456F20F1A00">

<style type="text/css">
p {margin-top:0}
html{overflow-y:scroll}
</style>


<!--[if lt IE 7]>
<style type="text/css">
img {behavior: url(iepngfix.htc)}
</style>
<![endif]-->

<script type="text/javascript">
function pointconversion() {
var patrn = document.getElementById("patrn");
if ( screen.deviceXDPI > 100 || patrn.offsetWidth>= 100) {
var WSarr=new Array('div','font');
var WSj='0';
var WSy = document.getElementsByTagName(WSarr[WSj]);
while(WSj<='2'){
for (var WSi=0;WSi<WSy.length;WSi++) {
var strlength =document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize.length;
var pointsorpixels =document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize.substr(strlength-2,2);
if (pointsorpixels=="pt")
{
var newsize=Math.ceil(parseFloat(document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize)*1.3);
document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize = newsize + "px";
}
}
WSj++;
WSy = document.getElementsByTagName(WSarr[WSj]);
}
}
}</script>


<script defer type="text/javascript" src="user.js"></script>
<script type="text/javascript">
<!--
window.onerror = null;
//-->
</script>

<style type="text/css">
<!--
a:link { text-decoration:underline; color: #001280;}
a:visited { text-decoration:underline; color: #560080;}
a:hover { text-decoration:none; color: #800010;}
-->
</style>
</head>

This is where we have to put the Browser Reset. Right below the </style> 
tag that Web Studio puts in for the link colors. We'll use "Inside HEAD".
It should be higher but it's the best that we can do for now.

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.

<body style="margin:0 0 1px 0; height:100%">
</body>

</html>

This is where we have to put the Point to Pixel (p2p) update.
Right below the ending </head> tag.  We'll use "Between HEAD and BODY".
It replaces the p2p that Web Studio uses now because here it's lower and read last.

NOTE: Web Studio is putting css styles inside this <body> tag.
The one that effects our web pages the most is the background code.
If that element is in here it can create a FLASH on load, so it should be in the HEAD.
See below for that repair as well.

An example

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
body{background-color:#ffffff;} /* 255 255 255 */
You change that to match the background color you use in web studio
That will limit the FLASH of white while your page loads since it's a little faster
loading from the HEAD. The 255 is just a comment so you remember the rgb colors.
See the
CSS background page for more on adding backgrounds

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.
If the comment tag is above your DTD then some browsers can't read the CSS styles.
To fix that we paste a new DTD back in above it, copy the next line:

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

What is the Points (PT) to Pixels (PX) javascript for?

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.
The problem with pt fonts that came up a few years ago is monitors can have higher resolution settings (originally is was mac 72 dpi and windows 96 dpi) now you can change your display settings and mobile have all different dpi (dots per inch).

So if you have a higher resolution display then you might see the pt fonts getting scrunched up like the image on the right.

Loren one our moderator friends came up with the solution. A javascript that converts the points to use pixel sizes. So that script is now used in web studio.

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
PT in IE8 != PT 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.
So because we don't know who has what display setting and with the IE
change, surfa changed the P2P script so it now works at any resolution.

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
You can save it if you like for use in other WS projects

Suggestions

Images under 16px high shifting

The reason small images shift in some IE browsers is because of a bug.
To fix that you select the image
Go to the HTML tab and in Insert Object HTML select Inside Object
paste this
Style="position:absolute;"

Every little bit helps to keep this site up and running, thank-you.

Web Studio Next

Thank-you!

These effects are not officially part of Web Studio
If you have questions see the custom coding page

aaaaaaaaaaaaiii