ansaurus

Question

Single HTML Anchor Tag Actually Renders TWICE! Screenshot.

Answer 1

+3 A:

You can't close an A tag with /> you need to close it with <a href="#">Link</a>

The double rendering is Firefox/Firebug parsing invalid HTML.

Tom 2010-08-17 15:17:26

a) THANK YOU !!! b) XHTML is another wrong implementation of XML c) Why doesn't my IDE tell me! d) Why don't browsers deal with such a "stupidly obvious" mistake properly!??! e) I know it's not your fault f) THANK YOU - I don't know if I admire web developers or think you're all mad.

Luke Puplett 2010-08-17 15:30:44

ad d: That would be "read-my-mind mode", a.k.a. HTML. It's not the browser's job to read your mind (although it's stupidly obvious to you, it wasn't to me - and I'm not even a computer) - since you declared that the page is XHTML, it's your job to write the page so that it's valid XHTML. You are right that your IDE ought to warn you - if it doesn't, try the W3C markup validator: http://validator.w3.org/ (it's integrated quite well in FF's Web Developer Toolbar). Also, to quote the Cheshire Cat: "We're all mad here" ;)

Piskvor 2010-08-17 15:50:11

`<a />` is perfectly fine in XHTML. Browsers don't treat documents served as text/html as HTML though (because they aren't, by definition). You have to use the correct content type (application/xhtml+xml). Of course Internet Explorer doesn't support XHTML so users of that browser get download prompts instead. And that's why I write HTML instead.

David Dorward 2010-08-17 16:08:03

Thanks for the moral support - interestingly (worryingly), the document validates as good XHTML 1.0 Strict on the W3C site.

Luke Puplett 2010-08-17 16:10:05

Okay, David's comment explains the validation, but I'm confused. Everyone has spotted the mistake and it works in FF and IE8 now, but the HTML is valid so are the browsers at fault?

Luke Puplett 2010-08-17 16:14:57

@Luke - No the browsers aren't at fault, and neither are the validators. It's just that they have different priorities, browsers to render something no matter what rubbish they are sent, validators to point out what the rubbish is. As a result, validators have traditionally worked from the DTD, and browsers from the mime type. The problem comes when the DTD and the mime type don't match up, most commonly when XHTML DTD-valid web pages are sent with a text/html mime type. HTML5 will resolve this by doing away with DTDs and having a validator that works from the mime type like the browsers do.

Alohci 2010-08-17 18:22:30

@Alohci - thank you, that's very clear.

Luke Puplett 2010-08-18 10:14:25

Answer 2

+2 A:

Try not making the <a> self-closing. It should be <a href="blah">Text or  </a>.

Robusto 2010-08-17 15:18:57

Answer 3

+2 A:

First of all, if you're know you're going to write bad code at least let the browser know in advance. Use a more forgiving doctype than strict (technically this doesn't really do much, but every bit helps I think)

Next, unlike most other languages, grid frameworks and aids like that are actually better for intermediate and advanced users. Those new to CSS are more likely to be confused by them. (This is subjective, I know, but it is a sentiment expressed by many, and we are giving out advice here, aren't we?)

Now for the site logo. Its a matter of personal preference I suppose, but its usual to see logos being marked up as h1s. There are multiple ways of achieving what you want here, I'll just give the one I habitually use:

HTML:

<h1>
  <a href="#">Site Name</a>
</h1>

CSS:

h1 {
  float: left;
  overflow: hidden;
}

h1 a {
  display: block;
  background: url('path/to/logo.png') no-repeat;
  width: 100px;
  height: 100px;
  text-indent: -9999px;
}

You're URLs are incorrect: ~/Home/ComingSoon and file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png might work locally, but you need to use relative paths if you are going to place this onto a server (assuming you are not going to use server-side scripts to generate those URLs)

#topBarLogoLink {
    height: 50px;
    width: 172px;
    min-height: 50px;
    min-width: 172px;
    display: table-cell;
}

The min-height and min-width declarations are useless: They are only useful if you do not declare a fixed width and height. min-height and max-height properties, and their width counterparts, are used for fluid layouts, where the designer give the browser a certain degree of flexibility to accommodate for different screen sizes and other uncontrollable factors.

The display: table-cell declaration is also slightly suspicious: if you want the inline a element to expand out to the size of its parent div you can just use display: block

#topBarLogoDiv {
    background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
    background-color: #F7F7F7;
    background-repeat: no-repeat;
    margin-left: 20px;
    height: 50px;
    width: 172px;
    display: block;
    overflow: hidden;
}

Other than the url issue, the background color should also not be redeclared - HTML elements have transparent background color by default. Declaring display: block here is also unnecessary - divs are block level elements.

Oh, and I'm really really sorry if you feel offended by that comment. I really am. Consider this me making up for that, okay?

Yi Jiang 2010-08-17 15:58:20

Yi, I accept you're apology and I think you're showing maturity. A lot of the extraneous CSS is due to my fiddling with things to fix the issue.I have been a subscriber to .NET magasine (netmag.co.uk) for many years, I never touched HTML but I was preparing.One thing I learned was that seemingly random CSS settings fix IE rendering issues, display: table-cell comes up a fair bit.I previously had no div around the anchor, I added one and then copied the CSS over, including the block setting.I wanted my code to show to exact state that led to the perceived 'bug'.Thanks, Luke

Luke Puplett 2010-08-17 16:32:19

ansaurus

tags:

views:

answers:

Single HTML Anchor Tag Actually Renders TWICE! Screenshot.

related questions