dbrimlow

THANKS, Got it! That did it. What a total "Duh" moment ... of COURSE it will just add the comma to all but the last ... . Dave

Thanks for replying. How would I put the comma on each string while avoiding the last using implode? I never used implode other than to add or remove an element to/from each string.

Hi, everyone, been a while since I've visited I hope this is a common issue with php and javascript. (thanks in advance for any help ) I have a jscript slideshow and am using php to dynamically drop an array of photos with links into the jscript's "imagearray" section. The problem I have is avoiding the trailing comma after the last image array element. Here's how it should look. imagearray: [ ["http://mysite.com/photos/123-large/123a.jpg","http://mysite.com/info.php?list=564623"], ["http://mysite.com/photos/123-large/123b.jpg","http://mysite.com/info.php?list=564623"], ["http://mysite.com/photos/123-large/123c.jpg","http://mysite.com/info.php?list=564623"], ["http://mysite.com/photos/123-large/123e.jpg","http://mysite.com/info.php?list=564623"] //no trailing comma for last value in array ], My php array is: //trailing comma gets included in each value $url = "[\"http://mysite.com/photos/".$id."-large/".$photo."a".chr(96+$j).".jpg", \"http://http://mysite.com/info.php?list=".$rlink."\"],"; $photos[]=$url; Putting the array into the jscript gallery: <script type="text/javascript"> blah, blah; imagearray: [<?php echo "$photos[]";?>], blah, blah </script> How would I avoid (or strip out) the comma on that last array value? Thanks again, Dave

You need to "clear" your floats. There are a few techniques that work - some people will get rabid and attack if you don't use their favorite, but they all have their pros and cons. Here are two that I use: 1. Quick and easy technique - to work in IE and Opera container requires a flexible width and height: Simply add "overflow:auto;" to the ".tbl-row" select - put it before "width:96%;" Pros: contains all floated elements within the parent container Cons: can add unwanted scrollbars if the content escapes the container Some people prefer using "overflow:hidden;". This eliminates the scrollbar potential. Pros: contains all floated elements within the parent container Cons: can cause some content to be hidden (if height is fixed in pixels, or if width of combined floats exceeds the width of the parent container) 2. My favorite is the "clearfix" technique (it uses the ":after" pseudo element) - add the following AFTER the entire .tbl-row select .tbl-row:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .tbl-row {height:1%} /* IE6 */ *:first-child+html .tbl-row {height:1px} /* IE7 */ Pros: Clears floats before and after the container and contains floats within the container - it works every time in every browser - it validates. Cons: LOOK AT IT!!!! You would need to add any other floated containers to it. It needs those two IE hacks since IE 6 and 7 don't support the ":after" pseudo element

During the first "Browser Wars", @import was used as a hack for hiding stylesheets from Version4 browsers and lower (varied support for CSS1). The CSS2 @import rule was not understood by V4 and lower browsers (and therefore the Stylesheets they referenced were ignored). People continued using it even after IE won the wars (like people today still use old deprecated html and invalid code even with transitional doctypes). HOWEVER, the reasons it is better to use LINK instead of @import, are: 1. there are certain performance advantages - particularity for IE 6 - 8 2. IE loads and parses the referenced files within @import sequentially (first one then another taking 2 seconds each) - this makes the page slower to finish. LINK, however, loads and parses the files all together in parallel - making the files available quicker and the page ready faster. 3. @import can create problems with JavaScript - IE loads script tags before style tags; if you have styling in the script that relies on a loaded css file (like getElementsByClassName) the resource is not going to be available and the results unpredictable. Using LINK ensures that the Stylesheets are loaded in parallel AND in the specified order. Hope this helps put it into proper perspective.

Clean, simple markup reduces overhead considerably ... load once 75k background images are not a heavy burden on bandwidth. You example is based on Dan Cederholm's brilliant "faux columns" technique. It is the most elegant way to get the elusive "equal height containers" - regardless of content - without slapping unnecessary divs or spans within the content markup. There are a few other clever techniques, like Stu Nichols's CSSplay Layouts, but Stu's markup is semantically incorrect and there are too many unnecessary divs used for styling alone, which defeats the point of separation of content from presentation. The key to efficient CSS is clean simple HTML markup. The font and style tag soup horror of the past needs to be eliminated forever, not replaced by inline styling, span-oramas and div-itus.

Remember, one of the most important aspects of CSS based layout is to reduce markup clutter and eliminate unnecessary tagging. Once you start to understand the concept of "separating content from style", you learn to consolidate your styling elements by using minimal or existing tags. Avoiding "DIVITUS" is a constant vigilance. Divs are html placeholders and NOT to be used willy nilly for styling. In your example above, the use of the two existing container ids along with the content id is much cleaner within the markup because they encompass the content elegantly while providing a convenient unobtrusive vehicle for background styling. It is the same with slapping text directly into divs without using proper text content tags (h1 - h6, p, ul-ol-dl li). A web page is mostly about the content ... so content should be first consideration and first to get any html tagging. CSS relies upon content. And LIQUID layouts even more so. You need to carefully consider how the text "breathes" within the containers as they shrink or expand. Adding containers that are created for styling along will become ungainly once the content and page design progresses. The more containers you add, the deeper your content descends and the more unwieldy the text sizing specificity becomes. What takes people longest to learn about CSS is its simplicity. It took me a year to realize the awesome power of simple text content tags. I recommend every beginner start where many of us finally had our "eureka" moment after trial and error - max design selectutorial. Learn this and you will avoid weeks of frustration and be able to concentrate on the more advanced and tricky aspects of CSS. It uses an easy to follow format and the concepts are well explained - here is the entire tutorial (1 page for each concept): Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. Rules * What is a rule or "rule set"? * Grouping declarations * Grouping selectors * Shorthand properties * CSS Comments The document tree - it's a family thing * Introduction * Ancestor * Descendant * Parent * Child * Sibling * Multiple descriptions Selectors * Type selectors * Class selectors * ID selectors * Descendant selectors * Child selectors * Universal selectors * Adjacent sibling selectors * Attribute selectors * Pseudo-classes * Pseudo-elements Advanced stuff * Should you use ID or class? * Inheritance * Cascade * What happens when conflicts occur? Selectors in action - a step by step tutorial * Introduction * Step 1 - the html code * Step 2 - drop in content * Step 3 - styling the <body> element * Step 4 - styling the <a> element * Step 5 - styling the banner <div> * Step 6 - styling the heading * Step 7 - styling the first container * Step 8 - styling the second container * Step 9 - styling the navigation <div> * Step 10 - styling the <ul> element * Step 11 - styling the <li> element * Step 12 - styling the <a> element * Step 13 - styling the hover state * Step 14 - styling the “more” <div> * Step 15 - styling the <h3> element * Step 16 - styling the content <div> * Step 17 - styling the <h2> element * Step 18 - setting the line height * Step 19 - clearing the contents * Step 20 - styling the footer <div> * Step 21 - styling the <ul> element * Step 22 - styling the <li> element

Without seeing the entire page and other container context or CSS rules, where you want the table placed, it is difficult to give a "default" answer. However, as a stand-alone, it is easy. Understanding floats is one of the most fundamental (and hardest to master) aspects of css. But once you can master floats, CSS is a breeze. Create, as follows, 3 css classes in your external file or within the head section CSS (adjust paddings, margins, widths, etc as needed): .buttonwrap {float:left: display:block; margin: 20px; padding: .5px 10px; width:70%; } .leftbutton {float: left; padding-left: 10px} .rightimg {float: right; padding-right: 10px} Now put this in your markup body in place of the table. <div class="buttonwrap"> <span class="leftbutton"><input type="button" name="button" id="button" class="button" title="Button"/> </span> <span class="rightimg"><input type="image" src="themes\default\images\img_loading.gif" name="img_loading" id="img_loading alt="ALWAYS USE AN ALT WITH IMAGE" width="???" height="???"></span> </div>

The main issue is that you are closing your "mainwrapper" divs too soon, THEN ALSO adding two EXTRA closing divs after the footer. You want your footer to be enclosed WITHIN those two divs, so you need to remove the two closing divs BEFORE you begin the footer.

You have two extra closing divs BEFORE the footer AND after the footer. Remove the two closing divs BEFORE the footer. id="mainwrapper" and class="mainwrapper" should close AFTER footer. You need to wrap the footer within those two divs. You did that according to my instructions, but then forgot to remove the old closing divs. change this: </div> <br> </div> </div> </div> <!-- closes bodywrapper --> to this: </div> <br> </div> <!-- closes bodywrapper -->

The layout structure has major flaws and is not cross-browser compatible (it totally blows up in IE6). However, the quick fix for what you have is twofold: 1. add 7px left margin to the footer, position the img to "top" "center" and remove the height, like so: .footer{float:left; margin:0 0 0 7px; background: url(images/bottom.png) top center no-repeat} The footer will now become the main footer wrap for all footer content. 2. because of the way you are using non-float wrappers and floated sections, all content needs to be contained within the global wrappers: This is a prime example of why you should not design an HTML markup layout grid without having any content! Design is created AROUND the content, not trying to fit content into an existing design. I. Anyway, move the closing of both mainwraper divs to the bottom of the page (above closing body tag) to INCLUDE the footer tags. II. Wrap the footer div around the other footer divs. The page bottom now should be: </div><!-- closes bodywrapper --> <div class="footer"> <div class="footertxt"> <div class="footerme"> </div> <div class="footerright"></div> <div class="footerimgmail"></div> <div class="footercopyleft"></div> <div class="footercopyright"> <div class=" "></div> </div> </div> <!-- closes footertext --> </div> <!-- closes footer --> </div> <!-- closes .mainwrapper --> </div> <!-- closes #mainwrapper --> </body> </html> It should work fine in Firefox, Chrome and Safari

Haku's answer is, of course, literally correct, one can always use inline styles to over-ride a previous style or stylesheet. However, it is not recommended since the whole point of stylesheets is to get the styling OUT of the markup in the first place. Also, it is way too involved and unwieldy to use inline styles in a CMS template without knowing basic PHP. To answer your question, for your purposes (and intent), you cannot apply the same select name, like "#content", with different attributes from two different stylesheets. The page willl only use the set of attributes for #content from the last css file or stylesheet it read. This is the "cascade" in cascading style sheets (and what Haku meant by "specificity"). What most of us would do is to change any duplicate select name in the forum plugin's css file from "#content" to say "#forumcontent". Then in the WP template: <div id="forumcontent"> [FORUM PLUGIN CODE] </div> It is strange that a WP plugin would use the same select ID as a known standard WP select ID. Good luck, Dave

Cross-browser solution by Stu Nicholls (at cssplay): http://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html It isn't semantic in the code (right div before center div) but it gives you a starting point

You put the ordered list in a new list item tag. So of course it will show a bullet as any new list item. You need to "embed" the ordered list within the original list-item tags. Remember, the original list item does NOT close until AFTER the closing embedded list tag. <ul> <li>point 1 <!-- embed ordered list INTO list-item --> <ol> <li>embedded point 1</li> <li>embedded point 2</li> </ol> </li> <!-- NOW close original list-item --> <li>point 3</li> </ul>

Quick and dirty way (assuming you used inline styling to illustrate the issue) ... add a left margin to second div and remove the float. <div style="width: 200px; background-color: #CCCCFF; float: left;">hello1</div> <div style="background-color: #CCCCCC; margin:0 0 0 200px ">hello2</div> But it is ugly because inline styling is foolish (for troubleshooting, scaling, page load) and proper text content tag defaults (paragraphs, lists, headers) will blow it up. Try it, simply place hello1 and hello2 into paragraph tags. <div style="width: 200px; background-color: #CCCCFF; float: left;"><p>hello1</p></div> <div style="background-color: #CCCCCC; margin:0 0 0 200px "><p>hello2</p></div> Now imagine THAT with a whole page of content! Here is the one of a number of better solutions: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>quick, fixed left /fluid right columns</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> body, p {margin:0; padding:0} /*zero out browser defaults */ .left {width: 200px;background-color: #CCCCFF; margin:0; padding:5px; float: left} .right {background-color: #CCCCCC; margin:0 0 0 200px; padding:5px 20px;} </style> </head> <body> <div class="left"><p>hello1</p></div> <div class="right"><p>hello2</p></div> </body> </html>