Front page and CSS

All Forums >> [Web Development] >> Microsoft FrontPage Help

Message

GMisner -> Front page and CSS (9/20/2005 0:04:26)
www.troop245.com. I put this on the CSS group and have not found a solution. My apologies for multiple posting but I think this may be a front page issue not a CSS issue. [sm=angel.gif] Any Ideas about why FP and IE would not read a style sheet but firefox reads it fine. Within FP I see the changes in Design view but when I go to preview they are not there. Multiple IE versions do not display it correctly either... The link above has a css page set up on the welcome and event planner page. Can anyone help..... Thanks

coreybryant -> RE: Front page and CSS (9/20/2005 0:41:50)
Are you talking about the problems on http://www.troop245.com/245_Pages/Header.htm?

GMisner -> RE: Front page and CSS (9/20/2005 0:55:12)
Not at this point... Well those problems appeared at the same time... This is in the 245_pages/Welcome page. If you have firefox you will see the links pick up a style and change colors when hovered over... For some reason all of this has stopped working in both FP and IE. I am sure I did something just don't know what....

caz -> RE: Front page and CSS (9/20/2005 5:20:29)
I had forgotten how to get to individual frames pages too, but when I did all became clear. You have to use FP differently than you are used to using it; ie. stop working in Design View and use code/html view with testing by using Preview in Browser, not the FP "Preview." Using DOCTYPE Declarations in FrontPage As with most modern Web development tools, FrontPage may use design-time proprietary code and attributes for HTML tags that does not validate according to the standards of the W3C. If you use any design-time tools in FrontPage, your pages may not validate when submitted to a validator. If you want to use DOCTYPE declarations in your FrontPage Web pages, you should either avoid using FrontPage design-time tools that insert custom markup or use the Optimize HTML feature (Tools menu) in FrontPage to remove most or all FrontPage design-time markup. This allows you to run the pages through a validator without receiving errors on FrontPage markup code. For this reason, FrontPage does not include DOCTYPE declarations in new pages by default. You can add DOCTYPE declarations to your Web pages in three ways: You can paste the DOCTYPE declaration in Code view; you can insert a code snippet; or you can modify the default template that FrontPage uses to create new pages. Working with DOCTYPES in FP Currently your page gives this Report in HTML Tidy, line 4 column 1 - Warning: <html> proprietary attribute "xmlns:v" line 4 column 1 - Warning: <html> proprietary attribute "xmlns:o" .. Info: Doctype given is "-//W3C//DTD HTML 4.01 Frameset//EN" Info: Document content looks like HTML Proprietary 12 warnings, 0 errors were found! You'll find this introduction to using CSS with Frontpage 2003 a good read too. http://office.microsoft.com/training/training.aspx?AssetID=RC012111061033

coreybryant -> RE: Front page and CSS (9/20/2005 8:33:52)

Reviewing the page http://www.troop245.com/245_Pages/Welcome.htm actually, and looking at the CSS:

a.TDHeader{text-decoration: none;} 
a.TDHeader:link {color: #FFFF00;} 
a.TDHeader:visited {color: #FFFF00;} 
a.TDHeader:focus, 
a.TDHeader:hover {color: #FF9900;text-decoration: underline;} 
a.TDHeader:active {color: #FF9900;text-decoration: underline;}

, your syntax is incorrect. Check out Pseudo Classes. It should be more like

TDHeader a:link, TDHeader a:visited
{color: #FFFF00;}  

TDHeader a:hover, TDHeader a:active
{color: #FF9900;text-decoration: underline;}

GMisner -> RE: Front page and CSS (9/20/2005 14:49:58)
Is this a new syntax that is driven by some change I made. This used to work in IE and Firefox still reads it correctly. Thanks for the help[:)]

coreybryant -> RE: Front page and CSS (9/20/2005 16:34:09)
Not exactly sure if you made the changes or not. But the browsers can sometime mis-read what you are trying to say if the syntax is not properly written

GMisner -> RE: Front page and CSS (9/20/2005 16:50:09)
Corey, I appreciate your help... The syntax changes seem to have no effect. I moved the CSS data to an embedded sheet and it works fine... Not sure where that leaves me[sm=unsure.gif] By the way: Will a syntax error cause the rest of the sheet to be ignored?

coreybryant -> RE: Front page and CSS (9/21/2005 10:18:34)
A syntax error will more than likely cause the CSS not to be read properly. By moving it to an embedded sheet (internal) seems to me that you might have another external sheet or more coding. CSS is cascading so inline CSS will override an internal sheet and internal will override external

GMisner -> RE: Front page and CSS (9/21/2005 10:30:17)
Corey, After reading the thread you pointed to above I think it is probably a specificity isssue. According to the thread both of our syntax methods appear to be "valid". They do have different specificity when used as selectors. The fog is beginning to clear for me and I will put some test sheets togheter later this week to figure out where to go. Unfortunately today and tomorrow are Honey-do days. I will probably have more questions before I finish. [8\|] Gary M.

coreybryant -> RE: Front page and CSS (9/21/2005 11:25:50)
The IWDN forum is pretty good with CSS. It seems just like a simple fix with the coding - going thru. You do have a lot of CSS there - I doubt that is an issue. But you can also try to validate your CSS as well.

GMisner -> RE: Front page and CSS (9/21/2005 23:31:24)
Corey, Caz I got it figured out. [sm=yupi3ti.gif] Not specificity or syntax. It turned out to be the order of the elements in the CSS file. Apparently IE takes the first element "match" it finds in the CSS file While Firefox appears to look deeper. FP apparently has a dual personality. In design mode it looks deeper but preview mode it acts like IE and takes the first one it finds. The fix was to change the order of elements presented in the css file. It appears to matter for both specificity and element type. Specificity example: a {......} should come after a.red {......} otherwise IE will catch only the and ignore the a.red class when applied. With experimentation the following Type order seems to work for both firefox and IE. <body> <p> <img> <a> <TD> Perhaps one of you have seen a complete Type-order list somewhere. or we should develop and post it to the forum. One more thing. It appears the order of the options in the link statement is critical. In my link example: <link rel="stylesheet" type="text/css" href="../text/CSS_245.css"> I placed the type option before the rel option and IE would not use the CSS sheet. Firefox does not seem to care. Hope this helps someone... Thanks for all your help![sm=bowdown.gif]

coreybryant -> RE: Front page and CSS (9/21/2005 23:44:08)
I have not had this problem before in IE and I use Pseudo Classes quite a bit

GMisner -> RE: Front page and CSS (9/21/2005 23:55:10)
Corey, The "CSS for dummies" I am using does warn of type order problems. Perhaps If I use the syntax you described it will be less pronounced. I wanted to play around with that syntax anyway. I'm thinking I can mix types with that method. for example. red a:hover, red p, red TD {color: #FF0000} would cause red text whenever i applied the red class to any of the elements. AM I on the right track??

coreybryant -> RE: Front page and CSS (9/22/2005 0:09:59)
There is only one syntax for pseudo-classes. And then of course a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective and a:active MUST come after a:hover in the CSS definition in order to be effective. But there is no focus on the pseudo class either. You can combine class yes, if it is done properly - but the syntax has to be correct. besides the link I gave above, you can also check out pseudo classes. A List Apart is always a great website as well WestCiv

Tailslide -> RE: Front page and CSS (9/22/2005 2:56:28)
The order for link styling is: Links Visited Focus Hover Active Or Lord Vader, Former Handle Annakin Yeah I know it's sad but it works - I remember it!! As Corey said if you try this in a different order in the CSS it won't work properly.

coreybryant -> RE: Front page and CSS (9/22/2005 7:17:05)
(I remember it Love - Hate). Never did learn the focus on actually - just seemed like it was too much

Tailslide -> RE: Front page and CSS (9/22/2005 7:38:38)
Focus is important for keyboard use / accessibility. Haven't used it for that long myself.

caz -> RE: Front page and CSS (9/22/2005 7:42:11)
I think that you might follow this new thread to advantage when designing with only IE in mind. Cross browser support

Donkey -> RE: Front page and CSS (9/22/2005 7:54:29)
It's just as easy to include focus as to leave it out, I always make focus the same as hover. Then if the user just tabs through the links they will highlight the same way. If you miss out focus, when you tab you just get the dotted border to highlight the link in focus which IMO is not enough to be easily usable.

Page: [1]

0.09375