PDA

View Full Version : Website Help Please!!!!!!!!!!!



ChrisCwmbran
October 3rd, 2014, 02:12 AM
Hi all,

I'm in the middle of rewriting the MicroMuseum website in an attempt to make it use less bandwidth and perform better.

This is one of the pages:

http://dev.micromuseum.co.uk/displayproduct.php?product=3

If you view it in Firefox or Chrome you will see at the bottom there are a set of five adverts.

If you open it in IE11 the five adverts don't show up at all even though they use the same method as the "Product Photo" and the fact the HTML is there, and other than the image name is the same.

Help please!

Thanks in advance!

Ole Juul
October 3rd, 2014, 02:25 AM
That's really odd. I looked at the source, and you're right, it shouldn't make any difference. I don't have any way of tying IE, but just looking with Firefox, the ads show up if I turn off Adblock. What's weird is that if I turn Adblock back on, the images disappear again. They're still in the code, but they're not displayed. So, the only thing I can imagine at the moment is that the H3 "Adverts" is the trigger. Perhaps try using a different word as a test.

ChrisCwmbran
October 3rd, 2014, 02:43 AM
Thanks Ole Juul! You are my hero of the day!

It was indeed Adblocker Plus getting in the way! Well that's 6 hours wasted lol!

Thank you so much!

Now, do I change the path and headings to make sure this doesn't happen even if it is on?

Ole Juul
October 3rd, 2014, 02:50 AM
Now, do I change the path and headings to make sure this doesn't happen even if it is on?

I'm actually very curious about that. How does Adblock know in this case? It's almost 4 in the morning here so I'll let you do the testing though. ;)

Krille
October 3rd, 2014, 03:24 AM
I'm in the middle of rewriting the MicroMuseum website in an attempt to make it use less bandwidth and perform better.

You might want to run all your PNG-files through Ken Silverman's PNGOUT (http://advsys.net/ken/utils.htm). I ran logo.png through it and it went from 81200 bytes to 1573 bytes. And this is with no loss of quality since the PNG-format (unlike JPG) uses lossless compression.

Tor
October 3rd, 2014, 03:33 AM
I see another problem: In the text there's this sequence (in the raw HTML): "two machines at 399."

The pound sign shows up at garbage in my Firefox browser unless I go into View->Character Encoding and change it from Unicode to Western or some other 8859-1 encoding.
Maybe there should be a character encoding specified with the Content-Type header, or maybe some HTML-definition should be used instead of the plain '' - there's probably one, but I'm only familiar with &gt; &lt; for > and <, and a few others.

ChrisCwmbran
October 3rd, 2014, 11:38 AM
That's really odd. I looked at the source, and you're right, it shouldn't make any difference. I don't have any way of tying IE, but just looking with Firefox, the ads show up if I turn off Adblock. What's weird is that if I turn Adblock back on, the images disappear again. They're still in the code, but they're not displayed. So, the only thing I can imagine at the moment is that the H3 "Adverts" is the trigger. Perhaps try using a different word as a test.

I'm doing some testing. I will update you once I know a little more :)

ChrisCwmbran
October 3rd, 2014, 11:39 AM
I see another problem: In the text there's this sequence (in the raw HTML): "two machines at 399."

The pound sign shows up at garbage in my Firefox browser unless I go into View->Character Encoding and change it from Unicode to Western or some other 8859-1 encoding.
Maybe there should be a character encoding specified with the Content-Type header, or maybe some HTML-definition should be used instead of the plain '' - there's probably one, but I'm only familiar with > < for > and <, and a few others.

Thanks for your support Tor. I'm aware of this problem and it's one of the things I am gradually fixing. For your info it is &pound;

ChrisCwmbran
October 3rd, 2014, 11:39 AM
You might want to run all your PNG-files through Ken Silverman's PNGOUT (http://advsys.net/ken/utils.htm). I ran logo.png through it and it went from 81200 bytes to 1573 bytes. And this is with no loss of quality since the PNG-format (unlike JPG) uses lossless compression.

Thanks for the advice :) Added it to the list of things to do!

deathshadow
October 3rd, 2014, 04:14 PM
1) If you care about IE, lose the pointless code-bloat HTML 5 crap and even crappier "polyfill" bs. Really HTML 5 offers no legitimate benefits to normal websites and just encourages sloppy non-semantic 1990's style coding.

2) Lose the jQuery bull, it's a fat bloated idiotic library that has no damned business on ANY website.

3) If you have to use that X-UA garbage (which IS part of what's screwing you up) you probably have done something wrong in your HTML or CSS.

4) The goofy google webfont embed (thought you were trying to make it faster) is also invalid markup.

5) I see you're resorting to single quotes in the output, meaning you're wasting processing time server side with the stupid double quotes. Either that or you have a really crappy copy/paste from Google. (I swear, what the **** is happening to them lately?!?)

6) You have complete gibberish values in the REL attributes on those images. (the ones not showing)

... and that's just the tip of the iceberg; the semantics are gibberish too with "more emphasis" being applied to what looks like it should either be a TABLE or DL, H3 without H2, clearfix like it's still 2001, IE CC's for no good reason around HTML (I REALLY want to punch Paul Irish in the face for that one! I swear between him, Eric Meyer and Kevin Yank, we need to thin out their numbers a bit), comment placements (YES, I SAID COMMENTS, those things browsers are supposed to ignore) that could be tripping rendering bugs in some versions of both IE and FF, no media targets for your stylesheet LINK...

Oh, and side note -- nesting menus that deep is navigation hell, and no throwing more JS at it wouldn't be the answer either. I'd REALLY suggest breaking the subsections (2nd level dropdowns) out into a fixed sidebar on the sub-pages, just from a usability standpoint. In fact, because they are such usability GARBAGE I've stopped using dropdown menus altogether on sites, you might want to consider doing same.

If I were writing the same page, retaining the dropdowns, the markup would go something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<meta
http-equiv="Content-Language"
content="en"
/>

<meta
name="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/>

<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>

<link
rel="shortcut icon"
href="images/favicon.ico"
/>

<title>
Micromuseum - Display Product
</title>

</head><body>

<div id="top">

<h1>Micro Museum</h1>

<div id="mainMenu">

<a href="#mainMenu" class="showMenuMobile"></a>
<a href="#" class="hideMenuMobile"></a>

<ul>
<li><a href="index.php">Home</a></li>
<li class="current">
<a href="inthe80sand90s.php">In the 80s and 90s</a>
<ul>
<li>
<a href="mycollectioninthe80sand90s.php">My collection in the 80s and 90s</a>
</li><li>
<a href='manufacturers.php'>Manufacturers</a>
<ul>
<li>
<a href='manufacturerlist.php'>In General</a>
</li><li>
<a href='manufacturerlist.php?category=1'>Filtered by Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">The Collection</a>
<ul>
<li><a href="#">Everything</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
<li>
<a href="blogs.php">Blogs</a>
<ul>
<li><a href="restorationblog.php">Restoration Blog</a></li>
<li><a href="acquisitionblog.php">Acquisition Blog</a></li>
<li><a href="pon02s2600s.php">PON02s 2600s</a></li>
</ul>
</li><li>
<a href="#">Odds 'n' Ends</a>
<ul>
<li><a href="sitenews.php">Site News</a></li>
<li><a href="inthepress.php">In the Press</a></li>
<li><a href="connections.php">Connections</a></li>
<li><a href="downloads.php">Downloads</a></li>
</ul>
</li>
</ul>

<!-- #mainMenu --></div>

<!-- #top.widthWrapper --></div>

<div class="mainSectionStart"><div class="widthWrapper">
<h2>
Acorn BBC Model B
</h2>
<!-- .widthWrapper, .mainSectionStart --></div></div>

<div id="content" class="widthWrapper">

<img
src="data/product/0003/photos/0001.jpg"
alt="Acorn BBC Model B"
class="plate"
/>

<h3>Product History</h3>
<p>
Launched in 1981 to coincide with a computer literacy drive by the BBC, the Model B was the more expensive of Acorn's two machines at &pound;399. The machine's high cost was compensated for by very impressive expansion possibilities including disc drives, a second processor and network capabilities (Econet).
</p>

<h3>Specifications</h3>
<dl>

<dd>Produced:</dd>
<dt>Between 1981 and 1994.</dt>

<dd>CPU:</dd>
<dt> MOS Technology 6502 running at 2 Mhz.</dt>

<dd>Co-Processor:</dd>
<dt> Not fitted.</dt>

<dd>ROM:</dd>
<dt> 32 Kb expandable to 128 Kb.</dt>

<dd>RAM:</dd>
<dt> 32 Kb.</dt>

<dd>Display:</dd>
<dt> No internal display.</dt>

<dd>Keyboard:</dd>
<dt> 74 key full action.</dt>

<dd>Integrated Storage:</dd>
<dt> None.</dt>

<dd>Sound:</dd>
<dt>Four independent sound channels (one noise and three melodic) using the Texas Instruments SN76489 sound chip.</dt>

<dd>Text modes (characters):</dd>
<dt>20 x 32, 40 x 25, 40 x 32, 80 x 25, 80 x 32.</dt>

<dd>Graphics modes:</dd>
<dt>160 x 256 (4 colours), 160 x 256 (8 colours), 320 x 200 (2 colours), 320 x 256 (2 colours), 320 x 256 (4 colours), 480 x 500 (8 colours), 640 x 200 (2 colours), 640 x 256 (2 colours).</dt>
</dl>

<h3>Product Photos</h3>
<div class="gallery boxMe">
<a href="data/product/0003/photos/0001.jpg">
<img src="data/product/0003/photos/0001-thumb.jpg" alt="image" />
</a>
</div>

<h3>Adverts</h3>
<div class="gallery boxMe">
<a href="data/product/0003/adverts/0001.jpg">
<img src="data/product/0003/adverts/0001-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0002.jpg">
<img src="data/product/0003/adverts/0002-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0003.jpg">
<img src="data/product/0003/adverts/0003-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0004.jpg">
<img src="data/product/0003/adverts/0004-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0005.jpg">
<img src="data/product/0003/adverts/0005-thumb.jpg" alt="image" />
</a>
</div>

<!-- #content.widthWrapper --></div>

<hr />

<div id="footer"><div class="widthWrapper">
&copy; 2014 Chris Long.
<!-- .widthWrapper, #footer --></div></div>

<!--
IF I had a lightbox implementation it would go here, and it sure as
Shine-ola would't rely on that bloated slow jQuery bull
-->

</body></html>

Providing more than enough semantics and using DIV for what they are for -- hooks for presentation without saying what that presentation IS or changing the meaning of the tags inside them... using numbered headings in a sensible and logical order, etc, etc... EVERYTHING else would be in a single monolithic stylesheet so it would be CACHED.

... I'm probably done for the night, but tomorrow I can put together the CSS that would make that work, and possibly even give you a section by section breakdown of the how/what/why of the HTML and CSS.

It's what I do on most web development forums -- I usually help one person a day with a rewrite and teaching them since I can't just sit here with my thumb up my ass and my brain going to rot, no matter what the doctors are telling me about "working".

deathshadow
October 4th, 2014, 04:49 AM
.... and here's that rewrite to show you what I'm talking about:

http://www.cutcodedown.com/for_others/ChrisCwmbran/template.html

As with all my examples the directory:

http://www.cutcodedown.com/for_others/ChrisCwmbran/

is wide open for easy access to the gooey bits and pieces. Should work perfect in all modern browsers and IE10/newer (pay close attention to how I worded that) and pretty well in IE8 and 9... I make no guarantees about IE7/earlier as I used the adjacent sibling selector on the menu for expediency sake -- but again I'd axe having dropdowns entirely that way you aren't making life miserable for people on touch interfaces.

Semi-fluid, elastic and responsive layout...

I also went in and re-optimized your heading image for both appearance (got rid of some ugly jaggies) and size resulting in a nice compromise between the two, and threw my old "boxSir" code at it. (which I'm probably going to rewrite soon since it's aging somewhat -- some newer mobiles choke on it).

Net result? 125k in 8 files instead of the 436k in 15 files you had.

Hope this helps. Oh, and don't worry about it stealing any of your SEO mojo, it's behind a disallow robots.txt.

-- edit -- I also just went in and made you a better favicon. Oh, and sneaky trick -- if you colour correct "print" images to pure black and pure white for the paper/print areas (allowing the greys in-between to stay) and convert them to 16 greyscale they make far, FAR smaller PNG than you'd expect.

-- EDIT EDIT -- DUH, once on my server those images aren't showing up in IE or FF here (worked fine in local testing)... and I know why! I completely ignored the first two posts! *DUMBASS*