Looks great in FF - IE7 no good

[scorpion]

This is my first dive into .css as I had only used Frontpage 2000 up till now.

 

I am trying to add some text in my .css file that updates all 30 pages of my website as the "include" files did in Frontpage.

The following code works in FF but does not load in IE7.

.css code:-

 

p.whatsnew:after {

content: "I have revised the website using CSS (cascading Style Sheets) It certainly makes for smaller files which should decrease time to load. Please let me know if any links are broken or something doesn't work correctly. The website works best in Firefox ... I am still working on getting the website to display properly in Internet Explorer."

}

 

h2.update:after {

content: "15 October 2009"

}

 

Then in my .htm files:-

What's New

---

This adds the first passage of text under the h2 heading"What's New"

And:-

 

---

© Dennis Wright 2006 - 2009 - Last updated -

---

 

This adds the date after the words "Last updated -" .. at least it does in FF but not in IE&.

 

Any clues for me please? Thanks in advance.

[newseed]

The method you are using is not quite how you should use css. Css is bascially something you style your html with. ALL your content should be within the html and use css to pretty it up.

 

The html should look like this:

 

    
What's New


"I have revised the website using  CSS (cascading Style Sheets)  It certainly makes for smaller files which should decrease time to load.  Please let me know if any links are broken or something doesn't work correctly.  The website works best in Firefox ... I am still working on getting the website to display properly in Internet Explorer."

The css like this:

 

p.whatsnew {
   color: #333;
   font-size: 12px;
   }

 

As a former FrontPage user myself, the FP Includes was a nice feature and so I understand that you are trying to get the same results without FP Includes.

 

If you want to display something repeatedly such as header, footer, navigation, etc. then you need to use server side includes (SSI). PHP or ASP will achieve this. That means you need to do your pages in php (or asp).

Edited October 15, 2009 by newseed

[scorpion]

Thanks newseed .... I was hoping for something simpler.

 

I have operated my website for 3 years using FP and without having to learn any HTML. It had been suggested that I should learn HTML and .css to reduce excess code and speed things up.

 

I took the plunge and ran through various tutorials and studied .css tags and felt I had done a great job, reducing the website from 11Mb to 5.5Mb and files from 703 to 85. It looked good and worked perfectly in FF and before I pulled down my old site and put up the new, I thought I should check it in IE7 (which I don't normally use) and this problem, along with a couple of smaller livable ones, arose.

 

The :after tag certainly works in FF and appeared to be my answer to updating all 30+ pages at once, if only I could get it working in IE.

 

I have not heard of SSI, PHP or ASP (Yes, I am a beginner!) and I wonder if it is all too hard and I should leave my site as is in FP. At least it works!

 

Are there any other simple ways using .css of adding text across multiple pages that works in both FF and IE?

Present site is ww w.irish type3 dna.o rg if that helps at all. It's the Right-hand panel and date in the footer that I need to update.

[newseed]

You should leave your FP site as is and create a test site in which you can rebuild your site using proper html and css techniques.

 

As for the css 'content' no rendering in IE7, that browser does not support that and it's not meant to be an include as you are trying to do.

 

Here's a good list of CSS properits that show which browsers supports what:

 

http://www.webdevout.net/browser-support-css

 

SSI is server side include. It's much like the FrontPage Include except it is processes code via by the server whereas FP has to build the page when you upload it. FP includes also breaks an html page if you edit it via live whereas PHP and ASP server side includes does not.

 

You only need to learn just enough php or asp to use server side includes.

[falkencreative]

CSS really isn't intended to be used to add content. HTML is for content, CSS is for styling that content. Keep in mind that a good chunk of users still use IE6 and IE7, and I believe both of those browsers don't support the :after syntax.

 

PHP includes are quite simple and easy to work with, and it sounds like it would be a better fit than what you are trying to do at the moment. Yes, you will have to spend some time renaming your files to .php and adding the include code, but after the initial effort it will be much easier to update that text.

 

Tutorial on PHP includes:

http://www.tizag.com/phpT/include.php

[scorpion]

Thank you for your positive comments, encouragement and link to the php tutorial.

I promise I will study php carefully and hopefully get the site to work properly.

Thanks again

[scorpion]

Yep.... I have it! Thanks for that tutorial. My test page works in both FF and IE now! Also, I can see that I can (and should) pull all of my Navigation menu out of the webpage files too.

 

So lets get this straight. I need to rename ALL webpages .php and convert ALL links to point to the new .php webpages?

 

What happens with my home page? it was /index.html I thought this was needed as the default page? Will /index.php work as a default?

[falkencreative]

So lets get this straight. I need to rename ALL webpages .php and convert ALL links to point to the new .php webpages?

Correct. Any pages that include your PHP include will need to have the .php extension. Hopefully whatever program you are using to code the site has basic find/replace capability, which will make changing the links within your site a lot easier. It will be a little bit of work at first, but it will save you a lot of time in the long run. You can use PHP includes for any piece of content that stays consistent across all your pages -- header/footer/navigation/etc.

 

What happens with my home page? it was /index.html I thought this was needed as the default page? Will /index.php work as a default?

index.php should work just fine.

[scorpion]

Well that wasn't such a big deal after all! Thank you both, Benjamin and 'newseed' for your help and direction to the .php tutorial. It was all that was needed to head me in the right direction.

 

I have pulled down the FP site and loaded the .css and .php website. Still a very few minor vertical spacing issues between FF and IE7 but unless a user is swapping between one and the other it is not a problem.

 

And yes, /index.php works just fine.

 

Just a few of the archive files to rebuild which is only a time issue and all will be done. Thanks again

[newseed]

You may want to keep in mind that since you are now using .php instead of .html, you will probably want to do redirects of .html pages you had with FP over to .php.

 

Current/old url: mydomain.com/services.html

New/redirected url: mydomain.com/services.php

 

Or you can use .htaccess to do url path changes where the new .php url will now be the new .html. You just basically change the extension to match the old .html.

[scorpion]

Yes, thanks for that .... I think I have caught them all.

php "include" is just what I was looking for.