Forum Moderators: not2easy
1) Specificity
With using div= for bottom navigation and footer sections instead of class= for each and every paragraph and link, there seems to be a specificity issue, because the font styling for links in those sections (just links, not regular text) is over-riding the links in the rest of the page. It's happening on some pages but not others, and the code looks the same, so what's the best way to troubleshoot that?
2) Combining CSS and table layout
There's very little available for combining CSS and table layouts; are there any tips, shortcuts or tutorials on how to effectively do it?
3) Nesting tables within floated layouts
On some sites, eliminating tables for layout of the main page sections isn't an option, unless there's a way to nest "product grid" tables with 3 columns and 3 rows for product displays with a floated layout with 2 or 3 columns. Is there a way to do it, or is it necessary to still put the whole page layout in a table?
4) Highlighting active sections rather than active pages
I've seen a couple of ways to style the fonts for currently active pages, using detecting the current URL for the pages, but nothing for highlighting the active "section" links rather than individual pages. For example, if there are pages for spinach, broccoli and asparagus, it would be nice to be able to indicate that the vegetables link in the global top navigation is the current section (not spinach for the page). I've found nothing on how to do that.
5)Clarification on clearing for floated elements
Floated layouts are giving me some problems with 2 column pages with header and footer that really don't need tables any more (they were done 5-6 years ago), with what I've read on "clearing" not 100% clear.
Pointing to older threads covering these is fine and would be a big help, but no doubt there's a new batch of issues that's happening with newer IE versions and a lot of what's around deals with the older browsers.
Sorry for the title, when I started to post and did the title I only had two issues and then thought of a few more.
[edited by: Marcia at 7:39 am (utc) on Feb. 10, 2008]
1.:
Could you post a bit of code, it would prevent us guessing ...
2. & 3.:
In my experience where I used tables for representing data,
many browsers have serious bugs in relation to tables and CSS combined. I'm seriously avoiding opening the can of worms. Getting rid of tables for layout purposes and only using them for tabular or matrix data has been a good move. I hope you
The trick is to take a step away from thinking of a page as a grid you place things on. Instead think of it as a flow where you can take elements to either side and have your main flow wrap around it, or can take elements and put them exactly where you like them. Tue columns etc will only apear in CSS3 or later and that'll take a while before the browsers all catch up (most importantly IE6 needs to die first)
You can and will find plenty of examples of CSS used to do matrix style layout, but you'll notice that you're going to be struggling it a lot more than when you go with the flow.
4.:
I might have misunderstood, but is this what you look for:
html:
...
<body id="vegies">
...
<ul id="menu">
<li><a href="#" class="ismeat">beef</a></li>
<li><a href="#" class="ismeat">pork</a></li>
<li><a href="#" class="isveg">cucumber</a></li>
<li><a href="#" class="isveg">tomatoes</a></li>
...
css:
#menu a {color:black}
#vegies #menu a.ismeat, #meats #menu a.ismeat {color:red}
5.:
most 2 col layouts use floats to achieve the effect.
this means including clears inside them becomes troublesome as they do what they're supposed to do without regard to the column layout.
