Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
Line 160, Column 51: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
Try enclosing the input tag in a p tag or div tag
Edit:
I tried it and it didn't seem to disrupt the layout and the error disappeared.
-
This is wrong:-
style="margin: 0px; 10px; 10px; 20px;"
No spaces except at the end
style="margin: 0px 10px 10px 20px;"
-
If you have an opening p tag on line 74 and a closing tag on line 148, the p tags in the middle need to go or be isolated like this:-
Leav the line 74 and 148 tags.
-
Ah!! So that opening tag is on it's own, but you can't have p tags inside p tags so you need to sort that out.
-
I don't think you do have a p tag open. The error is in line 148
but the top of the form has
where there is no opening p tag after
-
As you have it right now the text-align: center in the style for #contacttable centers the text inside it, but not the div itself. Previously I thought you wanted the table centered but the text left.
However, as I said before, the div #contacttable doesn't need centering as the table inside it is 510px wide and the containing div#main is also 510px wide, so it all fits. If it didn't fit, an element like a div needs a width and margin: auto. You have margin: auto; in #contacttable but it's not doing anything as it's not needed.
Inside the 510px wide table you have td tags of various widths like 160px, 165px and 175px so it looks OK and you can adjust these if you want.
Regarding doctypes, on this board we prefer HTML 4.01 Strict (or transitional if you are using some deprecated [old ] tags) which means that some tags only need closing with > whereas in XHTML they need closing with />
-
I haven't followed all the previous posts closely but I found several other things wrong. In Firefox the headings like Alaska Pictures and Software Pages were on the right of the menu but the p tag text relating to them was all below the headings and menu, while in IE7 the text followed the headings as they should.
I found lots of other errors which I noted in the files and the html now validates.
The way you have coded the menu on the left is that it floats inside the text generally, so I have left that the same although Eric's solution has a margin-left for all the headings and text so that they don't expand around the menu.
See
http://www.wickham43.com/forumposts/bkelly090426.html
http://www.wickham43.com/forumposts/bkelly090426.css
Here's an alternative more or less like Eric's:-
-
What if i wanted to only align the table centered, but the text to the left? Would i use a class tag in the td's to align it left?
#contacttable is the container for the whole table so as Jlhaslip says, it affects everything. If you just want the table centered but not the text you don't use text-align: center, you should use a width and margin: auto (see note below) . At the moment you have margin: auto but no width (but you don't need a width or margin: auto if the div fits exactly inside another div which it does because #main is 510px wide and the table inside #contacttable is 510px wide):-
#contacttable {
/*text-align: center;*/
line-height: 18px;
font-family: trebuchet ms;
/*margin: auto;*/
}
Now all the inner divs and td tags are aligned left.
If you want the #contacttable div to center inside a container add margin: auto; width; ?px; to the div style; if you want the table to center inside #contacttable add style="margin: auto" to the table
because it already has a width, but none of the above is needed in your case because the #main div is the correct width for all of them.
-
Another reason for having a page open in a new window is when the page designer knows that the viewer will need to refer to the original window while filling in data in the new window.
Microsoft use a new window when you login to reply to a post on this forum:-
where the original page is crammed with information and you may have opened a post with ten replies and you need to read or copy information from them when making your reply.
The new window opens smaller than the original page so that you can drag it around and see the bits of the original page while typing.
-
I think it depends on your membership status. Bearing in mind what LSW said, you should be upgraded.
-
First add a background-color to #bannercontainer:-
#bannercontainer { background-color: skyblue;
text-align: left;
width: 851px;
height: 300px;
}
This shows you that the white div with blah blah is tight up under the #bannercontainer in IE7 and Firefox.
It also shows that Firefox has placed the logo.jpg right up at the top of #bannercontainer which has raised the banner.gif below so that there appears to be a bigger space above the white div. This is because Firefox has not applied the top margin of 20px to the h3 tag, so I changed it from margin to padding and it works in Firefox so IE7 is unchanged and Firefox shows to 20px top space above logo.jpg:-
#bannercontainer h3 {
height: 61px;
width: 169px;
text-align: left;
margin: 0 0 0 20px;/*20px 0px 0px 20px;*/
padding: 20px 0 0 0;/*0px 0px 0px 0px;*/
z-index: 1;
}
I don't know why Firefox doesn't apply the margin to the top.
I used the files as they were in your first post within the last few minutes (in case you've changed them); I didn't apply Virtual's or newseed's suggestions.
-
The problem today is worse than it was a few years ago when there were only resolutions between about 500px and 1024px.
Now small hand-held devices and mobile phones have resolutions of 500px or less while computers go up to 1920px wide and probably more.
I think it's probably best to use min-width and max-width between say 770px to suit old desktops and about 1100px for modern computers.
IE6 doesn't operate max and min widths so use a conditional comment to fix tye page width at say 770px as people with IE6 have probably got old computers with 800*600px resolution.
Then use a different stylesheet for hand-held devices which needs Javascript to sniff out the resolution, and use different widths for all elements, but that is complicated and I don't know anyone who does it, so all my pages need scrolling if viewed on small resolution devices.
If you code a completely fluid page it will get squashed up in small resolutions and look too spaced out in very large resolutions.
-
While viewing my site in IE8, even though the screen was large, it did not fit and I had to use the scroll bar, but viewing in Firefox on my MacBook it all fit within the much smaller screen. Why is that?
It's the difference between resolution (in pixels) and size (in inches or cms).
Your IE8 may have had a very large screen in inches but perhaps was set at say 1024*768px while the MacBook may have had a smaller screen in inches but was set at 1280*1024px so the IE8 needed a scrollbar for a page about 1100px while it fitted within the MacBook's 1280px width.
-
Bearing in mind what LSW said, if you make your background-image very faint so that it's just a ghostly image it will not affect the ability to read text over it and it will be a smaller file size because of the lack of deep colors.
See http://www.wickham43.net/backgroundfullwidthflexible.html
Or make the background-image nearly black and have a white color for text (not so easy to read but it works).
-
In my print preview from IE7 it's showing the 15% off image down to a short line under the bar codes.
-
I forgot to put the link in my first post, which was meant to be
http://www.wickham43.net/framesets.php
which does the same thing as Eric's code; it has several links and loads up just one iframe, so only the first iframe page loads with the parent page, the others load when you click a link.
If I were able to place the source of the iframe to be a html page with only the img src tag on that html page, then when the original page loads with those 60 iframes all of them pointing to individual html pages, would the content (one image per html page) of those html pages still load up at the time of the page that contains all those iframes?
If you have 60 iframes, the parent page will have to load all the pages with images that go into the iframes. However, you can leave each iframe without an initial page in it, so that it would just show an empty iframe until you click each link when the image would load into the targetted iframe (you can load an image on its own or an image inside a html page into an iframe). Is that what you want, 60 empty iframes when the parent page loads?
Edit: I've just tried that using this code on my page:-
where the src="photo1.html" has been deleted in the iframe, and the iframe is just empty white space until you click one of the targetted links.
-
It's the sort of thing javascript should be able to do but beyond my capabilites. Try again on the javascript board.
-
So when the user clicks on the 2nd link, I want the first image to close and the second image to open in it's place.
If you just have one iframe, then each time a link is clicked it will load the new page into the iframe and, of course, get rid of the page that was there before. I'm not sure why you want so many iframes if only one has an image.
This example http://www.wickham43.net/framesets.php near the bottom titled An inline iframe using target="..." shows three links which could be vertical and each opens a page in the same iframe, The inserted page could be a html page with the image or just the image and it wouldn't download the new page or image until the link was clicked.
-
For the centering in Firefox add margin: auto; to the head section style:-
.signupframe { margin: auto;
border: 1px dotted #000000;
background: #ffffff;
color: #00baff;
font-family: trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 13px;
}
To get rid of the bullets you need list-style-type: none; not list-style: none;
I edited it to list-style-type: none here:-
#sidebar ul.sidemenu {
list-style-type: none;/*was list-style: none;*/
text-align: left;
margin: 7px 10px 8px 10px;
padding: 0;
text-decoration: none;
border-top: 1px solid #d6d6d6;
}
and here:-
#sidebar ul.sidemenu li {
list-style-type: none;/*was list-style: none;*/
padding: 4px 0 4px 0px;
margin: 0 2px;
color: #777;
border-bottom: 1px solid #d6d6d6 ;
}
as it can be added to the ul or li tag but it didn't work! So I added a simple:-
li { list-style-type : none; }
to the stylesheet which did work. This will apply to all lists on your page, but I don't think that matters. You also have list-style: none for the main menu at the top in #nav1 ul , but luckily when there is a float: left the bullets are automatically deleted or disappear as they are covered up by the adjoining box.
Edit: I've just realised that the list above the form starting "1. Fill out form" is not inside a div #sidebar so that is why my edits didn't work. Add a style
.sidemenu li { list-style-type : none; }
instead of my earlier
li { list-style-type : none; }
and it will only apply to lists with a class of sidemenu
-
Have you tested it yet?
If you mean the emulate IE7 meta tag, yes I have and it does work. However, it's not 100% perfect according to reports as it is just "an emulation" within IE8.
I needed it when IE8 beta 2 was being tested, but now that IE8 RTM is the final version and much better, I've removed the meta tag from my pages.
-
Browsershots http://browsershots.org/ and netrenderer are useful to see how a page looks in different browsers, but you can't check how they work, like drop down menus.
To get different versions of IE on one computer you can download a "virtual machine" from Microsoft which sets up a virtual operating system to which you download IE8, or use Tredosoft http://tredosoft.com/Multiple_IE which installs a different IE version, but it may be complicated to do.
The other alternative is to buy a new PC! My XP PC with IE7 is seven years old and causing problems so I've bought a new PC and put IE8 on it. However, IE8 still has bugs so I wouldn't get rid of IE7 and rely on IE8 just yet.
As LSW said you can put this
just after the
tag of every page which makes a viewer using IE8 process the page as IE7 which could save problems if you are not confident that your page works well in IE8. (I believe that it only works to emulate IE7, I don't think you can emulate IE6 and you can only use it from IE8, not in IE7 to see IE8.) -
As Newseed says, use span tags to make sure it works in all browsers.
.firstletter { font-size: 30px; color: skyblue; margin-left: 40px; }
Since the 1500s.............................
You could just make a style for span
span { font-size: 30px; color: skyblue; margin-left: 30px; }
but that might be a problem if you wanted span for another style somewhere else, so I used a class.
You might also have to add line-height: ?px if the line height is too small for the large letter.
-
Have a look at examples here (three column layouts fixed/fluid):-
http://www.visibilityinherit.com/tools.php
and here:- http://www.visibilityinherit.com/code/height-stickyfooter-centered-example.php
and two methods items 1a and 1b here:-
-
My original code was not designed for fixed header and footer, and you have added height: 100% in too many places.
This code is only a partial solution as I haven't had much time.
http://www.wickham43.supanet.com/forumposts/htwingnut090417.html
You may need to look at items 17a or 19 here to drag down side column backgrounds:-
http://www.wickham43.net/firefoxbackground.php
and this is an example for fixed header and footer, it involves hacks but does work on all browsers that I have tried:-
paragraph won't allow formatting
in CSS
Posted
.........and this
here