Can anyone please inform me why the HTML preview differs so much to the actual browser ? I created a web site several years ago (when I didn't know better) and used tables extensively. I'm currently in the process of converting them to CSS and test them as I go. I have noticed thet several pages, while appearing OK in the preview, are, for lack of a better term, skewed and look not at all how they looked in the HTML Editor's Preview.
Here is one of the pages from the site: www.post1889.org/Pages/newsletter.html
When I view it thru the HTML preview, the columns are all aligned except for the very bottom of the page which is another issue I can't seem to get that part to center. However, after loading them up to the web and open them, the columns overlap vertically but horizontally they are fine.
I am confused because I test using the same browsers that I use daily: FireFox, Chrome and I.E. I don't have an Apple so OS X is not tested.
The CSS code is embedded in the web page. I'm wondering if I have left something out or put too much into the CSS that it cancels other lines?
Any help would be appreciated.
Greg
rhubarb67
Registered User
508 posts
Jo Rice
Senior Advisor
10,951 posts
Hiya Greg,
Have you added a reset code to adjust for the differences between the browsers? Many times you'll need to add something for that. You should also use HTML5 instead of XML so that you can use the codes that specify browser settings for things as well. Might want to look into that as that would most likely clear up your issues with the browser differences. CSS Resets usually help take care of that though.
Have you added a reset code to adjust for the differences between the browsers? Many times you'll need to add something for that. You should also use HTML5 instead of XML so that you can use the codes that specify browser settings for things as well. Might want to look into that as that would most likely clear up your issues with the browser differences. CSS Resets usually help take care of that though.
rhubarb67
Registered User
508 posts
Jo Ann wrote:
Hiya Greg,
Have you added a reset code to adjust for the differences between the browsers? Many times you'll need to add something for that. You should also use HTML5 instead of XML so that you can use the codes that specify browser settings for things as well. Might want to look into that as that would most likely clear up your issues with the browser differences. CSS Resets usually help take care of that though.
Hiya Greg,
Have you added a reset code to adjust for the differences between the browsers? Many times you'll need to add something for that. You should also use HTML5 instead of XML so that you can use the codes that specify browser settings for things as well. Might want to look into that as that would most likely clear up your issues with the browser differences. CSS Resets usually help take care of that though.
Hi Jo Ann;
I'm not sure how that XML code got there? When I created the site originally with CC HTML Editor I didn't even know how to spell XML and the Editor threw in "HTML Transitional 4.01". I removed that part, do you think the XML line is causing the CSS to be interpreted incorrectly?
Greg
Per
Senior Advisor
1,850 posts
What Jo Ann said about resets, plus a couple of other things:
1. Your DOCTYPE specifies HTML5 correctly, but then in the <html> tag you make reference to xhtml and such. This may confuse some browsers and give unpredictable results.
Unless I'm totally missing something in your markup intentions, I would just replace your line:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
with:
<html>
2. I assume you are aware that the preview in the Editor is based on Internet Explorer and that you select the specific version you want to use (IE8, -9, -10 or 'Compatibility Mode') under Tools > Preferences > Browser Testing.
3. When you see significant differences in page rendering between different browsers, it can often be due to markup errors that are interpreted differently by the browsers. Take a look at this validation page for some errors in your case:
http://validator.w3.org/check?uri=http% … mp;group=0
1. Your DOCTYPE specifies HTML5 correctly, but then in the <html> tag you make reference to xhtml and such. This may confuse some browsers and give unpredictable results.
Unless I'm totally missing something in your markup intentions, I would just replace your line:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
with:
<html>
2. I assume you are aware that the preview in the Editor is based on Internet Explorer and that you select the specific version you want to use (IE8, -9, -10 or 'Compatibility Mode') under Tools > Preferences > Browser Testing.
3. When you see significant differences in page rendering between different browsers, it can often be due to markup errors that are interpreted differently by the browsers. Take a look at this validation page for some errors in your case:
http://validator.w3.org/check?uri=http% … mp;group=0
Per
www.mingas.com
www.mingas.com
rhubarb67
Registered User
508 posts
This web site has no reason to use XML (at least as I understand it). I try to stay away from fancy animations and stick to "the basics". I had a feeling that I should have removed the reference to XHTML but I thought I might "break" something else>
Thank you Jo Ann and Per. I appreciate your assistance.
Greg
Thank you Jo Ann and Per. I appreciate your assistance.
Greg
Jo Rice
Senior Advisor
10,951 posts
We typically start a new HTML5 website with the following if that helps any :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>INSERT TITLE HERE</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>INSERT TITLE HERE</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Per
Senior Advisor
1,850 posts
Of course, you may want to put the <html> tag before the <head> tag, though... ;)
<!DOCTYPE html>
<html lang="en">
<head>
...
<!DOCTYPE html>
<html lang="en">
<head>
...
Per
www.mingas.com
www.mingas.com
Jo Rice
Senior Advisor
10,951 posts
What you talking 'bout Willis? *snickers* haha all fixed, thanks Per, I was editing it to take all the garbage out that was in the page I pulled it from lol, moved one too many things around I guess :P
rhubarb67
Registered User
508 posts
Well ... I understand all except for the one line:
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I "think" this is an IE override? What is it's purpose?
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I "think" this is an IE override? What is it's purpose?
Jo Rice
Senior Advisor
10,951 posts
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
