Wickham

The code incorporating the line-height: 30px; and using span instead of div inside the "a" tag would be:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .buttonbox { width:300px; height:30px; text-align:left; } .imagebutton { width:20px; line-height: 30px; height:30px; background-color:#999999; border:solid 1px #000000; text-align:center; float:left; } .imagebutton:hover { width:20px; height:30px; background-color: #FF0066; border:solid 1px #000000; text-align:center; float:left; } .link2 { text-decoration:none; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .link2:hover { text-decoration:none; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>button</title> </head> <body> <div class="buttonbox"> <a href="#" class="link2"><span class="imagebutton">1</span></a> <a href="#" class="link2"><span class="imagebutton" style="margin-left:10px">2</span></a> <a href="#" class="link2"><span class="imagebutton" style="margin-left:10px">3</span></a> <a href="#" class="link2"><span class="imagebutton"style="margin-left:10px">4</span></a> </div> </body> </html>

I've found Opera Mobile Emulator http://www.opera.com...r/tools/mobile/ very useful because it gives you about thirty mobile and small screen devices with different resolutions to check how your site displays. This is a good tutorial http://www.html5rock...espeed=noscript It recommends that you code your main stylesheet for the smallest resolution device then have media queries for increasing widths with min-width (it says in a separate stylesheet but it's OK to add the media queries at the bottom of your only stylesheet in increasing min-width - you may only have one media query breakpoint or more than one).

There are complicated filters to use for IE9 and earlier but I would avoid those. If you are really concerned about IE6-9 then use a background image, it's not wrong, most people on broadband with a reasonable down speed will not notice a delay if your page is fairly small in kB, just remember to change to CSS3 gradients when IE10 has a reasonable uptake.

Yes, it's the negative text indent that is moving the link text off-page so the link is off-page too where you can't reach it. If you add "a" to all the styles like #header ul li#portal{ } becomes #header ul li#portal a { } and edit #header ul li to delete the margin-right and padding-left:- #header ul li { float: left; /*padding-left: 20px;*/ /*margin-right: 40px;*/ margin-top: 71px; } #header ul li#portal a{ font-size:20px; text-indent: -9999px; width: 101px; height: 80px; display: inline-block; background: url(img/nav/portal_w.png) no-repeat; margin-right: -21px; margin: 0; } #header ul li#portal:hover a{ font-size:20px; text-indent: -9999px; margin: 0; width: 101px; height: 98px; display: inline-block; background: url(img/nav/portal_b.png) no-repeat; } #header ul li#recon a{ font-size:20px; text-indent: -9999px; width: 156px; height: 80px; display: inline-block; background: url(img/nav/recon_w.png) no-repeat; margin-right: -22px; } #header ul li#recon:hover a{ font-size:20px; text-indent: -9999px; width: 156px; height: 98px; display: inline-block; background: url(img/nav/recon_b.png) no-repeat; } and the same for the others and put a link inside the a href <li id="portal"><a href="page1.html">portal</a></li> and the others, it should make links. I have tested but there may be some edits to margin or padding needed.

Me on the right in Jakarta 1980 (don't ask)!

This site http://www.html5rock...espeed=noscript recommends <meta name="viewport" content="width=device-width, initial-scale=1" /> and this site http://kyleschaeffer...-media-queries/ recommends <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> and I use <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> I really don't know what the difference is. I hope that they are just variations of the same thing. I haven't had your problem so I can't reproduce it, but perhaps one of the above meta tags will cure it. I also have a site where I want a full width footer and I added width: 100%; to the footer container and I don't get your problem. What happens if you add width: 100%; to the #footer-container style in the mobile stylesheet? I never set a width to the body as it's supposed to be 100% by default and I note that you have commented out width: 100%; in the mobile stylesheet. Edit: I've tested with Opera Mobile Emulator for HTC Evo 4G 480*800 and I could see the black background only covered part of the width. I looked at the zoom settings and noticed that it was set at 150% by default. When I changed it to 100% everything fitted the viewport. I don't fully understand how mobile zoom settings work but have you tried altering the zoom in the mobile you are using? I notice that you have your main stylesheet links, then media queries with min-width for 960px, then min-width: 481px and max-width: 959px; then max-width: 480px; The first link I posted above suggests that you code your main stylesheet for 480px mobile phones, then have the min-widths for large widths and not have a separate media query for 480px. However, I don't think this would make any difference in your case.

This may point you in the right direction. The white-space: no-wrap is OK for your images but won't help with a long text paragraph so I added white-space: normal into a new class for the text, added at the bottom of your stylesheet:- #div_content { width: 100%; height: 427px; clear: both; white-space: nowrap; overflow: scroll; /*overflow-y: hidden;*/ } #div_content img { margin-left: 6px; vertical-align: top; } .inlinetext { display: inline-block; white-space: normal; height; 367px; width: 290px; font-size: 13px; line-height: 17px; padding: 30px;} You should limit the text to be no higher than the images (using your text below makes it extend up above the images so I added vertical-align: top; so that the text extends down below the images). <div id="div_content" class="flexcroll"> <ul id="content_inside"> <li id="posters"><a href="images/mscl_lg.jpg" rel="shadowbox"><img src="images/mscl_thumb.jpg" alt=""My So-Called Life"" width="300" height="400" /></a> <p class="inlinetext">“Tsunami”<br /> First Wave - c. 2002<br /><br /> I always assumed that if you had a logo, it meant you’d made it. So, when I first started playing around with graphics, I made my own. At the time I was faintly obsessed (I still am, if I’m honest) with Eastern pop-culture, so named my theoretical company "Tsunami" and used the Japanese katakana character <em>pi</em> (<em>hi</em> with a <em>handakuten</em> diacritic) in white on a coloured circular ground for a logo...coz it looks like a “t”, see? Even at this stage I had the idea of using different colours for different applications: blue for use on materials, pink for the website, green for printed promo stuff. None of these myriad scenarios ever came to anything, though.</p> <a href="images/dollhouse_lg1.jpg" rel="shadowbox [dollhouse]"><img src="images/dollhouse_thumb.jpg" alt=""Dollhouse"" width="156" height="400" /></a> Overflow-y : hidden; seems to be a problem for IE9 so I deleted it. Note that I got rid of the extra <ul> and </ul> tags that you had in your post. I wouldn't code it with all those images inline, I think I would have a series of li tags with float: left;

If you give your parent container #div_content width: 100% it will try to fit everything into the viewport and display some content lower down. What happens if you give #div_content a fixed width for the total of your images and text li tags? Overflow: scroll probably needs a fixed width to operate.

I've found it quite difficult to get rid of that problem, that's why I use a pure CSS menu from here http://www.cssplay.co.uk/menus/ which I know will work. To cure the problem of the space between the top level and the dropdown level that causes the mouse to lose contact, first get rid of all top and bottom padding, top and bottom margins to the "a" styles as well as the li styles and possibly make line-height equal to the font-size. Your menu will look terrible but it should work. Then add padding or margins and keep testing until it breaks again, then go back one step and try again. Sometimes a negative top margin on the drop down level will help to drag it up over the top level a little bit. Edit: the main problem is top: 39px in #jsddm li ul { } editing that to 31px on the hover helps but I'm not sure if it totally cures the problem. #jsddm li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #FFF; position:relative; top: 0;/*39px;*/ } #jsddm li:hover ul, #navbar li.hover ul { display: block; top: 31px; /*added*/ position: absolute; margin: -5px 0 0 0; /*0;*/ padding: 0; } The link works if you drag the mouse quickly, but it's not perfect.

I tested your styles but I saw no buttons in any browser until I deleted the . before a like this:- <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> td a{ color:#FFFFFF; font-weight:bold; background: #111; background: -moz-linear-gradient(#FF0000, #DE1F15); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#FF0000, #DE1F15); background: -o-linear-gradient(#FF0000, #DE1F15); background: -ms-linear-gradient(#FF0000, #DE1F15); background: linear-gradient(#FF0000, #DE1F15); -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; cursor:pointer; cursor:hand; } td a:hover{ color:#000000; font-weight:bold; background: #444; background: -moz-linear-gradient(#EAD58A, #DEBB41); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#EAD58A, #DEBB41); background: -o-linear-gradient(#EAD58A, #DEBB41); background: -ms-linear-gradient(#EAD58A, #DEBB41); background: linear-gradient(#EAD58A, #DEBB41); -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; cursor:pointer; cursor:hand; } </style> </head> <body> <table> <tr> <td><a href="test1.html">Cell1 Cell1</a></td> <td><a href="test2.html">Cell2 Cell2</a></td> </tr> </table> </body> </html> and then the buttons showed including in IE9 (different colors in IE9 from Firefox because IE9 doesn't process gradients, see http://caniuse.com/#feat=css-gradients ). Border radius isn't processed by IE7.

You can test for some different mobile devices in Opera Mobile Emulator http://www.opera.com/developer/tools/mobile/ There seem to be different ways to code media queries. This link http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/ codes max-width and the stylesheet has the largest viewport styles first followed by the small viewport media styles. It shows how to code float: none in a media style. This method of coding for large viewports first seems to be out of date. This tutorial http://www.html5rocks.com/en/mobile/responsivedesign/?ModPagespeed=noscript adopts the more modern approach to style for mobiles first, so the default styles for a small viewport are first followed by @media min-width styles for large viewports. So you would code float: none; in the default styles for a mobile at the top of a styleheet followed by @media query style with min-width and float: left; for larger viewports.

You can add a different font-size into any @media style break point. In some sites the font-size is left the same in all media queries and the media query alters the element positions, perhaps by adding float: none; so that the page layout is altered to a vertical format but the font-size stays the same. See http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

There's another site called Wayback Machine http://archive.org/web/web.php which I haven't used for a long time. It doesn't have every site or every update of a chosen site, but you may be lucky.

Your horizontal menu images Portal, Reconstructive Surgery etc. could be made into links if you add a url. At present one list item is <li id="portal"><a href="#">portal</a></li> so if you add a url where ther is # it should make an image link. If you want a drop down menu, look for a pure CSS dropdown menu like http://www.cssplay.c...e_dropdown.html or another here http://www.cssplay.co.uk/menus/ copy from the page source the head section styles and the body markup for the menu and edit the images and add or remove some of the drop down items..

Does your hosting service support emails sent via PHP forms? The error may refer to the hosting service localhost.

You don't need to use display: table-cell, you can nest the divs to get the side images to extend full height of the content div. See item 17c here:- http://www.wickham43...xbackground.php which has the format <div style="width: ??px"><!--container div--> <div style="background: url(images/arrowbullet.png) top left repeat-y; padding: 0 0 0 20px; border: none; margin: 0;"> <div style="background: url(images/arrowbullet.png) top right repeat-y; padding: 0 7px 0 0; border: none; margin: 0;"> <div><!--center content div--> Content here </div><!--end of center content div--> </div><!--end of right div--> </div><!--end of left div--> </div><!--end of containing div--> Padding on the side divs needs to be at least equal to the background-image width to keep the content away from the side background-images because the background will show in padding without affecting the width for the center div.

I thought that might be the problem. The @ hides errors, now you have removed the @ as you should do, you see the error. It says it can't send the email via localhost, which is what I told you before. Upload you files to your hosting service and try to send an email from the online form (which will not use localhost) or do some complicated edits as described here:- http://roshanbh.com.np/2007/12/sending-e-mail-from-localhost-in-php-in-windows-environment.html

Are you trying to test the email through a local file, via XAMPP or WampServer localhost for example? If so you need to edit php.ini inside those programs. It's safer to test with an online form using your host's server. you have @mail but this is not recommended, see http://stackoverflow.com/questions/3725047/what-is-the-difference-between-the-function-calls-mail-and-mail

Well, my code should adjust to the width, (I use the code myself), but the height is in proportion to the width with my code, so the height in your case would exceed the viewport height in most cases because it's a very high image. If you fix the height to the viewport, the image will get distorted. Here's an example http://www.wickham43.net/backgroundfullwidthflexible.html

You could build in a CMS Joomla or a simple one lie http://www.cushycms.com/en which would give you a username and password to edit certain parts of the page, but this is the reverse of the usual arrangement where the client can only edit parts of a page. Even if you had a CMS for your own use, the Client could override it if he had control over the whole site.

Keep the ftp username and password, or keep the domain name under your control, until the client has paid. I don't think you can code anything into the page code.

An alternative might be to use an img src, not a background-image, and style with #background { position: fixed; width: 100%; top: 0; left: 0; right: 0; z-index: -1; which will adjust to different viewport widths.

You do need to learn some PHP because if a user fills in the form and after submitting the data the same page shows again, you need to ensure that the data is erased from the form or it might get submitted again. It is possible to show tha same page again, possibly substituting the form with a message like "Thanks, your data has been sent".

If both are coded, both will show in modern browsers, so there might be a slight conflict where one displays over the other. If your page is huge in terms of kB then CSS3 might be better so you don't add to the kB, and then forget about a radial gradient in old browsers, but if your page is fairly small in total kB then I would use a radial gradient background image.

You haven't got an action. Edit to this:- <form method="post" action="sendmail.php"> or remame sendmail.php to whatever the php file is called and make sure the path is correct, perhaps you have it in a sub-folder.