Hiya,
The last couple day's I've noticed that at times the editor is not displaying the same as it would if you preview it in a browser or upload it. Here's an example that I am working with tonight:
What it looks like in the editor preview window (Preview Pane not the Browser preview)
http://wolverana.com/myimages/cceditor1.jpg top area
http://wolverana.com/myimages/cceditor2.jpg bottom area
What it looks like in preview browser or when uploaded (both the same)
http://wolverana.com/myimages/ccuploaded.jpg
CCHE not previewing correctly - Post...
Jo Rice
Senior Advisor
10,951 posts
Cary
Ambassador
1,073 posts
well, I'm not sure if this is what you were after, but try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 07</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 18px;
}
#container {
width: 960px;
margin: 0 auto;
}
#wrapper {
background: url('images/infogral_gold.png');
background-repeat: no-repeat;
height:1542px;
width:900px;
text-align: left;
border-bottom: 0px;
float:left;
padding: 30px;
}
/* Header */
#header {
background: url('images/bar_gold.png') no-repeat;
height:206px;
width:960px;
text-align: center;
border-bottom: 0px solid #ddd;
}
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 30px 18px 0;
}
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
/* #navigation { border-bottom: 0px solid #ccc; } */
/* #navigation ul { padding: 0 18px 9px; } */
#extra {
border-bottom: 0px solid #ccc;
}
#extra small {
font-size: 11px;
line-height: 18px;
}
#content {
float: left;
}
#content p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
/* #navigation { float: left; margin-left: -950px; width: 175px; } */
#content {
margin: 0 0 36px 0;
width: 725px;
}
#extra {
float: left;
width: 175px;
}
/* Footer */
#footer {
color: #316A79;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
padding: 0 18px 10px;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0 18px 6px;
padding: 10px 0 6px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
padding-right: 5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#navigation, #content, #extra { margin-top: 20px; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>Welcome to Wolverana's Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div>
<div id="wrapper">
<div id="content">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div>
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div>
</div>
<div id="footer" align="center"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 07</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 18px;
}
#container {
width: 960px;
margin: 0 auto;
}
#wrapper {
background: url('images/infogral_gold.png');
background-repeat: no-repeat;
height:1542px;
width:900px;
text-align: left;
border-bottom: 0px;
float:left;
padding: 30px;
}
/* Header */
#header {
background: url('images/bar_gold.png') no-repeat;
height:206px;
width:960px;
text-align: center;
border-bottom: 0px solid #ddd;
}
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 30px 18px 0;
}
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
/* #navigation { border-bottom: 0px solid #ccc; } */
/* #navigation ul { padding: 0 18px 9px; } */
#extra {
border-bottom: 0px solid #ccc;
}
#extra small {
font-size: 11px;
line-height: 18px;
}
#content {
float: left;
}
#content p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
/* #navigation { float: left; margin-left: -950px; width: 175px; } */
#content {
margin: 0 0 36px 0;
width: 725px;
}
#extra {
float: left;
width: 175px;
}
/* Footer */
#footer {
color: #316A79;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
padding: 0 18px 10px;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0 18px 6px;
padding: 10px 0 6px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
padding-right: 5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#navigation, #content, #extra { margin-top: 20px; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>Welcome to Wolverana's Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div>
<div id="wrapper">
<div id="content">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div>
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div>
</div>
<div id="footer" align="center"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>
Jo Rice
Senior Advisor
10,951 posts
lol thanks Cary, that would be the answer to my other post and most assuredly appreciated as it was driving me nuts! ty so much.
Now just gotta find out why the preview and the editor don't match, not sure if that's a coding problem or an editor problem so am waiting to find out. This looks great tho thanks so very much
Now just gotta find out why the preview and the editor don't match, not sure if that's a coding problem or an editor problem so am waiting to find out. This looks great tho thanks so very much
Cary
Ambassador
1,073 posts
Glad it worked for you
CoffeeCup Software Rocks!
Registered User
848 posts
I think, though I could be way off base here, that CCHTML editor uses the Trident Internet Explorer engine for rendering previews in the browser pane. This means that sites will look vastly different when ultimately in Firefox, Opera, Chrome, Safari et al. There is no real way around this except to use as much bog-standard, non-proprietary code as possible. That said, even when you do that, sometimes browsers will just break pages. It is a matter of coding your site and viewing it in every browser you can download until it looks good on the majority of them, then upload it. I know the majority of people use Internet Explorer but that is no reason to exclude all other browsers when building your site.
All my sites render near-enough to the same in all browsers.
All my sites render near-enough to the same in all browsers.
Jo Rice
Senior Advisor
10,951 posts
Yeah I haven't had this happen 100% of the time so it's not real bad, but this last bout has been giving me nightmares that it's so vastly messed up online and in the browser previews and in the internal Preview pane it was just fine, really got to the point I just gave up on it for the night and next day mostly lol. It's hard to do when you have to use the external previews all the time. But on a good note it's really not any more time consuming to do it with external previews instead of the Preview pane, as the Preview pane took almost as long to save and then show as it does to open the outside browser preview, so it's all good in the end anyways, now if I could just place it right!! I got the top and bottom though TYVM Cary for all your help, I compared my code to see what I had done differently and commented areas for future reference as to what and why, and that helped a whole lot. TY TY
Thanks for the info on the browser differences Dave, I didn't realize CCHE used an IE based setup, and helps to know that.
@CC Dev Team - use FF cuz IE is usually the only browser things don't look right in LOL
Thanks for the info on the browser differences Dave, I didn't realize CCHE used an IE based setup, and helps to know that.
@CC Dev Team - use FF cuz IE is usually the only browser things don't look right in LOL
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.
