dbrimlow

I'm guessing that you are designing this for (and maybe viewing it on) an 800 x 600 screen resolution. It seems to work fine on a larger resolution. If I had to guess, I would say that there are few potentials for cross-browser and screen resolution blow-up: First, since you are using xhtml "strict" doctype, you MUST close your tags ... the paragraph before your second <h2> tag was not closed. This can cause strange things in various browsers when using xhtml strict. Second, you have very MAJOR errors in your css. In a few places you forgot the semicolon between two commands - eg: [code]#label { width: 4em; float:left; text-align: right; margin-right: 0.5em display: block }[/code] I recommend specifying the width in your css "body" tag and lose the "position:relative". Also, specify your default font-family, font-size and color and use colors like "#FFFFFF for white, #000000 for black (and to convert your specific background color of "rgb(209,205,193" to "#D1CDC1"): [code]body { font-family: trebuchet MS, tahoma, verdana, arial, sans-serif; font-size:100%; color:#000000; width:800px; margin:0; padding:0; background-color: #D1CDC1; }.  [/code] you are not using a main "wrapper" or "container" (with a specified width) and are relying on your html element to contain the layout using "absolute" positioning ... IE 5x will likely make mincemeat out of this. But try the above, first. If necessary, you can always control it all with a main container div: I'm not sure how your layout will blow-up (or not) when the css errors are fixed, but it does not look comfortable to me. Using absolute positioning and the visibility:auto AND a height:100% for your content div is a scary way to have it scroll. Good luck

ToonMariner is right. This layout uses div containers (id and class) for layout and spans (class) only for visual design. Did you confuse <div class="something"> with <span class="something"> as both being "spans"? P.S. It will most likely blow-up in IE7 because his conditional comment is only for IE6.

I need to stop a logged-in user from being able to continue a session in any other browser/window. In essence, I don't want sessions to be passed into a new window, if opened. I want it to provide a warning message that if they open another window, they will lose all of the data they have previously entered and have to log-in again, and re-enter everything. How do I restrict an open session to one browser/window?

Great. THANK YOU!!!

I recently found a great form security checking solutions here and tried it. But it seems that a standard php function is not available either in my php4.01 or Apache 1.3. I get this error: Fatal error: Call to undefined function: mb_detect_encoding() in /somesendmail.php on line 106 Is this a function that requires turning on/off?

Actually, effigy, that's the issue. I'm wide open for XSS. I had a simple validate that only "disabled" the < and > tags. But they got around that easily. There IS a long list of comments on the htmlentities thread [url=http://us3.php.net/manual/en/function.htmlentities.php]http://us3.php.net/manual/en/function.htmlentities.php[/url] and they all show various ways it breaks. I just tried the really great sugesstion there from "cameron at prolifique dot com" posted May 5 2006 who was annoyed as well and looking for a final solution. Unfortunately, his sugesstion, which is quite sweet, requires the "mb_convert_encoding" function to be enabled. In my PHP 4.01 I can't find that function (aren't included PHP functions either turned on or off? Do you have to download them like mods?)

I found that the easiest way for me to learn css was to "reverse engineer" an existing css based page to see how any changes I make impact the design. Of course, the absolute hardest thing about css layout is cross-browser rendering. All modern browsers Firefox, Mozilla, Safari, Opera, Netscape, for the most part display properly coded css layouts correctly. While, all versions of IE will display the same page differently (included IE 7). Most css designers try to start getting the designs to work from IE 5.x for Mac and PC, IE 5.5 PC and IE 6.0. But many have decided to just ignore the IE 5s because they have so many problems with css display. What I recommend is trying a few free "templates" for XHTML-css at: [url=http://www.ex-designz.net/template/]http://www.ex-designz.net/template/[/url] see how they work, change the graphics and colors to your own, etc. To truely learn how to do it right from the start, try both: [url=http://www.alistapart.com/]http://www.alistapart.com/[/url] and [url=http://www.positioniseverything.net/]http://www.positioniseverything.net/[/url] Position is everything is the best place to learn all of the IE bugs and hacks to get it to behave. The most crucial part is to use firefox to check your styles in first, than check it in whatever IE you use. Good luck.

[quote]or you could just check for the tags < and >[/quote] Actually, I had that. And it doesn't work at all. If you read the message on the striptag link you gave from "dumb at coder dot com", he points out the flaw in this. And it deals with the various charsets and languages: [quote]Within <textarea>, Browsers auto render & display certain "HTML Entities" and "HTML Entity Codes" as characters: &lt; shows as <    --    &amp; shows as &    --    etc. Browsers also auto change any "HTML Entity Codes" entered in a <textarea> into the resultant display characters BEFORE UPLOADING.  There's no way to change this, making it difficult to edit html in a <textarea> "HTML Entity Codes" (ie, use of &#60 to represent "<", &#38 to represent "&" &#160 to represent "&nbsp;") can be used instead.  Therefore, we need to "HTML-Entitize" the data for display, which changes the raw/displayed characters into their HTML Entity Code equivalents before being shown in a <textarea>. how would I get a textarea to contain "&lt;" as a literal string of characters and not have it display a "<" &amp;lt; is indeed the correct way of doing that. And if you wanted to display that, you'd need to use &amp;amp;lt;'. That's just how HTML entities work. htmlspecialchars() is a subset of htmlentities() the reverse (ie, changing html entity codes into displayed characters, is done w/ html_entity_decode()[/quote] Recently I also read another thread somewhere that said htmlentities is incomplete and does not cover the html characters for all languages. My form was hit with Chinese. That's what I meant by there must be SOMEONE SOMEWHERE since 2003 who has come up with a fairly solid solution to make it too hard for form insertion to be worth the trouble by nipping it in the bud during the hackers' initial, bot automated recon spidering, that looks for an easy grab to make it worth the time for further intrusion.

I've been thinking about how to reply. I realize that simply restricting chars doesn't solve the problem of XSS (Cross site scritping) via form injections (though it helps). I had someone hack my forms and was sending spam directly from my own IP - using my own IP headers!  There are so many encode type symbols for less than and greater than, in so many languages, that it is difficult to catch them all - and forcing strict charset encoding doesn't help. The key to safe forms seems to start in the headers on the action page. I found this online and it seems a good idea as a start: [code]$email = $HTTP_POST_VARS[email]; $mailto = "email@address"; $mailsubj = "Form submission"; $mailhead = "From: $email\n"; reset ($HTTP_POST_VARS); $mailbody = "Values submitted from web site form:\n"; while (list ($key, $val) = each ($HTTP_POST_VARS)) { $mailbody .= "$key : $val\n"; } if (!eregi("\n",$HTTP_POST_VARS[email])) { mail($mailto, $mailsubj, $mailbody, $mailhead); }[/code] [quote]If you're collecting an email address on your form (as we are above), it's important that this is checked within the php script for extra line feeds. One of the latest techniques used by spammers is to inject their own headers into the email. To do this, they enter a random email address followed by a line feed. This is then followed by a blind carbon copy (Bcc) containing many email addresses. Using this technique, it's also possible for the spammer to insert their own email message and send it to many other addresses via your script. In the above script, we're using the 'eregi' function to check the email address just before sending the email. Ideally, all data which may be used within the email headers should be checked.[/quote]

I need a simple, all inclusive solution, that stops hackers and bots from entering scripts into my form text fields. I just want to stop anyone from entering any scripts or html. After reading here and following thread links for half an hour, I finally ended the tutorial for htmlspecialchars [url=http://us3.php.net/manual/en/function.htmlspecialchars.php]http://us3.php.net/manual/en/function.htmlspecialchars.php[/url] which made my head swim by all the various chars from various language encodes that could slip through. If I allow plain text and numbers only: [code]if (!preg_match("/[a-z0-9]$/i", $text)) {     die ("HTML not allowed"); } where $text = $_Post('description');[/code] Would that prohibit punctuation? And If I allow punctuation, do I specifically have to dissallow potential html symbols? Like " &lt; &gt; &#8217; ^ &amp; * ( ) &lt; &gt; &otilde; &oslash;" etc.? Anyone have a safe form expression?

[quote]Okay, I'm still a CSS noob, so be gentle. To me, it looks like I have two choices: 16 lines of CSS code per button or 6 lines of code for an unlimited number of buttons. What am I missing?[/quote] Sorry if I sounded denegrating or condescending ... not my intent at all, and I am no one to condescend to others - having to still fight to get my css to work right much too often). And (LOL Fenway) actually I see you ARE indeed dynamically generating your content. First, are you using an "external" stylesheet? In other words putting a link in your head section to a prewritten .css file in a folder on your server (like [code]<link href="astyles.css" rel="stylesheet" type="text/css" />[/code]), or are you writing the styles on each page in the head section (like [code]<style type="text/css"> #content_right {background-color: transparent;text-align:center;} #content_right img {width:100px; height:75px;} </style>[/code]? Because a style sheet need only be done once and linked to. Second, "another" reason the css would be preferable (and you just have to copy and past the same style for each image then change the style name and image url) is what if people turn off their borwser javascript? Sure, you can do a "no-script" links command, but then they just see flat text links in an otherwise artfully crafted page. Third, the image is not written to the page each time. It doesn't show in the markup at all. It is a background image. You can even do a css version of "preload images" that will preload and cache as soon as the css is called - like this: #navimgs { background-image: url("media/button1.gif"); background-image: url("media/button2.gif"); background-image: url("media/button3.gif"); background-image: url("media/button4.gif"); background-image: url("media/button5.gif"); background-image: url("media/arrow2.jpg"); background-image: url("media/arrow3.jpg"); background-image: url("media/logo.gif"); background-image: url("media/title.jpg"); background-image: url("media/mugshot1.jpg"); }

[quote author=fenway link=topic=111797.msg454504#msg454504 date=1161276402] OR 4. You can dynamically generate your content and not being limited by CSS at all. [/quote] LOL! He thinks writing a few lines of css is lengthy coding ... I don't think coding dynamically generating content is his short-cut solution. (besides, even if he dynamically generates content, he still need to use a style sheet to actually style the dynamically generated content).

OH BOY, are you in for a "fun" ride. LOL! IE 5.2x for Mac? ROTFLMAO! :P You really need to take a few days to get your head around the wonderful world of various IE version nightmares. You will soon understand why the web developer world HATES MS with such an unbridled passion. The best place to start (and be prepared for your brain to explode a few times from the massive attack of getting around the malichious beast known as IE) is [url=http://www.positioniseverything.net/]http://www.positioniseverything.net/[/url] The IE vs Standards section is particulalry eye watering. The only way I have finally gotten around all the bugs of all the IE css layout issues was to create, find, beg, borrow, steal, buy layouts that work (carefully hoard them and use them as templates for ALL my layouts).

[quote]I "get it" but I'm wondering why they would change the standard to increase coding a hundred-fold[/quote] Imagine that you want to change the 2 images you use on a mouseover hover ... sitewide ... on a 4,000 page website ... to use images in a new folder. 1. you can go into the pages one by one and change the path and images. 2. if using a web editor (like Dreamweaver or FrontPage), you can try a sitewide find and replace ... then republish 4,000 pages (hoping that they are all 100% the exact same version that were online, and not an older version of a few pages you fixed by hand via ftp). OR 3. you can change two simple lines of the CSS and "PRESTO"! 4,000 page instantly use the new graphics live, online without so much as a browser user's "by your leave".

Actually, the reason most of us are starting to use XHTML is because it gets us away from using HTML tags that are eventually going to be obsolete. It helps break you of being lazy and using junk code that MS loves so much - I am now in the habit of closing all tags. It is important, particularly when using css, because if you don't close a tag, that style will bleed into the next tag. If you are converting a huge number of old html to make them valid, it may be better to start with using html 4 transitional. But remember, the doctype is only the first step. You must make sure you actually then write valid code for that particular doctype. And for any web developer that means using two great tools. 1. the w3c html validator [url=http://validator.w3.org/]http://validator.w3.org/[/url] 2. Firefox with the webdeveloper toolbar extension. I couldn't imagine life online without this fabulous toolbar.

Have you tried the DW forums?

Actually, you can do it in DW (I'm using DW 8.0), but you may still be able to in earlier versions. Go to > edit >> preferences >>> code coloring: Click on the type of code that you want to edit the color for then click on the "edit coloring scheme" button. You can then scroll though the styles for all types of code snippets within your documents - on the right you change the color and background-color, on the bottom is a sample of code using all of the defaults for the various editable snippets. This is a pretty cool tool if you have specific snippet types that you want to call attention to every time (all backgrounds default is white; text color default for php script block is "web" red; script functions default is web "link" blue; script identifiers/text default is black; script string default is dark red; forms default is orange; etc.) So long as you know specifically what element type you want to have a new default color and background for , you can easily change them here.

[code]You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions. Wow, what a "duh" moment... Thanks for the quick fix[/code] Whoa! That isn't a quick fix by any means. wildteen88 was just telling you that in order to have a "flexible" aka "floating" layout that will auto adjust for any screen res, you have to use percentages for ALL non-fixed sized content. Photos and graphics with text and/or pictures are fixed pixel, while layout divs, tables, background simple graphics and text fonts are flexible. There is no point having your layout auto adjust if the fonts are fixed and vice-versa. And that's where using "em" instead of "px" sizing for fonts, margins, padding, etc is usefull because ems can be easily tweaked to be "just a smidgeon bigger or smaller". BUT, that can also be tricky if you don't understand css (and drive you nuts!) because the em size is relative to the font size of the div it is in (not the body font size). % sized fonts, margins, padding, are better for beginners to use instead, until they get more comfortable with non-table layout. It looks to me as if you code specifically for IE, judging by the use of an IE expression within your actual style. This will not validate and may cause strange things in real browsers because "left, right, top" is a positioning element meant to position your div the designated distance, respectively, from its container for relative positions or for absolute positions the browser window itself - well, except if the absolute position div is placed within a relative postioned container div, then the absolute "left" designation will be spaced relative to the relative positioned div left boundry - LOL, if you don't know css and/or that totally just confused you, sorry :) Actually, I now see a few things in your css that may be dangerous for cross browser rendition. Flexible layout can be a real tricky thing to do if you are not familiar with css and IE hacks, because every version of IE (including 7.0) will handle flexibility (boxes, floats, absolute positioning, margins and paddings) much differently than real browsers. Specifically, spacial distances for positioned elements and ALL block level tag elements (lists, paragraghs, blockquotes, headers). But this doesn't help you solve your issue. Yours is MUCH trickier because you, in essence, want to have a non-fixed-height "positioned" div that scrolls down any overflow within a table cell, that will now also have no fixed height. Usually we specify a visible height so any initially hidden overflow scrolls. After playing with it I found that either a fixed px height or an em height works - This was something of a challenge to me because I've never tried using a flexible overflow before; it gave me a hard time using percentages for the height. But after playing, I was able to easily designate an em instead of px or percent. You have to use a position:relative div in your scrollable cell. and place that within the right columned table cell. So, using an old (poor html) form I had lying around, I was able to get it to be flexible (an inelegant, markup messy solution, that can be done without the table). [url=http://www.bluesmandeluxe.com/ae/flexscroll.html]http://www.bluesmandeluxe.com/ae/flexscroll.html[/url] Feel free to grab the source code. I stripped away the old form actions and validations so it is just a broken dummy form for effect. here is the css (I didn't use css "shorthand" since you are a beginner): [code] body { font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333; background-color:#FFFFFF;} #container { /* everything goes within this div*/ width:100%; height:100%; background-color:#FFFFFF;} table { /* this is your control table for the left/right cells - unless otherwise specified, all tables will use this body level tag command */ width:95%; border:none; padding:0; background-color:#FFFFFF;} .td1 { /* left column class style */ width:25%; height:100%;} .td2 { /* right column class style - I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */ width:74.99%; /* I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */ height:100%;} .tr1 { /* This class controls how the left cell behaves and is for the left cell data - all visible */   position:relative; width:95%; height:100%; top:0px; left:1px; visibility:visible; overflow: visible;} #content { /* This class controls how the right cell behaves and is for the right cell data - scrollable */ font-size:85%; position:relative; left:1px; width:90%; height:30em; /* This is the crucial bit - you can use a fixed height like "300px", or an em - I couldn't get it to work using percentages */ top: 0px; visibility: visible; overflow: auto; /* I leave this up to the browser so I can debug any mangling by an IE version */ background-color:#FFFFFF;} #content table { width:90%; color:#666; background-color:#FFFFFF;} [/code] Here is the html structure: [code] <body> /* open container */ <div id="container"> /* open main table */   <table>     <tr>       /* apply style to left cell */<td valign="top" class="td1">       /* open left cell container div */ <div class="tr1">           <p>non scrolling content</p>           <p>The font size is 100% </p>         /* close left cell container div */</div> </td>       <td> /* open right cell container div */ <div id="content">           /* open new table within right cell*/             <table width="100%">               <tr>                   <td colspan="5" ><your content in a table</td>                 </tr>               </tbody>             /* close new table within right cell*/ </table>   /* close right cell container div */      </div> </td>     </tr> /* close main table */  </table> /* close container */ </div> </body> [/code]

Ahh, now I understand what you want. Instead of relative to the top and left of the browser "window", you want to specify the left/right relative to the parent. So you can position them on the screen without being constrained by the screen x, y, z. There's a trick to this that I stumbled onto at csszengarden (in one of the entries) a while ago. You want to FIRST, obviously, specify a proper doctype and use proper markup structure. But the real trick is to set a "position:relative" container in your body, with desired width. I but a border on the container to give you an idea of how the box divs are relative to the container. I then gave the parent box div a left and top (again just to show how it positions relative to the container. You can place these boxes anywhere relative to the parent box). [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; margin:0; } #container { display: block; position: relative; border: 11px  #0A0D12 solid; margin: 0px; margin-left:auto; margin-right:auto; width: 527px; height:400px; voice-family: "\"}\""; voice-family:inherit; width: 505px; } div.box { border: 1px solid black; position: absolute; left:140px; top:100px; } --> </style> </head> <body> <div id="container">control container </style> <div class="box" style="width: 300px; height: 300px;">box <div class="box" style="width: 50px; height: 50px; top: 100px; left: 100px;">box1</div> <div class="box" style="width: 50px; height: 50px; top: 120px; left: 130px;">box2</div> <div class="box" style="width: 50px; height: 50px; top: 160px; left: 150px;">box3</div> </div> </div> </body> </html>[/code] Hope this was what you were looking for. Things like this usually are done usinga trick someone somewhere in a forum knows. Dave

Sounds like you want a "liquid" or "floating" layout. Not easy if you don't know how and even then you need to cheat by seeing how someone else does it. Here is a liquid layout I am working on that works in all browsers including IE 5.23 for Mac! http://www.regisresidential.com/ Feel free to copy the css and layout. Here is something similar that blows up in IE 5.5 and below, but works fine in every other: http://www.regisresidential.com/page2.html Here is a less flexible, more px based fixed fonts and widths with a non graphic corner rounding technique, displays dynamic database driven content without using table cells Works in all browser versions (except IE 5.5 and below don't like using the rounded corner divs). This is great for dynamic database content using php (not finished using a regex to filter the php url paths yet, but the layout is flexible while fixed to a certain extent): http://www.regisresidential.com/rounded2b.php

overflow in general is apples and oranges for IE and proper browsers. overflow:auto is a nightmare in IE. Many coders use overflow:hidden and overflow:visible as actual IE hacks to get IE 5.0.x and 5.5 to tame the IE "double margin bug" and the "expanding box bug". What you most likely are looking for is the "overflow:auto" element along with the "visibility" feature of an absolute div (aka "layer" in DreamWeaver). On its own it has no reference points other than what you want the browser default to guess at (and you never want to leave it up to IE to guess). BUT, used in an absolute positioned div it tells the browser how to guess. Example - what I did here was to put a table based form within an absolute positioned div, http://www.manhattanapts.com/forms/r_lwu.php : Here is the css I used. The div should be wider than the table, but the table must be longer than the div. Then designate how much of the div you want to be visible with height and when you specify overflow:auto it adds scrolling up and down for visibile table height (you can do the same with width by making the table width wider than the div width. #form { position: absolute;         top: 108px; width:515px; height:450px; margin-left: 215px; overflow: auto; visibility: visible; border-color:#ccc; border-style:solid; border-width:thin; left: 0px; top: 110px; }

Without really seeing what you intend, it is hard to guess what you are going for. You always, of course, have position:relative. This places the sub divs in the actual flow of the body html. Also, have you tried just using floats? #Parent { float:left; etc., etc. } .child1 { Float:left; etc., etc. } .subchild1 { Float:left; etc., etc. } [code]<div id="Parent"> <div class=".child1">content of one child</div> <div class=".subchild1">content of subchild</div> //*close Parent div *//</div>[/code]

Since you are trying to get LAP on Win, why not just go ahead and download WAMP? It really is so much easier than configuring the conf/ini files yourself. The new release of WAMP5 now comes with PHP 5.1.6, Apache 2.0.59, MySQL 5.0.24a and phpmyadmin 2.8.2.4. http://www.wampserver.com/en/

[quote]I think you need to think about what you're saying.  Considering a design from basic layout is not using a template.[/quote] Yeah, actually that's true. It isn't really "using" a template. It is getting ideas fromthem to create my own. Thinking about it further, I basically do it just to give me a broader range of design "ideas" and to start with a conceptual representation phase time saving shortcut. It still takes me almost as long to modify and personalize the css "templates" I've downloaded, and I only look at the graphic ideas included, then make my own on top of them in photoshop to keep the size to the original before really personalizing it all. But, again, I think that's what businessman332211 is looking for, as well. A creative ideas jumpstart. For me, what it all comes down to, as well, is that I always want to learn new ways to do old things. Not having the time or money to read all the books on the subjects, I prefer the reverse engineering technique. Taking it apart to see how something was done, then putting it back together my own way. Graphics, for instance, is a real rough point for me because for years I was required to translate our "art director's" Photoshop conceptions to the web. This made for very heavy pages with little to no text. So I always look for simpler ways to make small snips of the graphic repeat. It was rough in the Quirks mode table only Dreamweaver days. But for the past 2 years amazing things are done with css (thanks to sites like csszengarden and alistapart). As an example, on these two designs I used techniques and css from a few sheets I have downloaded including some of the old csszengarden for text header tags to work at tag level behind a graphic; I even kept the same names they used (though I should change them since the css is 99% my own now anyway). They look nothing whatsoever like the original designs and the graphics are all new: http://www.jhrenovations.com/about.html http://bluesmandeluxe.com/ae/acidexchange.html As a matter of fact, the above gave me the idea to try an animated gif from the external css as a div background, instead of the flash my friends wanted me to use. So USING templates is certainly not what I do, or recommend ... but downloading them, learning from them and getting ideas for your own design schemes I certainly recommend.

My point was to try the variety of css general layout templates for layout ideas, not to use the same exact design "styles - colors, graphic, etc". Most of the templates I've used look nothing like the original whatsoever - apart from the container structures - and even then I end up messing with them to allow for dynamic content. Coming up with a totally new "look" idea from scratch for every project is rough - particularly for us full-time salaried guys trying to get some side web jobs. I don't WANT all my sites to look similar. Judging from other posts, businessman332211 is looking for some shortcuts to help get him started ... been there, done that and want to help the same way I wanted help when starting to break out of the bad quirks mode coder I had become (and rarely got it) ... except here with php code.