 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / August 2005CSS and Firefox
Hello. Quick question - if its in the wrong place please point me in the right direction. Does Firefox / Opera etc recognise CSS classes such as: body#page1 #tab1{ } i.e to match <body id="page1"><div ="tab1"></div></body> My classes work fine in IE and not at all in Firefox / Opera - is this a known issue and is there a work-around? or am i just being thick? ta marc marc.birk...@gmail.com wrote: > Does Firefox / Opera etc recognise CSS classes such as: The browsers work. Your code is broken. "#" indicates an id, not a class. "<div ="tab1">" isn't valid anything. Why do you need to identify the body element with an id? Why would you need body in the CSS selector at all ? Unless you're actually addressing the page canvas as the <body> itself, then parentage from body is implicit in all HTML elements anyway. It's rare (albeit sometimes needed, and always valid) to have a CSS selector with nested ids. ids are unique and HTML is tree-structured (i.e. only one path to any location in the document) - so why would you ever need to select on the combination of two ids, not just on one ? Working in IE is almost an invalidator, certainly not a validator. What does this page look like? Post a URL, not a fragment. > marc.birk...@gmail.com wrote: > [quoted text clipped - 7 lines] > > Why do you need to identify the body element with an id? There is at least one technique that involves assigning an ID to a page. A class could be used too, but since the body is unique by definition, and since IDs are given higher specificity in CSS than classes, it makes sense to use an ID. Apols in my haste my example was incorrect. Example selector: #body#page7 #tab3 Example in page: <body id='page1'> <div id="#menu"> <ul> <li id='tab1'> </li> </ul> </div> </body> A copy of the page is at: http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx The body needs a selector because i am attempting to do a css based menu where the only difference between the pages is the id passed to it on the querystring and therefore to the database. I am aware that the fact that the css works in IE does not make it correct. Cheers. Marc >Example selector: #body#page7 #tab3 >Example in page: [quoted text clipped - 6 lines] ></div> ></body> Try fixing <div id="menu"> Then using body#page7 #tab3 { ... } Or even <li id="menu-tab1" > and #menu-tab1 { .. } Nested stacks of ids is rarely needed and hard to maintain. If you keep the names vaguely meaningful, then you can usually do it in one level of selector. If you need page-context sensitivity, then a common technique for menus is <li class="current" > where needed, rather than tying particular ids to particular pages. marc.birkett@gmail.com a écrit : > Apols in my haste my example was incorrect. > [quoted text clipped - 22 lines] > > Marc Marc, an id attribute value must be an unique attribute value. Therefore, why would you need to create a css declaration like this #body#page7 #tab3 {...css declarations...} when #tab3 {...css declarations...} will do the same? or #tab3, #tab4, #tab5 {...css declarations...} Gérard -- remove blah to email me > an id attribute value must be an unique attribute value. Not necessarily! It must be unique on a _page_, but there's no reason it can't be repeated across a _site_. If the CSS is shared across multiple pages, then there are situations when it's reasonable to use a pair of ids in a CSS selector to recognise the case when they're encoutered together - this might only occur on a few of the pages. > Hello. > [quoted text clipped - 11 lines] > My classes work fine in IE and not at all in Firefox / Opera - is this > a known issue and is there a work-around? or am i just being thick? It's hard to imagine how even IE would recognize <div ="tab1">. Harlan Messinger schreef: > It's hard to imagine how even IE would recognize <div ="tab1">. That could be a good start for IE-css-hacks :-)  SignatureNiek > Hello. > [quoted text clipped - 4 lines] > > body#page1 #tab1{ It does if you add a space between 'body' and '#page1' >> Does Firefox / Opera etc recognise CSS classes such as: >> >> body#page1 #tab1{ > > It does if you add a space between 'body' and '#page1' body#page1 is not the same as body #page1 SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Badlands - Winter's Call "A copy of the page is at: http://194.216.112.248/staging .nnt.nhs.uk/nntlift/index.aspx " Apologies. The link above now works. ta > "A copy of the page is at: > http://194.216.112.248/staging .nnt.nhs.uk/nntlift/index.aspx " > > Apologies. The link above now works. Are you sure? there is a space between staging and the rest of the line. I guess you meant http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx Looking at your source, "body#page1" should work as a selector. How about changing the single quotes to double quotes on the IDs of the list elements? SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: L.A. Guns - The Ballad of Jane >>> Does Firefox / Opera etc recognise CSS classes such as: >>> [quoted text clipped - 3 lines] > > body#page1 is not the same as body #page1 Gerraway! :-) What does "body#page1" mean anyway? I thought it was invalid but I just fed it through http://jigsaw.w3.org/css-validator and it accepted it. >>>> Does Firefox / Opera etc recognise CSS classes such as: >>>> [quoted text clipped - 7 lines] > > What does "body#page1" mean anyway? It means any body element with an ID named page1. > I thought it was invalid but I just fed it through > http://jigsaw.w3.org/css-validator and it accepted it. Here's another enlightening link for you ;-) http://gallery.theopalgroup.com/selectoracle/ SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: L.A. Guns - The Ballad of Jane >>>>> Does Firefox / Opera etc recognise CSS classes such as: >>>>> [quoted text clipped - 9 lines] > > It means any body element with an ID named page1. > Here's another enlightening link for you ;-) > http://gallery.theopalgroup.com/selectoracle/ Ah! Very interesting. Another link for the bookmarks. Now to look up the definition of 'descendant' and 'child'... "How about changing the single quotes to double quotes on the IDs of the list elements? " Tried this with no effect (other than they are all " which is the way it should be!). Going to experiment with assigning a current flag to the parent li of the of the main menu. Now have another version of the site at: http://194.216.112.248/staging.nnt.nhs.uk/nntlift1/index.aspx?pageid=8&trancheid=1 Where the CSS is much much better (and im happier with it). Now just have to identify which <li> is the current one and cast its background to white, foreground to black and we are sorted. Shame it seems to be difficult with an asp.net repeater! > Now to look up the definition of 'descendant' and 'child'... You are a child of your parents. You are a descendant of your parents, your grandparents, your great-grandparents, your ... SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) Fixed version here: http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx?pageid=1 cheers people! ta > Fixed version here: > http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx?pageid=1 Fixed in what way? http://validator.w3.org/check?verbose=1&uri=http%3A//194.216.112.248/staging.nnt .nhs.uk/nntlift/index.aspx%3Fpageid%3D1 There are 32 HTML errors, for starters, including at least 1 duplicate ID. The CSS seems to validate, but the HTML errors may still cause rendering issues. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. dont have an issue wit the html errors for the moment. just getting the css to work, then i will worry about that.... > dont have an issue wit the html errors for the moment. just getting the > css to work, then i will worry about that.... Totally the wrong attitude (have you read _nothing_ in this group?) Your CSS engine can't work reliably with broken inputs, either HTML or CSS. If you expect to debug some layout screwup, you _MUST_ fix the simple validation errors first. Not all invalidity errors will cause problems. But there is no reliable way of telling which will and which won't, so the easiest route is to fix the lot first. Or even better, don't write invalid code to begin with. This is quicker and easier than the "fix it all afterwards" approach. > > dont have an issue wit the html errors for the moment. just > > getting the css to work, then i will worry about that.... Well, I plonked *@gmail.com for widespread disregard of netiquette, but it seems there are other good reasons too. > Totally the wrong attitude (have you read _nothing_ in this group?) Well said. "Or even better, don't write invalid code to begin with. This is quicker and easier than the "fix it all afterwards" approach. " Agreed - but equally i am used to writing ASP.NET code which will then render non-accessible HTML later anyway. The fact that the layout problems may be caused by the html rather than the css is a good point which i had not considered. "...@gmail.com for widespread disregard of netiquette, " please feel free to point out my failures of netiquette. Thanks. marc http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx?pageid=1 Ok. I think that this is ready to go. Constructive comments welcome. Thanks for your help everyone. Cheers, Marc > http://194.216.112.248/staging.nnt.nhs.uk/nntlift/index.aspx?pageid=1 > > Ok. I think that this is ready to go. Constructive comments > welcome. a. Doesn't fit in my browser window, requiring me to scroll right just to see your content. b. Has a very large unused space at the left ... (scrolls right) ... aha, another one over there. c. Has a really ugly aqua background color. [1] d. Font seems too small. Must be those font "words" instead of the better usage of percentages. (Content should be font-size: 100%; ) That's all I have time for at the moment. [1] That's my default background color; you didn't assign one. Signature-bts -This space intentionally left blank. > > don't write invalid [HTML] code to begin with. > > Agreed - but equally i am used to writing ASP.NET code which will then > render non-accessible HTML later anyway. Then fix your ASP so that it makes valid code (and (optionally) it should make well-indented code with linebreaks and comments too). Automatically generated rubbish can swamp any attempt to debug it by eyeball - you need all the help you can get. To fix your CSS problems, capture the ASP output, then store that as static HTML and debug that as a simple static HTML/CSS problem. If you're using XSLT to generate output then this is particularly necessary, as XSLT's one-line character spew can be a real nightmare to try and tart up without getting to look at the intermediate stages. > please feel free to point out my failures of netiquette. 4 come to mind off the bat... 1. Failure to properly quote text. 2. Failure to properly attribute text that is quoted (in that awful way of manual quoting you are using). If you insist on using google groups to post, at least learn how to use the blasted thing! 3. Failure to lurk in the group for a while before posting. If you had, you would have already seen the subject of posting come up many times. 4. Failure to take advantage of google groups as it was meant to be used, as a searchable archive. If you had searched for the subject of netiquette you should have found your own answers quick enough. All of the above are common failures of those who post through google groups. It's no wonder google is mass killfiled by so many usenet regulars. Do yourself and everyone else a favor: get yourself a real newsreader and dump google groups. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.