Yes, using the attribute ‘class’ sounds just right. So it’s that the difference!
I gave a slightly more attentive look to the css errors and I must say it seems to me most of them again belong to what it may be auto generated code.
I could spot some of the man made mistakes on html but I’m practically blind on css. I’d need hours of research just to understand what it is saying in only one issue.
I’m afraid I’ll wait until its obsolescences will be brought up by browsers and code development.
I agree, I almost cried when it happened I dreamed it since I first, let’s say, finished it!
I would like you to read what a reply I got from an another forum user. It should be funny.
Well for starters you have a flash based header, something that to be brutally frank has no business on a website EVER! Flash is for video content and/or games, NOT static parts of your design; hence why here I get a big “missing plugin” box.
It’s a fixed width layout – you expect that to fit onto a mobile device HOW exactly? Fixed width design is an inaccessible mess that has no business on a modern website. To design for mobile - or just in a general accessible fashion your layout should be:
Semi-fluid – Automatically expanding and shrinking to fit the available space, with a maximum width set so really long lines of text aren’t hard to read.
Elastic – Fonts declared in %/em with all major area sizes declared in EM. This way the entire layout auto-adjusts to the default text size of the device or any changes the user has made to them at the browser or OS level. (depending on browser and OS).
Responsive – change the layout based on the available screen space using media queries. This involves things like changing images from floated to centered block, stripping off columns on small displays, adding columns on larger displays, stripping out presentational images that don’t fit the display size and so forth.
You don’t have that, OF COURSE it doesn’t work on mobile… or on a netbook, or on my tablet… and it ends up this tiny little useless box on my 27" 2560x1440 display.
The laugh being you have elastic/dynamic fonts on your menu, which is why it’s blowing out of it’s container on both sides. There’s a reason you don’t build menus like that.
It’s also a REALLY bad idea to create a crappy little internal scrollbar and to force everything into a fixed-height container like that. It’s inaccessible trash and just leaves people on smaller displays AND really big displays going “wow, this site SUCKS!”
Under the hood you’ve got a laundry list of how not to code a website – from tables for layout, to jQuery for nothing, DIV for nothing, STRONG around elements that shouldn’t be receiving “more emphasis”, gibberish use of numbered heading tags, H2 around things that are quite obviously NOT the start of subsections of the page and as such aren’t headings, attributes like ALIGN, BORDER and BGCOLOR that have no business on any website written after 1997, paragraphs around non-paragraph elements, TITLE attributes that look like they should be HREF…
I mean seriously, what makes these:
<h2 align="center">- <a href="mailto: email@example.com">firstname.lastname@example.org</a> (Frutta dell'Etna, Biancavilla)</h2>
<h2 align="center">- <a href="mailto: email@example.com">firstname.lastname@example.org</a> (Formaggio di capra amatoriale)</h2>
Starts of subsections of that PAGE. (not the site, but the PAGE you are declaring them on) – they don’t even have their own content, so they are quite obviously NOT headings.
<h2 align="center" class="black"><strong>ATTUALMENTE DISPONIBILE</strong></h2>
If a H1 is the heading under which all parts of the page are subsections, and a H2 is the start of a subsection of H1’s… how can you even have a H1 after a h2. That’s just gibberish; though I suspect given all the other presentational markup you aren’t even TRYING to use tags for what they mean, and instead are using them based on what they look like; which is the wrong reason to even choose a tag in the first place!
You don’t have anything remotely resembling semantic markup, you have so much presentation in the markup you can’t possibly even practice media targets much less semi-fluid elastic design – to be frank it reeks of 1990’s coding and makes me start to wonder, just which WYSIWYG did you use to make this as no sane coder would write markup like this.
Though even the first line proudly proclaims much of the problem – the tranny doctype, which effectively means “in transition from 1997 to 1998 coding practices”… good for a laugh when there’s HTML 5 mixed in there, but that seems to be from that garbage “jet-form” nonsense.
Which is how you ended up with 20k of HTML for 1.5k of plaintext, quite possibly twice as much HTML as should have been used on such a simple layout. It’s a laundry-list of how not to build a page, and I’d highly suggest pitching it all in the trash and starting over with a recommendation doctype (HTML 4.01 STRICT or XHTML 1.0 STRICT), semantic markup, separation of presentation from content – doing yourself a huge favor and backing away from the flashtardery and scripttardery that are just making the page harder to use and aren’t really doing anything useful for you.
Apologies if that seems harsh, but the truth often is. The site wasn’t designed with mobile or accessibility in mind, so naturally it doesn’t work. It wasn’t even built using HTML and CSS properly.
He’s absolutely right though and I myself have been wondering if there’s a way to solve the flash incompatibility like a sort of ‘alt’ attribute to substitute it with an image.
I would ask how you expect your page to behave on smaller devices? “Responsive” is the behavior du jour. Fixed width sites are becoming less popular. How do you want yours to behave? My assumption there is that because of the extensive use of fixed graphics, this will be a fixed width page
I believe it should run quite nicely on mobiles if rotating the screen horizontally nevertheless I’d really like to make it responsive. Would you help me if I decided to undertake it?