Rhianika C wrote: > Sorry about that, the server must have been down when you looked. > That is the right link and all of it is up. I'll ask for the server > to be left on. I thought it usually was. Sorry. > > ~Rhia > > On 2/20/06, *francky* <[EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]>> wrote: > > Hi Rhia, > FF nor IE could find this pages > <http://www.crestonradio.ca/index.html>at this moment. Is it the > right link / > all pages uploaded / or just crestonradio not in the air while server > turned off or down? > > greetings, > francky > > Hi Rhia, Yesterday and today the site is in the air indeed. Nice disign! Because of provider-problems I could not upload the things below to my site, but now it's possible again, and here is my reply: growing before I knew. :-)
First some general remarks to your Crestonradio <http://www.crestonradio.ca/> page: - Validate the html every now and then with the html-validator <http://validator.w3.org/>, then you are sure some (small) html-errors don't disturb the rest. - In your homepage the validator found 6 errors: these <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.crestonradio.ca%2Findex.html>. - The "<meta> charset" error is that the charset has to be a part of the content attribute: <meta http-equiv="content-type" content="text/htm; charset=utf-8" /> - The OMITTAG NO's are that a / has to be before the >, when a tag has no end-tag of itself. - The <p class="p-header"> is in a span, but p's cannot be inside a span (because of the block-character of a p). Change the <span>...</span> in <div>...</div> and no more problem. - The css-validator <http://jigsaw.w3.org/css-validator/> has a remark on the ".center-box/first" class, because a slash / is not allowed in a class-name. - All pages have the same title. You can use the title for some more specific description of the pages: "About the Creston Community Radio Society", "Creston Radio membership", ... > so also search engines have more chance to pick out different pages. Now the IE-particularities you started with in this topic. - The left column in IE has a margin-left of 20px; I can't figure out why. Solution can be to make a "conditional comment" for IE only, in which the margin-left for IE is adapted. In order to work properly, this comment has to be placed inthe html just for the ending </head> tag . - The shifting of the content to the right can be solved by omitting the { position: absolute; }. Because of the float-left the content is sticking to the left column, and can get a margin-left of 8px to make some distance. - The gaps in the rounded boxes is something strange: IE is thinking that a container with only an image in it (like the #navtop) does have a height that is following the font-size. And a normal font-size for a small box is giving a white space under it. So with "font-size: 2px" the img-container is as high as indicated. To connect with the lines under it, use a margin-bottom of 0px for the img-box and/or a margin-top:0px for the following one. In the top of the right column the header doesn't display o.k. in IE, but is also wrong in FF and other browsers. The orange header-img has not enough height to get the text in, and doesn't strech when the visitor is using a bigger font-size. - Can be solved by using a "combined image" (this one <http://home.tiscali.nl/developerscorner/css-discuss/images/creston-orangebox.gif>): the top part is used on top for the rounded outer corners, then a plain box is following for the text (with the same orange bg-color), then the second (middle) part of the image is used with only the inner rounded corners. At last for the bottom of the column, the third (20px high) bottom part of the same img can be used. This can be arranged with { background-position: 0 -7px; } for the middle part, then the top corner part is shifted out of the viewport. For the bottom part: shift -20px. The top.gif and the bottom.gif you can also combine in 1 image, and differentiate with the bg-position in the same way. The bluetop.gif and the blue.bottom.gif can be combined also, as the greentop.gif and the greenbottom.gif. They can even be combined all together with the orangebox.gif (all boxes have the fixed width of 160px), then you have only 1 image for all boxes instead of 8. But why combine? The advantage is that there are not 8 requests needed to download the images from the server, but only one. - Plus: combining is avoiding 7 times the "filling empty bits" to complete the tcp/ip-packet which is coming down from the server. All together it means the page is speeded up in downloading. For dsl-users there will be a small difference, I guess, but for telephone modem vistors there are more waiting seconds saved! Speeding up the page can be done also by compressing the header-jpg. Now it is 48kB, and lossless compressed (while saving in PSP) with 25% (over here <http://home.tiscali.nl/developerscorner/css-discuss/images/creston-banner.jpg>) gives only 33kB. So far the theory! ;-) The truth (or not) you can see in this testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-crestonradio.htm> for IE and for font enlarging proof corners in the right column (with the new header-img). Greetings, happy ann., and good luck in the air, francky ps: If you want some more theory about positioning of background-images: see for example the article "The Port-hole theory <http://home.tiscali.nl/developerscorner/port-hole/porthole.htm>". If you want some more theory about making liquid corners (which can strech also horizontally): see for example the article "Liquid Round Corners <http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm>". btw: It's a very beautifull valley you live in (real Heidi landscape <http://www.heidihof.ch/> like in Switzerland); whish I was there. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
