All geek questions in one place

One HTML anchor tag actually displays TWICE! Screenshot

I'm 10 lines in my second attempt at HTML and CSS, and it immediately does absolutely crazy things.

I have the following code (this is a whole 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 is the CSS (960Clear.css, the remaining 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 does not work. Internet Explorer was my initial problem, providing up to four logos in the upper corner, but now ignore Internet Explorer, because even Firefox does the dumbest thing.

I expose another solid snap element outside the div wrapper, and this oddness is even visible as another line of code in the F12diag tool window !

I took a screenshot to demonstrate:

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

HTML + CSS - , . ?

- .

, -, . , , , , .

( ASP.NET MVC ).

, - , . ; , ; -)

+3
3

A />, <a href="#">Link</a>

- Firefox/Firebug, HTML.

+6

, , , , . doctype strict ( , )

, , grid- . , CSS, . ( , , , , , ?)

. , , , h1 s. , , , :

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

URL-: ~/Home/ComingSoon file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png , , ( , URL-)

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

min-height min-width : , width height. min-height max-height , .

display: table-cell : , a div, 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;
}

URL-, - HTML . display: block - div .

, , . . , , ?

+5

Do not try to close yourself <a>. It should be <a href="blah">Text or &nbsp;</a>.

+2
source

Source: https://habr.com/ru/post/1760113/

More articles:


All Articles