robertb

I was having some difficulties posting, I don't know why. I thought I'd be able to delete this post, but I can't work out how.

Excellent, that worked. Perfect. You're right, I shouldn't be so lazy and use the long form... Thanks for your help.

Apologies for the earlier test post. I was having some problems posting, so did a test thinking I'd be able to delete it. But I can't find a delete option. Anyway, to get to the problem. I've decided to set up apache so that I can test out my websites locally without having to ftp it to my web host each time. I've previously coded up a php based contact form, which was uploaded on to my web server and has been working just fine. But if I run it locally via the apache php setup I have (all the latest stuff) it throws up 2 problems. 1. I define the php behaviour in the first half of the file and then at the end I have the html describing the page. The php starts with the line: if($_POST['formsubmit'] == "Send") // Check if the form has been submitted which is the 2nd line of the entire file. formsubmit isn't set until the second half of the file, in the html section, where I have the line: <td align=right><input type=submit name="formsubmit" value="Send"/></td> This throws up the following message when I view the page: So, what does that mean - is it a problem? The page functions fine. How do I get rid of this? Because if I define formsubmit in the php section it would always override the html section I think? 2. The other problem I have is that I have the following code in the HTML section: <td align=right><textarea name="query" rows=8 id="forminput"><?=$varquery;?></textarea></td> When I view the page locally the textarea contains the value <?=$varquery;?> which it doesn't when I view it online. I added this so that the page remembers any values entered by the user if they get an error message. When I view the page via my webhost provider it doesn't show that php code. Any ideas why this is happening and how to make it work correctly? Thanks. Rob

I know this is a very late reply, but I found this thread while trying to find the answer to a problem I was having. Earlier I had a similar problem, and I discovered that if I access the php file in my browser using the address: file: /// C: / public_html / test.php (Which is what would pop up if you just double clicked the filename from windows) It didn't execute the php. If I accessed it via localhost (or whatever you set your Server Name to on install) it worked fine: http :// localhost / test.php So, that may have been your problem

test

Imagine the scenario, I'm looking for a plumber. So, I google plumber and find a bunch of websites, and I visit each. Each one I find I submit a query via the contact form and press send. After an hour or so I've filled in 10 contact forms and I decide that's enough. A week later I've heard back from just 1. I wonder what's happened to the rest. Let me check. Oh! I can't remember who I contacted! Do you know why not? Because about 99% of contact forms do not send a copy of the email sent to the webmaster to the person who completed the form. So, I have no idea if the message was sent correctly, I can't remember what the message is and I can't follow up my query referencing my original message. Why is this? Maybe because people are worried about their email getting out there? Send it from a no-reply address. Can anyone here explain why this happens? For my contact form, after you click submit, it takes you to a thank you page. There it says: Thank you for your message <name>. You sent us the following query: <message> We have sent a copy to your email account <user's email> This way the user can choose to check their message, name and email. It gives a bit of extra confidence that a message was genuinely sent, and the user knows to expeect a confirmation email. Why doesn't everyone do this? Am I missing something?

Sorry, I overlooked the other part of your question. There is a transition property where you can set a time for an item to change, but it isn't really fully supported yet I think. Have a look at this: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#introduction It may help you do some more targeted searches on google.

It may help if you fill the area with enough dummy content so that it needs more than the given space, I'm not sure. But either way, I think if you fix the dimensions (height and width) and set overflow to auto it should work. http://www.w3schools.com/Css/pr_pos_overflow.asp

If you view my test webpage http://www.robsbusinessidea.com/test2/ in the latest IE, Firefox, Safari or Chrome browsers, it works as I'd like it to. Opera however doesn't want to know. If you hover over one of the thumbnails on the right, a fullsize image pops up in the middle. If you move the mouse away from the thumbnail, the fullsize image disappears. In Opera it doesn't disappear until I resize the window. I use the display:none command to make it vanish. I've also tried visability:hidden. I may try using opacity next. Either way, does anyone have any ideas on why it doesn't work? I based my code on the stuff from this page: http://cssglobe.com/articles/link_tech/02.html And that works fine. Somehow I appear to have broken it though! Any help would be appreciated. Regards, Robert

So, obviously while waiting for a reply I continued to plug away at the problems. In the end I managed to solve them or work round them. This page shows the original problem: http://robsbusinessidea.com/test/ and this one shows the fixed website: http://robsbusinessidea.com/test2/ The main problem I had is that I wanted to overlap two objects which could be any size. And below that I wanted to position another 2 overlapping objects of any size, and below that, the same thing again. You can see the desired effect on the fixed website on the left side. Each object has an identical shadow object underneath. By filling the shadow object with the same contents as the top object, they will always be identical in size. If there were no shadow objects, it would be easy. To align 3 items of random size vertically on the left hand side you can just use float: left and clear:left. If there was only one set of shadowed objects it would also be easy. Use position: absolute for the front and shadow object, and just offset the shadow object. Combining them caused the problems. I thought if I created 3 parent float objects they would align nicely on the left. And then if I placed a front-shadow pair within the float it would do the shadow effect. However, setting position:absolute appears to take an object outside the parent 'float' object. This causes the parent 'float' object to have no contents, and therefore disappear. As a result the 3 font-shadow pairs don't align to their parent float, but to the entire browser screen, causing them all to overlap. I faffed around for ages with various combos of relative/absolute position and floats. However, you can only overlap relative position objects accurately if you know the size of the objects. It doesn't work for objects that could change size (I may make the logo bigger, or add more bullet points). Otherwise a relative position item would behave correctly within a float. So, the solution was to swap stuff around. I created an absolute position parent box, containing the 3 float items. Then an absolute position shadow box, containing the 3 shadow float items. I now had 2 absolute position boxes that I could easily overlap. A simple, and possibly obvious solution, but it did teach me a few things about position and floats. It also taught me to order my code correctly and not screw around with z-index unless I have to. The other problems I was having were on the opposite side of the page. I'd been using z-index values galore to try to make things work. I was also using lots of layers in an attempt to simplify things in my head. However, it just made things more difficult. In the end I stripped everything down to the bare bones and removed all z-index. I now only have one z-index value for the pop-up, and I've managed to include a shadow. A very good article I found about z-index is here: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex Once you get your head around Stacking-Context it all makes sense. Maybe this will help some of you!

I am trying to lay out a website, and I'm going round in circles! So, maybe someone can help me out. This is the website: http://robsbusinessidea.com/test/ I've placed the CSS within the HTML, so you can 'View Source' and see all the action. My general design is this: 3 overlapping layers that fill the screen: div_layer_0, div_layer_1, div_layer_2. The bottom layer houses 3 content boxes (div_logo_box, div_list_box, div_sm_box) that I'd like aligned below each other on the left, with a bit of padding and shading around them. The top layer contains the images on the right, which pop up a full size version on hover over. The middle layer has the background box for those images, with a shadow box. The problem is that the 3 content boxes in the bottom layer are overlapping and ignoring the margin values. The should be aligned left below each other. I've tried various combinations of position and float, but no success. Does anyone have any suggestions? Thanks in advance, Rob

Ok, I have solved it, although I don't understand why. I was using firebug to debug in firefox and the divs don't get highlighted unless there's something in them, so I put an in the ao_floater div (<div id="ao_floater"> </div> line 24, index.html) to see what was going on and the problem went away. Bonkers. FYI, the floater/content divs combo is a fix I found to centralise the content div vertically. the interaction between the floater div and the logo div in the top right was causing the bizarre sidebar behaviour. Well, it all works now, and really I've no idea why or how! Thanks anyway.

Thanks for your reply. However, I need to push the image right (from -320px to 0) to show the other half of the image when I roll over. If I take away left:0; it doesn't shift. Also, to be clear, I don't want dummy scrollbars, I only want them to appear when necessary...

Hmm, just downloaded some widgets to find out the browser screen size: Viewport width: 1366px Viewport height: 573px My minimum width is 900px, so that's well within range, and my minimum height should be 560px, which is also within range. hmm, not sure... help!

Right, you may not be able to replicate this as I think my firefox window resolution is right on the crossover point, but if I roll-over the image in the top-right of the screen the image is shifted right to show the other half. No other changes happen that I'm aware of. However, the screen size appears to get bigger. So the total image is 640 (width) x 200. It is in a container of 320x200 in the top right corner of the screen. If I roll over, the scroll bars appear, as if the screen has just got slightly larger. I can't replicate it in any other browser, maybe because I can't get the exact same browser resolution, and it only happens on the front page, not on any others. I don't really know which code or how much to cut and paste so it's probably just best to view the site, but I do know if I remove the code from <div id="ao_floater"> down the problem goes away, so it must be some sort of interaction between the different divs. http://www.agentgorringe.com/ css: http://www.agentgorringe.com/css/agentgorringe.css I hope this makes sense - any comments or ideas will be appreciated. I'm continuing to try to work it out, I'll let you know if I find a solution. Regards, Robert