Hi - I'm trying to add a copyright notice at the end of a bunch of pages using CSS and the content property. I can get it to work in IE and FF using a variety of methods, but I can never get it to work in External Preview.
Here's some simplified code with these results:
* IE and FF both show "Span_text - Footer_text" centered with 2em top and bottom margins below the text "End of web page."
* External Preview just shows "Span_text" centered with margins, below "End of web page."
content_test.css
body { }
#Main { width: 100% }
h3.Footer {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
}
span.Footer:after { content: " - Footer_text"; }
content_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta stuff -->
<link rel="stylesheet" href="content test.css" type="text/css" />
</head>
<body>
<div id="Main">
<p>End of web page.</p>
<h3 class="Footer">
<span class="Footer">Span_text</span>
</h3>
</div>
</body>
</html>
Any ideas, or is this just a bug in External Preview?
Michael Wallis
Registered User
6 posts
Per
Senior Advisor
1,850 posts
You are missing an underscore in this line of the markup:
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
Per
www.mingas.com
www.mingas.com
Michael Wallis
Registered User
6 posts
Per wrote:
You are missing an underscore in this line of the markup:
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
You are missing an underscore in this line of the markup:
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
Umm - I accidentally added underscores to the underlined file name header in the example code. The actual files do not have underscores. As noted in my post, the centering and top/bottom margins from the h3.Footer def of the CSS file are working fine, but the External Preview of content text is not.
I have since found out that linear-gradients also do not work in External Preview, but they do work in IE and FF. Perhaps the compatibility mode is designed to not work with "advanced" features?
Jo Rice
Senior Advisor
10,951 posts
The files "should" have underscores or even better dashes, never put spaces in your file names. Fix that and let us know if that addresses any of your issues or not. May not, but it will address browser issues in the end for sure. 
Per
Senior Advisor
1,850 posts
Michael Wallis wrote:
Umm - I accidentally added underscores to the underlined file name header in the example code. The actual files do not have underscores. As noted in my post, the centering and top/bottom margins from the h3.Footer def of the CSS file are working fine, but the External Preview of content text is not.
I have since found out that linear-gradients also do not work in External Preview, but they do work in IE and FF. Perhaps the compatibility mode is designed to not work with "advanced" features?
Per wrote:
You are missing an underscore in this line of the markup:
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
You are missing an underscore in this line of the markup:
<link rel="stylesheet" href="content_ test.css" type="text/css" />
Try it again with the underscore included
Umm - I accidentally added underscores to the underlined file name header in the example code. The actual files do not have underscores. As noted in my post, the centering and top/bottom margins from the h3.Footer def of the CSS file are working fine, but the External Preview of content text is not.
I have since found out that linear-gradients also do not work in External Preview, but they do work in IE and FF. Perhaps the compatibility mode is designed to not work with "advanced" features?
Sorry, I did not make myself clear enough...
The reason you don't see the results you expected in the Preview (the footer and the gradients) is that your link to the stylesheet file is invalid when you have a space in the file name as per your markup list:
<link rel="stylesheet" href="content test.css" type="text/css" />
Not only the Preview browser, but also Chrome and probably some other browsers will react the same way. They simply do not 'see' your CSS file and all the styling there is ignored.
If Firefox and IE10 display the page the way you wanted/expected, this is only because those browsers - in this particular case - used some kind of fuzzy logic and took a wild guess at what you meant with the (disallowed-) space in the file name.
So, do the following:
1. Replace any spaces in file names with an underscore or a dash.
2. Make sure that your link in the markup is consistent with the actual file name.
If you follow those rules, the F11 Preview and all the browsers will display the page as you have specified it in HTML markup and CSS!
Also, you can specify which browser you want to be used in the Preview. You can choose between IE8, IE9 and IE10 under Tools > Preferences > Browser Testing.
Per
www.mingas.com
www.mingas.com
Michael Wallis
Registered User
6 posts
Jo Ann wrote:
The files "should" have underscores or even better dashes, never put spaces in your file names. Fix that and let us know if that addresses any of your issues or not. May not, but it will address browser issues in the end for sure.
The files "should" have underscores or even better dashes, never put spaces in your file names. Fix that and let us know if that addresses any of your issues or not. May not, but it will address browser issues in the end for sure.
Except for these two bare-bones files that I created for testing purposes, none of my CSS/HTML file names include spaces. I have now added underscores to the test file names and retested them with the same results.
The files are attached in a single ZIP file for your convenience.
Other info:
* Win7 64-bit up to date.
* HTML Editor Version 12.8 Build 691
* Internal Preview set to "Internet Explorer (Compatibility Mode)
Per
Senior Advisor
1,850 posts
Michael,
I'd suggest that you use IE10 for your Preview browser, rather than 'IE Compatibility View', especially if you are using linear gradients and other CSS3 elements. (for the linear gradients, you would still have to use vendor prefixes like webkit, moz, etc., not just for purposes of Preview but for all the browsers)
While I take a look at the files you attached, you may want to take a quick look at the attached screenshot of markup and Preview windows from my test of your originally posted codes. Here I had added the underscore for consistency with the css file and I believe I used IE8 as Preview browser. What my preview shows is what you consider 'correct', - right?
I'd suggest that you use IE10 for your Preview browser, rather than 'IE Compatibility View', especially if you are using linear gradients and other CSS3 elements. (for the linear gradients, you would still have to use vendor prefixes like webkit, moz, etc., not just for purposes of Preview but for all the browsers)
While I take a look at the files you attached, you may want to take a quick look at the attached screenshot of markup and Preview windows from my test of your originally posted codes. Here I had added the underscore for consistency with the css file and I believe I used IE8 as Preview browser. What my preview shows is what you consider 'correct', - right?
Per
www.mingas.com
www.mingas.com
Per
Senior Advisor
1,850 posts
I checked out the files in your latest post and found that the F11 Preview displays the correct result when used with IE10, but incorrect when using "IE (Compatilbility Mode)".
So, use IE10 with the Preview and you'll be OK!
So, use IE10 with the Preview and you'll be OK!
Per
www.mingas.com
www.mingas.com
Michael Wallis
Registered User
6 posts
Per wrote:
I checked out the files in your latest post and found that the F11 Preview displays the correct result when used with IE10, but incorrect when using "IE (Compatilbility Mode)".
So, use IE10 with the Preview and you'll be OK!
I checked out the files in your latest post and found that the F11 Preview displays the correct result when used with IE10, but incorrect when using "IE (Compatilbility Mode)".
So, use IE10 with the Preview and you'll be OK!
I switched the previewer to IE8 and everybody plays nice now.
Since that mangy cur IE6 has finally been put down, I'm finally getting around to overhauling my site so I can use some of the shiny new CSS toys that mean old Microsloth wouldn't let us play with before.
I remember back in 2010 what a nightmare it was to get CSS2 stuff to look similar in IE and FF, but I don't remember if I had any problems with the Previewer. That's why I was caught off guard when my updated pages looked virtually identical in IE and FF but the Previewer was playing stupid.
Thanks for your help!
Michael Wallis
Registered User
6 posts
Per wrote:
Michael,
I'd suggest that you use IE10 for your Preview browser...<snip>...
While I take a look at the files you attached, you may want to take a quick look at the attached screenshot of markup and Preview windows from my test of your originally posted codes. Here I ..<snip>..I believe I used IE8 as Preview browser. What my preview shows is what you consider 'correct', - right?
Michael,
I'd suggest that you use IE10 for your Preview browser...<snip>...
While I take a look at the files you attached, you may want to take a quick look at the attached screenshot of markup and Preview windows from my test of your originally posted codes. Here I ..<snip>..I believe I used IE8 as Preview browser. What my preview shows is what you consider 'correct', - right?
Yup! I switched my Previewer to IE8 and now all is well at my end.
Thanks!
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.
