Wickham

You need some kind of forum which allows registration and admin control. All forums give you lots of files which you just download and automatically install. They contain php files and MySQL database files normally. You then use the admin menus to fine tune the permisions, board names. etc, so you don't need to understand PHP or MySQL. phpbb3 is quite a common forum but it has to have its own page; there are lots of themes but they probably won't match your web pages. Wordpress http://wordpress.org/download/ can be styled to look like your other pages. Cbox http://www.cbox.ws/ is a very simplified blog program which you can insert into one of your web pages (see the demo and example on the right).

If you've solved the first problem, that's OK but it's worth remembering that sometimes you have to repeat the parent div for each part of a style like this:- #comments #url, #comments #author, #comments #email {.......} but not always :/ As far as the 4 tabbed content items are concerned, it all looks exactly the same in my IE7 as in Firefox.

Take some earplugs for the gibbons I love gibbons; I envy you. Check out the internet speeds there; I suspect speeds in US and UK are much slower than some of the asian countries now which have fibre optic cables nearly everywhere for 50Mbps or more.

There is a .css folder and one file in there is called site.css In which case create a folder on your computer called css in the folder where the php file is, or in the folder at the level above (are you sure the folder is .css with a . as this seems unlikely) and put site.css file inside. With any luck all the paths will still be correct for the link to work. Can you post a link to the php page that you are trying to convert to html? As far as the conversion from PHP to html is concerned, I said previously that it depends what the PHP is doing. If it is just inserting code like headers, menu or footer from a separate "include" file, then when you download the page from the online version, view source and save it as a .html page, all the code you need is already there as it's been processed by the host's server. However, you haven't said what the page php does, if it uses more complicated php coding to process to a database or perform other functions by communicating with a server from the actions of the viewer (say by entering information or clicking) then that won't work after converting to html.

You had #comments #url, #author, #email {.......} when I think it should be #comments, #url, #author, #email {.......} where the , is missing between the first and third, so the second would have been ignored; was that the problem? I haven't tested, just guessed.

If you want to process the PHP on your computer, download WampServer 2 which has PHP and Apache server to process it locally. http://www.wampserver.com/en/download.php Alternatively, if the page is online, open it in your browser where all the PHP will have already been processed by the host server, View Source and then save as a .html page instead of .php. You should then be able to use it as a normal html page because all the php code will have been processed to normal html by the hosting service server. Edit: having converted it to a html page, make sure any links to it are changed to .html and you will have lost the benefit of any PHP, like processing to a database. It really depends what the PHP is doing on the page. If only the text shows, not the layout, it sounds as if you haven't downloaded the css stylesheet (a .css file) which is a slightly different problem from the php.

First, in my PC with 1024*768 resolution, Firefox shaows the footer links without the horizontal scrollbar but the fifth link is on the line below. IE7 shows all five links in line but the fifth one is beyond the window, causing a scrollbar. Edit the div to right instead of margin-left:- #ftrnav { background:green;/*transparent none repeat scroll 0 0;*/ border:medium none; color:#FFFFFF; line-height:1.22em; /*margin-left:725px;*/right: 0; margin-top:-34px; padding:15px; position:absolute; } that nearly cures the problem, IE7's scrollbar is reduced. Then I noticed that the text Click Me is out on the right in IE7 and that should not be there and you have a closing tag which has no opening tag so edit with a tag to make it go below the image and make the image and the Click Me a link:- Change this:- width="165px" height="275px">Click Me to this:- ClickMe However, I suggest that you delete the Click Me and just have the image as a link. Do the same for the other one:- width="165px" height="275px"> Click Me I checked my version after making the above edits in this validator http://validator.w3.org/ and it showed 1 error and a warning, and ....rel="stylesheet" type="text/css" /> should be ....rel="stylesheet" type="text/css"> as /> is only for XHTML doctypes and you have used HTML (as we prefer on this forum). Your page isn't coded as I would code it, but it works and will validate if you cure the above items.

#headcontainer { z-index: 5; /*needed for right gray border of div*/ background:transparent url(headshadow.png) no-repeat scroll center top; height:358px; left:186px; padding-top:1px; position:relative; width:588px; }

two of us are trying to help, I hope we aren't confusing you. Your html page appears top have been saved as utf-8 and this causes a byte-order mark at the top left corner of a page. Save your html pages as encoding ANSI to avoid this. There are three boxes whern you save a file, the filename, the type (html) and encoding which most people don't check.

If you look at your page as it is now in IE7 the right gray border of #headcontainer doesn't show over the right image, but it does on the left side. Add z-index: 5; on #headcontainer like I said before.

The second page has a #header div height of 125px (120px plus bottom 5px margin as three sizes means top, each side, bottom). A page often breaks when you increase the size of a div and sometimes even if you reduce the size of a div.

http://capnhud.googlepages.com/sub_ver.png is not found, so probably not uploaded to the host server's root folder. Edit: Your drop down menu now works properly in Firefox by coming down on top of the lower images, but is still hidden in my IE7. Adding a z-index here solved it:- #nav ul, #nav ul ul li {z-index:100; margin:0; padding:0; position:relative; }

Our application is called Expression Web SuperPreview. It shows you how a web page looks in Firefox 3.5, Safari 3, Safari 4 (Windows and Mac) Internet Explorer 6, and whatever version of Internet Explorer is installed on your system. The keyword is LOOKS; but you can see how a page looks using Browsershots or netrenderer; but does it show how another browser WORKS ie drop down menus, etc.?

If it's only a nested embed tag and embed attributes that don't validate, don't be worried. Even very large professional sites like YouTube still use the embed tag because it works on old browsers which are not flash-ready and Firefox often seems to need the embed tag. Validation is just a tool, not a definitive requirement, if your page works and validates in all other respects, forget it. Eric's solution doesn't use the embed tag but there may be certain browsers which don't process his code (edit: until a person downloads the flash plugin, causing a delay to the viewing of the video), but his code works on my browsers. The embed tag means a viewer doesn't have to have a flash-ready computer and doesn't have a delay while downloading a plugin, so there's a choice to be made between validation and immediate viewing on some browsers.

You can make the center div overlap the right div by adding a z-index:- #headcontainer { z-index: 5; background:transparent url(images/headshadow.png) no-repeat scroll center top; width: 588px; height:358px; position:relative; left:182px; padding-top:1px; } This is just a quick fix which worked for me in IE7, but I expect that there is a better method.

Yes, as mentioned you could put the calendar and the scrolling div with the dates side by side, but that would mean changing the page design. You could also have an invisible dates div which only shows on hover as a popup or onclick with javascript, covering other content, but that also spoils the look of the page and it's useful to have the dates div showing all the time so that you don't have to click a calendar day. Keeping the page design as it is needs a solution no one has found yet.

I've tried a few things with your code, but it's got me beat too. The trouble is that anchors do normally go to the top of the viewport, unless there is a javascript way to force it a bit lower which I don't know. In your case its's complicated by the scrollbar in the div as you want that to show the anchored text at the top of its div, without affecting the whole page.

I haven't "moved over" to IE8, but I have got it on a new PC for testing. I'm still using my 2002 XP PC with IE7, Firefox and other browsers fro general use, but it's on it's last legs with registry problems. IE8 beta was incredibly bad, RC1 much better and the final version RTM is fine for browsing; it seems to interpret code like Firefox and in some ways differs from IE7, but in other ways like default margins and padding is like all the other IE versions, so it does need testing as sometimes it's like FX, sometimes like IE7 which may be confusing. However, IE8 does have problems with some complicated dynamic sites, just look at all the complaints in this Microsoft forum. The security measures are more strict and I had trouble accessing Hotmail until I sorted out some internet settings.

The only real answer is to design the page structure with really simple basic html codes and make the site look good with good images. Don't use any codes or hacks that cause a problem in IE versions generally. No pseudo this and pseudo that, no hovers on anything than the "a" tag, no .clearfix:after etc.

It may make no difference to the browser but there's definitely a difference in the way validators check a page. charset=iso-8859-1 allows ? and other unusual symbols but if you use the meta tag for utf-8 a validator will show and error for some of them and suggest that you use the full character code like £

I think they may be just an approximation of other browsers' code processing, like IE8's compatibility mode emulation of IE7; there's no substitute for the real thing. Most browser processing is encrypted, so how can other browsers copy it except by approximation?

Essentially you make all element widths a percentage so that all of them in a row plus padding and margins all have % widths and add up to 100%; except that borders cannot be % widths so you may have to make the total 99% or 98% to allow for borders in px. Images can be resized with % widths too; if you don't state a height then the image heights will be resized in proportion. It's not easy and you may find that your page looks very squashed up at 500px resolution or too spaced out at 1920px resolution, but modern browsers can be set with max-width and min-width which helps.

I did what Newseed said in his first post, and a bit more. To be honest, the code is a mess, too many divs and lots of position: absolute and lots of left positions which stop it from centering. I added a wrap div just after the ......... ............. and the closing div just before the tag:-............ and revised all the styles like this:- <br /><!--<br />body {<br /> background-color: #FDE442;<br />}<br />#apDiv1 {<br /> position:absolute; <br /> /*left:300px;*/<br /> top:-4px;<br /> width:800px;<br /> height:1257px;<br /> z-index:1;<br /> background-color: #FFFFFF;<br />}<br />#apDiv2 {<br /> position:absolute; <br /> /*left:279px;*/<br /> top:1px;<br /> width:800px;<br /> height:71px;<br /> z-index:2;<br />}<br />#apDiv3 {<br /> position:absolute;<br /> /*left:300px;*/<br /> top:73px;<br /> width:800px;<br /> height:179px;<br /> z-index:3;<br />}<br />#apDiv4 {<br /> position:absolute; <br /> /*left:300px;*/<br /> top:248px;<br /> width:800px;<br /> height:22px;<br /> z-index:4;<br /> background-color: #233C77;<br />}<br />#apDiv5 {<br /> position:absolute;<br /> left:201px;/*501px;*/<br /> top:402px;<br /> width:400px;<br /> height:732px;<br /> z-index:5;<br />}<br />#apDiv6 {<br /> position:absolute;<br /> left:234px;/*534px;*/<br /> top:1148px;<br /> width:335px;<br /> height:40px;<br /> z-index:6;<br />}<br />.style1 {<br /> font-family: Arial, Helvetica, sans-serif;<br /> font-size: 12pt;<br />}<br />.style2 {font-size: 10pt}<br />--><br /> <br /><!--<br />function MM_preloadImages() { //v3.0<br /> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br /> var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; <br /><br />i<a.length; i++)<br /> if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}<br />}<br /><br />function MM_findObj(n, d) { //v4.01<br /> var p,i,x; if(!d) d=document; <br /><br />if((p=n.indexOf("?"))>0&&parent.frames.length) {<br /> d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}<br /> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) <br /><br />x=d.forms[i][n];<br /> for(i=0;!x&&d.layers&&i<d.layers.length;i++) <br /><br />x=MM_findObj(n,d.layers[i].document);<br /> if(!x && d.getElementById) x=d.getElementById(n); return x;<br />}<br /><br />function MM_nbGroup(event, grpName) { //v6.0<br /> var i,img,nbArr,args=MM_nbGroup.arguments;<br /> if (event == "init" && args.length > 2) {<br /> if ((img = MM_findObj(args[2])) != null && !img.MM_init) {<br /> img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;<br /> if ((nbArr = document[grpName]) == null) nbArr = document[grpName] <br /><br />= new Array();<br /> nbArr[nbArr.length] = img;<br /> for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) <br /><br />{<br /> if (!img.MM_up) img.MM_up = img.src;<br /> img.src = img.MM_dn = args[i+1];<br /> nbArr[nbArr.length] = img;<br /> } }<br /> } else if (event == "over") {<br /> document.MM_nbOver = nbArr = new Array();<br /> for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {<br /> if (!img.MM_up) img.MM_up = img.src;<br /> img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? <br /><br />args[i+1] : img.MM_up);<br /> nbArr[nbArr.length] = img;<br /> }<br /> } else if (event == "out" ) {<br /> for (i=0; i < document.MM_nbOver.length; i++) {<br /> img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn <br /><br />: img.MM_up; }<br /> } else if (event == "down") {<br /> nbArr = document[grpName];<br /> if (nbArr)<br /> for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; <br /><br />img.MM_dn = 0; }<br /> document[grpName] = nbArr = new Array();<br /> for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {<br /> if (!img.MM_up) img.MM_up = img.src;<br /> img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;<br /> nbArr[nbArr.length] = img;<br /> } }<br />}<br />//--><br /> <br /><!--<br />#apDiv7 {<br /> position:absolute;<br /> left:169px;/*469px;*/<br /> top:301px;<br /> width:402px;<br /> height:72px;<br /> z-index:7;<br />}<br />#apDiv8 {<br /> position:absolute;<br /> left:548px;/*848px;*/<br /> top:402px;<br /> width:160px;<br /> height:600px;<br /> z-index:8;<br />}<br />#apDiv9 {<br /> position:absolute;<br /> left:548px;/*848px;*/<br /> top:402px;<br /> width:160px;<br /> height:600px;<br /> z-index:8;<br />}<br />#apDiv10 {<br /> position:absolute;<br /> left:145px;/*445px;*/<br /> top:1230px;<br /> width:468px;<br /> height:60px;<br /> z-index:8;<br />}<br />#apDiv11 {<br /> position:absolute;<br /> left:305px;/*605px;*/<br /> top:1205px;<br /> width:150px;<br /> height:22px;<br /> z-index:9;<br />}<br />#apDiv12 {<br /> position:absolute; <br /> /*left:300px;*/<br /> top:-2px;<br /> width:751px;<br /> height:64px;<br /> z-index:8;<br />}<br />#apDiv13 {<br /> position:absolute; <br /> /*left:300px;*/<br /> top:0px;<br /> width:801px;<br /> height:72px;<br /> z-index:9;<br />}<br />#wrap { width: 801px; margin: auto; position: relative; }<br />.style6 {font-size: 10px}<br />.style7 {font-family: Arial, Helvetica, sans-serif}<br />.style8 {<br /> font-size: 16px;<br /> font-weight: bold;<br /> font-family: Georgia, "Times New Roman", Times, serif;<br /> font-style: italic;<br />}<br />.style9 {font-size: 14px; color: #233C77; font-family: Arial, Helvetica, <br /><br />sans-serif;}<br />.style10 {font-size: 14px; color: #233C77; font-family: Georgia, "Times <br /><br />New Roman", Times, serif;}<br />#apDiv14 {<br /> position:absolute; /*left:300px;*/<br /> top:1266px;<br /> width:801px;<br /> height:14px;<br /> z-index:10;<br />}<br />.style11 {font-size: 12px}<br />--><br /> I deleted all left: 300px; and reduced all left sizes that were over 300px by 300px but you will probably still have to revise these edits, but it now centers in IE7 and Firefox.

I've been using Google a bit and have discovered that many mobile devices don't support javascript so PHP server-side detection is preferred, but is more complicated, and you then use the detection to feed a different stylesheet or a different page. If you have the Opera browser you can use View / Small screen which gives an indication of what your page will look like on a small screen as it makes it very narrow and reduces the size of images to fit. Paragraphs with text generally look alright but tables and lists get displaced into vertical blocks when they were side by side in a larger resolution. It's interesting to check this in Opera. Here are some useful links:- http://webdesign.about.com/od/pdas/a/aa070207.htm http://webdesign.about.com/od/pdas/a/aa060500a.htm Mobiles often have resolutions of only 150*150px.

This is a javascript solution I found for redirecting depending on screen resolution, but I haven't used it:- http://www.pageresource.com/jscript/jscreen.htm I believe that there is a way to detect mobile devices (instead of the screen resolution) but I'm not sure.