Why are browsers so picky?

Hi everyone,

I’m incontering a few setbacks with my website (www.ilcontadinobio.it)
Try to open it on pc (it should be fine) and on smartphone…exactly, chaos!
The behaviour is pretty much the same on mobile browsers such as Chrome, Mozilla, Opera and Dolphin.

-the flash header is within table and centered.

-same story for the azure rectangle with fading sides that I put in backgroung.

body {
  background: url(../images/sfondo.png)  no-repeat top center;
}

-Less convincing is the green menù which I don’t know whether there is any setting that might change its position but since it work on standard browsers, leave me clueless.

@charset "utf-8";
/* CSS Document */
 
#sse2
{
    /*You can decorate the menu's container, such as adding background images through this block*/
   background:#fff url(../images/verde.gif) no-repeat center; 
    height: 20px;
    padding: 10px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
#sses2
{
    margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses2 ul 
{
    position: absolute;
    list-style-type: none;
    float: center;
    padding: 0;
    margin: 0;
    width: 1074px;
    top: 225px;
    height: 43px;
}
#sses2 li
{
    float: left;
    list-style-type: none;
    padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses2 li.highlight
{
    background:#693500 url(../images/mb2_2.gif) no-repeat center bottom;
    top:3px;
    height:17px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    z-index: 1;
    position: absolute;
    overflow:hidden;
}
#sses2 li a
{
    width: 2000;
    height:30px;
    padding-top: 3px;
    margin: 0 30px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
    color: #f6f165;
    font: strong 12px arial;
    text-align: center;
    text-decoration: none;
    float: center;
    display: block;
    position: relative;
    z-index: 2;
}

It doesn’t seem so difficult to solve but I lack the css knowledge and experience to pick the right tag and tamper with it.

First two how it goes on mobile third how in normal pc browsers

Help please!
Thanks

You need this meta tag.


That will go by device width and allow better scaling. Put this in and we will go from there. Edit-SPF keeps glitching! Put in the meta tag code 3 times already. Ugh. Let’s try again. Ok so it appears it won’t let me post code? Google “meta viewport width” and you should be able to find it. I can type stuff here but I can’t post the meta tag. SPF really glitchy!

It make sense! Ok, let’s try…
I’ll let you know what happens.
Thanks :smiley:

Same. Even worst!

With the meta viewport tag the menù assumes the same visualization pattern as on dw, which places it in the wrong way too.

Like I said, there have to be something in the css that might solve it.

I’m miserable >.<

Hi, dRyW.

You seem sure that the problem is within CSS. My money says that some of it might be, but most of it is in the HTML. Let me explain why I think this way.

When given a page to troubleshoot, one of the first things I do is test the HTML in the HTML Validator. The page that you have given us shows 94 errors. The probability is that some of them are critical. Whether or not any of them are part of the subject of your post, that’s a bunch of HTML errors :slight_smile: .

All three of your outer containers respond differently to the width of the browser. It would be mucho better to put them into one common outer container and set that container to the width or max-width desired. The inner containers will need some work, but nothing unexpected.

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.

dRyW,

OK, you win. :lol: The problem with the menu is indeed in the CSS. However, the HTML needs some serous cleaning up.

FIRST:
(1) DO take advantage of the HTML Validator. You will find a few missing/mismatched tags that should not exist. Those should be considered critical/very important. http://validator.w3.org/
(2) An XHTML doctype is very fussy. Do your best to comply with it’s requirements. The properties used by some of your add-ons/plug-ins will not validate, you can ignore them. But do not ignore the important errors such as missing or mismatched tags. You have a few.
(3) Most of your tables contain the property align=“center”. This property has been replaced by CSS {margin-left:auto;margin-right:auto;}. Several other common properties have also been replaced by CSS equivalents and one not-so-equivalent. These will be flagged by the HTML validator. So, be alert for outdated/deprecated properties.
(4) Your CSS has several errors. For example, there is no such property as {float:center}. One biggie is that there should be absolutely NO HTML on a CSS document. csss.css has actual HTML tags on it. :eek: Those must be removed because the following code becomes unreadable. So DO take advantage of the CSS Validator, too: http://jigsaw.w3.org/css-validator/
(5) You probably know this, but for the sake of completeness, please be aware that image names should not contain spaces. Just like the full URL or local path, spaces in path or file names can cause errors. You have a few images with multiple word names that need to be fixed. Using hyphens is an OK way to bridge the words.

NEXT:
Add a div just after the <body> open body tag called <div id=“outer”>
Add the closing div just before the </body> tag.

FINALLY:
Add or change your stylesheet to include the following styles:
(NOTE that we are moving the backbround image from <body> to #outer)


body {
    padding:0;
    margin:0;
}
#outer {
    display:table;
    background:url(http://www.ilcontadinobio.it/images/sfondo.png) no-repeat top;  /* 1095 x 219 */
    padding:8px 0;
    margin:0 auto;
}
#outer > table {
    padding:0 2px;
}
#sses2 {
    position:relative;
}

NAG:
If you have not already spent the hour/s needed to go throught your HTML with the validator and clean it up as much as possible, especially to balance the opening and closing tags, I guess there’s nothing more to say.

Tested in FF, Chrome and Opera.

Let me know if this does not work.

That’s amazing! I didn’t know the existence of it.

I’m already on it. I suspect though not all the errors might be solved. Like those found in auto-generated code (3/4 of them all, line 261) or for istance the width and height on the swf embed that’re actually doing their job (vw3 says to place some css in substitution) and few others.

About the tables alignment . Should I write something like:

#blabla { margin-left:auto;margin-right:auto;}

and add the attribute id=“blabla” within the tag <table> ?

As for the css, vw3 found way to many errors. I’ll try to do some sorting, but something tells me better leave things as they are. I’ve got the feeling that most of them would make things go creazy if meddled with. I mean vw3 is right, those things are wrong by today xhtml standards, of course something have to be excised but what about all those tags that need to be correct? You need to know (and I don’t) what to replace them with to make the whole shebang doing what it does.
I’m just an amateur, I’ve copied and pasted most of the code :slight_smile:

Edit:

IT WORKS! I’m speachless…it’s beautiful!!

There was no way I could ever figure it out by myself :smiley:

Thank you soo much

Yes you would do exactly that. Glad you got it working :).

Yes, as I mentioned above, some of the errors cannot be changed to suit the validator. With experience, you will learn which ones those are. But do not let a large number of errors, many of which you know will not be correctable, lull you into complacency… don’t let important errors slip by.

I must add one important note about IDs versus classes. Since a user recently asked me why I prefer classes to IDs, I would like to ask you to read the 3 or so posts in which I answered his query: http://www.sitepoint.com/forums/showthread.php?1225303-My-two-button-classes-are-clashing-and-I-don-t-know-how-to-fix-it&p=5695071&viewfull=1#post5695071
From this you should gather that the selector, “blablabla”, should be a class, not an ID, so it can be used more than once on the page.

Here, I would add that it is important to write good CSS. If the CSS validator reveals a lot of errors, then methodically fix them one at a time and test after each repair. There’s no other way to assure good, valid, cross-browser compatible, long-lasting code :slight_smile:
You shouldn’t consider that page finished until the CSS is clean. The HTML may be less than ideal, but the CSS should be much better. Properties with vendor prefixes will fail, that’s understood, but missing brackets, properties with values that don’t exist, etc, are NOT good. :lol: I would encourage you to use the validators They are very useful tools.

I would like to correct some erroneous terminology in my previous post. I referred to HTML attributes as “properties” in a couple of paragraphs. They should be referred to as “attributes”. The term “properties” refers to CSS styles. The CSS properties may be replacements for the HTML tag attributes, or they may apply new styles altogether. Lexically, the words are different and I should not have mixed them, even if I was short of caffeine :stuck_out_tongue:

You’re very welcome :slight_smile:

I can still remember the first time I associated a CSS class with an HTML tag and watched the magic work! I was elated! Great feeling, isn’t it? There’s more enjoyment ahead :slight_smile:

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 :slight_smile: 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:

  1. 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.

  2. 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).

  3. 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: anticofruttetodelmirio@virgilio.it">anticofruttetodelmirio@virgilio.it</a> (Frutta dell'Etna, Biancavilla)</h2>
        <h2 align="center">- <a href="mailto: salvogiammello@tiscali.it">salvogiammello@tiscali.it</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>
          <h1 align="center">Frutta</h1></td>

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 :smiley: 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?

Sorry to be slow getting back with you.

Even though there are some obvious flaws in the behavior of the page and a laundry list of problems beneath the hood, the theme is quite attractive. I can understand that you would like to see it turned into a responsive site. But the theme was designed long ago. I would not go so far as to say that making it responsive can’t be done or shouldn’t be tried, but I will say that you might find the work and compromises required of the graphics alone to be daunting.

The menu would have to be replaced with something else. As it is, it is only one font size away from wrapping (although that can be improved). The animation that comes with it does not wrap. Not a very good choice even if the site has a fixed width.

The lower part of the page will expand to the right as soon as the font size exceeds a browsers default (just like the menu). So again, even as a fixed width site, it has that fundamental problem of not being fluid. In brief, the layout of the page needs to be reconsidered even as a fixed width site.

The design and construct of this theme requires a fixed height bottom section. That won’t fly in today’s world regardless of whether the page has a fixed width or fluid, and indeed I don’t remember when it would have ever been appropriate. The lower part of the page should not trigger an internal vertical scrollbar. It just shouldn’t be done.

The post that you quoted is funny only because I would swear that I recognize the author . Incredibly thorough and perhaps a tad harsh. From his analysys, though, you can see that there is a lot more to writing a web page today than there was 15 years ago.

If you are determined to keep this “look”, or as close to it as you can, then I would encourage you to start by figuring out how to make the images “fluid”, ie. adapt to the content. There are a few methods of doing this. Don’t overlook the top image… it has to be adaptable, too.

Will I help if you decide to stay with this theme? Yes, of course, inasmuch as I can. But do think it through and plan as thoroughly as you can before you commit to that course of action.

Cheers

On the contrary I really appreciate your dedication.

As I said to the ‘sergeant Hartman’ fellow: that was as far as I could go, given my knowledge.

I might’ve just used a template and probably cut it way shorter and tidier, but like you said, that magic… I couldn’t resist. I just let my imagination run wild.

Unfortunately, I’ve not the time to make a so drastic change now. Not to mention I’ve still no idea on what layout adopting.
Thing I can do right now is to salvage what may be salvaged.


The img’s referring to the Android’s browser.
Yes, it wraps (but not on all). Maybe I could decrease the padding between words? I cannot think of else. What property may I use to prevent it?

Sorry, I’m not sure to have exactly understood this part.
What do you mean by lover part?
Fixed height bottom section. Where the social sharing links are?

My idea, regarding the fixed box with scroll bar and everything crammed in, mainly was to have always the menu on sight. There would have been a loss of space of course, given the box, but I counted on it being nice with the transparency and all.
It took me quite a bit, back then, to make the two side outer columns in the home match in width. Probably a waste of time and an greatly unorthodox way to do it, but again I couldn’t turn back anymore…

I just wanted to do things distinctive.

Give me some time to play with your theme and I’ll post something for you to critique. It will not be an answer to your wildest dreams, it will probably be more instructive than progressive, but at least it will be “something”. Small chunks. Let me repeat again that the existing menu will have to achieve responsive behavior, so please be considering what you will accept and not accept in the menu.

In answer to your question about reducing the space between the menu items:

The menu applies margins to separate the words. Change the following style as indicated to give the menu items a little more “breathing room”.
menu-2.css

#sses2 li a {
    margin: 0 24px;  /* changed from margin: 0 30px */

Then reload the page.

If you use Firefox and zoom text-only larger or smaller, you must reload the page for the JS to update the width of the div#sses2.

To be frank it was I that set the margin to 30px. I thougth the words needed the room :smile: and also because that way there would have been space left on the right. Is there any way to get the entire ul centered on the backgroung image instead than on the left?

Would this method be suitable? I don’t have a live website so I don’t know how you currently have it setup. I would provide more exact code but I’m always on my work station computer :frowning:

They make it easy. I tried to make some change on mozilla developing suit but without great achivements. Isn’t the code I shared in my first post useful?

Very useful although my work station computer runs ChromeOS which only runs google applications. On the weekends I come home and have access to my desktop. I try and help where possible - if this is still up by tonight I’ll look at it but I won’t be done driving home until probably 7:30pm eastern. Sorry to waste your time :).

The code in your first post is just fine.

These are the test changes that I made to your page while evaluating the horizontal menu. After the page has been reloaded with the page reload/refresh button, the menu is centered on the page.

body {
    color:#f6f165;
    padding:0;
    margin:0;
}
.outer {
    display:table;
    background:url(http://www.ilcontadinobio.it/images/sfondo.png) no-repeat top;  /* 1095x219 */
    margin:0 auto;
    padding-top:8px;
}
table {
    margin-left:auto;
    margin-right:auto;
}
.outer > table {
    padding:0 2px;
}
#sses2 {
    position:relative;
}
#sses2 li a {
    color: #f6f165;
    display: block;
    height: 30px;
    margin: 0 24px;
    padding-top: 3px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 2;
    overflow:hidden;
}

Sorry for the late reply.

I should be the one saying that :smile:

@ronpat

The code I first posted was the menu-2.css style sheet (the menu’s).
I will place the one you wrote in csss.css (the home style sheet).
Regarding “#sses2` li a” rule, There’s one in menu-2.css as well, which one overwrites the other? Curiosity…I think I’ll replace that in menu-2.css with your doing.

May I use the ‘table’ selector written that way as class?

If both “#sses2” rules have the same specificity then the one that comes later in hte source code will take effect. So the 2nd one would take precedence.

http://www.codefundamentals.com/blog/css-specificity.php

An article I wrote…Should teach you what you needto know.