3

I'm 10 lines in to my second attempt at HTML and CSS and it is immediately doing completely barmy things.

I have the following code (this the entire page):

<!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">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Some page title</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="47926.css" />
        <link rel="stylesheet" type="text/css" href="960Clear.css" />
    </head>

    <body>
        <div id="rootDiv">
            <div class="container_16" id="topBarDiv">
                <div id="topBarLogoDiv">
                    <a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
                </div>
            </div>
        </div>
    </body>
</html>

And here's the CSS (960Clear.css, the others are 960 grids and YUI reset):

#rootDiv {
    height: 70px;
    background-color: #F7F7F7;
}

#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;
}

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

This simple, simple page doesn't work. Internet Explorer was my initial problem, rendering up to four logos in the top corner, but let's ignore Internet Explorer for now because even Firefox is doing the nuttiest thing.

I render another, whole anchor element outside of the wrapper div and this oddness is even visible as another line of code in the F12 diag tools window!

I took a screen shot to demonstrate:

http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1

For me, HTML+CSS work is a punishment served in Hell, but this takes the biscuit. What on Earth is going on here?

Note

My fault - I should've added this disclaimer before.

The code above seems to have tickled some people. Please remember that it's in an experimental state as I try to work out why I am getting multiple logos and general oddness.

I haven't got as far as correcting local links (which will be completely different in production and generated via ASP.NET MVC methods anyway).

Imagine that someone is having problems plumbing a house and you go to investigate. The house may not be finished yet; please ignore the missing carpet ;-)

0

3 Answers 3

6

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.

6
  • 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. Aug 17, 2010 at 15:30
  • 2
    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: 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" ;) Aug 17, 2010 at 15:50
  • <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.
    – Quentin
    Aug 17, 2010 at 16:08
  • Thanks for the moral support - interestingly (worryingly), the document validates as good XHTML 1.0 Strict on the W3C site. Aug 17, 2010 at 16:10
  • 3
    @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
    Aug 17, 2010 at 18:22
5

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?

1
  • 2
    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 Aug 17, 2010 at 16:32
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.