baffled for this... why it is working?

[mikosiko]

Hello,

 

NOTE: I'm not asking for help to modify the code below, only looking for feedback regarding why it is working

 

I'm working over other's people code and I found this lines:

                       <div class="button-container" style="top:20px; left:0px">
                            <input type="submit" name="submit" value="Get Report"
                              <a href="#" class="large-button" style="left: 0px" >
                                 <div class="button-glare"> </div>
                              </a>
                        </div>

Clearly the input tag is wrong (W3C validator confirm it), however works fine and does what is supposed to do (apply some css styles over the submit button).

IE11 Developer tools detect the errors, but FF nor Chrome does.

 

this is what it looks like

(attached image)

 

and this is the related CSS

/* CSS Document */
  /* Button Containers  */

.button-container {
    float: left;
    overflow: visible;
    position: relative;
}

.button-container .large-button {
    background: linear-gradient( to top, green, lightgray);
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 14px;
    padding: 10px 20px 8px;
    text-shadow: -1px -1px 1.5px rgba(0, 0, 0, 0.5);
    position: relative;
}
.button-container .button-glare {
    border-radius: 4px;
    height: 50%;
    left: 1px;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: -1;
}

any idea why it does work?

 

thanks

Miko

 

 

[Ch0cu3r]

 

this is what it looks like

(attached image)

forget to attach image?

 

But yes that HTML is invalid, there is no need for for the anchor tag at all. Just apply the large-button class to the input instead and you'll get the same result. Also what should the button-glare class be doing? Currently it not doing anything other than position and resize an empty div other the top of the container div.

[mikosiko]

@Ch0cu3r:  Thanks for the feedback

 

- I did attach the image... seems that I did it wrongly

- the button-glare class is just adding a subtle effect over the button... just some fancy stuff ... nothing that matter.

- I know that it is invalid, and I know how to write it differently... I was looking for oppinions that allows me to understand WHY it is working even when it is invalid.

Edited May 16, 2014 by mikosiko

[bsmither]

I have seen several versions of several browsers be able to detect and internally fix non-serious syntactical errors:

<tag attr1="val1"attr2="val2" /> where there is a missing space

<tag><nest1></nest1><nest2></tag> where there are open tags

 

When I ask FF to show me the source code, the display will put in bold red things like the above.

 

So, perhaps some browsers would recognize the start of another tag and internally finish the input tag.

 

Or, ignore the less-than-a sequence, treat the href attribute as inconsequential (to be identified by a javascript selector, perhaps), and also ignore the close anchor tag (But that would show in FF's source code view.)

Edited May 16, 2014 by bsmither

[kicken]

Because so many people have written bad HTML over the years, browsers have come to be able to recognize and fix many errors automatically. How a browser would interpret the above would depend probably on how it handles such errors.

 

Chrome appears to just merge the a tag into the input tag as attributes, as in:

<div class="button-container" style="top:20px; left:0px">
  <input type="submit" name="submit" value="Get Report" <a="" href="#" class="large-button" style="left: 0px">
  <div class="button-glare"> </div>
</div>

If you look in the chrome tools at the elements tree you can see the input element and how the a tag is simply absorbed as extra attributes. Firefox appears to handle it similarly.

 

You can see in the above though, your CSS still applies because the class structures is still valid (.large-button is within .button-container, .button-glare still exists as a div tag). If you had prefixed your classes with tag names (ie, a.large-button) then it would fail because the large-button class is now on the input tag, not the a tag.