Underline one character too long

**numberwhun** · Oct 12 '07, 12:31 PM

Originally posted by jimchapuk

I've made up my code as below but the underline is one character longer than the word underlined.

div.links1 li{
text-decoration:unde rline;
display:inline;
margin:10px;
padding:6px;
background:#ccc ccc;
color:blue
}

Also, when I hover, having used the following code,
a:hover{color:# ff0000}
the last bit of the underline does not change colour.

I would be pulling my hair out if I wasn't bald.

Regards

Jim Walsh

Can you please post your HTML code as well so we can see what is going on there as well?

Regards,

Jeff

**jimchapuk** · Oct 13 '07, 05:05 AM

Originally posted by numberwhun

Can you please post your HTML code as well so we can see what is going on there as well?

Regards,

Jeff

Hi Jeff

First you can have the CSS. This is followed by the HTML..
[code=css]
body, html{
margin:0;
padding:0;
background:#a7a 09a;
color:#000;
}

body{
min-width:100%
}

div.wrap{
background:#ccc ccc;
margin:0 auto;
width:100%
}

div.header{
background:#ddd ;
margin:0;
padding:5px;
}

div.links1{
padding:5px;
}

div.links1 ul{
margin:0;
padding:0;
font-size:14pt;
list-style:none
}

div.links1 li{
text-decoration:unde rline;
display:inline;
margin:10px;
padding:6px;
background:#ccc ccc;
color:blue
}

div.links2{
padding:5px;
text-decoration:unde rline;
width:100%;
background:#99f f99
}

div.links2 ul{
margin:0;
padding:0;
list-style:none
}

div.links2 li{
margin-right:-4px;
margin-left:-4px;
display:inline;
padding-top:6px;
padding-bottom:6px;
padding-left:8px;
padding-right:20px;
background:#99f f99;
color:blue
}

.accomodation{
background:#99f f99;
margin-bottom:8px;
margin-left:0;
margin-right:0;
padding-left:5px;
padding-right:5px;
padding-bottom:12px;
padding-top:4px;
color:black;
text-decoration:none
}

div.main{
float:left;
width:75%;
background-color:#9c9;
padding-left:5px
}

div.ads{
background-color:#c9c;
float:right;
width:20%;
padding:0 10px
}

div.ads h5, ads p{
padding:0 10px
}

h5{
text-align:center;
padding:0 10px
}

a:link{color:#0 000ff}

a:active{color: #0000ff}

a:visited{color :#0000ff}

a:hover{color:# ff0000}
[/code]

AND NOW THE HTML

[html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Visit Bangkok</title>
<link rel="stylesheet " type="text/css" href="bkkcss.cs s"></link>

</head>
<body>

<div class="wrap">

<div class="header">
<h1>Visit Bangkok</h1>
</div>

<div class="links1">

<ul>

<li><span class="accomoda tion">accomodat ion</span></li>
<li><a href="bkkplaces togo.html">plac es to go</a></li>
<li><a href="bkkwhatso n.html">what's on</a></li>
<li><a href="bkktravel .html">travel</a></li>
<li><a href="bkkmapsan dguides.html">m aps and guides</a></li>
<li><a href="bkkpeople likeyou.html">p eople like you</a></li>
</ul>
</div>

<div class="links2">
<ul>
<li><a href="#bkkhotel s">hotels</a></li>
<li><a href="#bkkbandb ">B and B</a></li>
<li><a href="#bkkapart ments">apartmen ts</a></li>
<li><a href="#bkkhoste ls">hostels</a></li>
<li><a href="#bkkhomes tay">homestay</a></li>
<li><a href="#bkkcampi ng">camping</a></li>
<li><a href="#bkkcarav ans">caravans</a></li>
</ul>
</div>

<div class="main">

<h2><a id="bkkhotels"> </a>Hotels</h2>
<h2><a id="bkkbandb"> </a>Bed and Breakfast</h2>
<h2><a id="bkkapartmen ts"></a>Apartments</h2>
<h2><a id="bkkhostels" ></a>Hostels</h2>
<h2><a id="bkkhomestay "></a>Homestay</h2>
<h2><a id="bkkcamping" ></a>Camping</h2>
<h2><a id="bkkcaravans "></a>Caravans</h2>

</div>

<div class="ads">

<h5>Sponsored Advertisements</h5>

</div>

</div>
</body>
</html>
[/html]
Regards

JIm Walsh

**drhowarddrfine** · Oct 13 '07, 02:23 PM

I don't see either problem.

You need to be aware of two other problems with your markup. First, the xml declaration, the first line, only works in modern browsers but IE chokes on it and goes into quirks mode. It is safe to remove that first line.

Second, you are serving your page as HTML yet declare XHTML version 1.1. This xhtml version is to be served as XML only. Either change to ver.1.0 or, better yet, use HTML since that is what you are serving.

**jimchapuk** · Oct 15 '07, 01:13 PM

Originally posted by drhowarddrfine

I don't see either problem.

You need to be aware of two other problems with your markup. First, the xml declaration, the first line, only works in modern browsers but IE chokes on it and goes into quirks mode. It is safe to remove that first line.

Second, you are serving your page as HTML yet declare XHTML version 1.1. This xhtml version is to be served as XML only. Either change to ver.1.0 or, better yet, use HTML since that is what you are serving.

Thanks for the response but I'm not that experienced at HTML yet so I have to ask you to simplify the reply a tad please.

I can delete the first line, no problem. I can't remember why I put it there in the first place but maybe it sorted out another problem.

The second point you make is outside my scope of understanding. I thought that it was advisable to use XHTML due to it being the way forward i.e.the latest protocol for writing HTML.

Also, I can change to version 1.0 of XHTML no problem but if I were to change back what version would I need for it?

Regards

Jim Walsh

**drhowarddrfine** · Oct 15 '07, 01:28 PM

Originally posted by jimchapuk

I can delete the first line, no problem. I can't remember why I put it there in the first place but maybe it sorted out another problem.

The first line is correct and appropriate to use but Internet Explorer doesn't do xhtml, so it chokes on that line. Internet Explorer always looks at the first few letters of the first line and, if it's not a doctype, then it assumes its broken 'quirks mode'. See the article about doctypes under Articles above, or google for 'quirks mode'.

I thought that it was advisable to use XHTML due to it being the way forward i.e.the latest protocol for writing HTML.

XHTML is not HTML. XHTML is XML reformulated to work with HTML tags/elements, which is why XHTML needs the 'xml declaration' you were using above. However, as I stated above, IE doesn't understand xhtml, and Microsoft has said IE8 won't even use it, so there is no point in using it.

In addition, many people think that just adding the xhtml doctype automatically makes a browser switch to that mode. But browsers always follow what the server says the page is in the http header sent by the server first. In that header will be the line "Content-type: text/html" and that's that.

XHTML would be served as "applicatio n/xml+xhtml".

So, because browsers are told the page is html, but the page contains some xhtml elements/tags (called "tag soup"), it just treats the xhtml as broken markup. So far, this doesn't hurt anything but there are articles on the 'net stating "xhtml served as html considered harmful".

Also, I can change to version 1.0 of XHTML no problem but if I were to change back what version would I need for it?

[HTML]<!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" xml:lang="en" lang="en">[/HTML] Always use 'strict'. Modern web pages have no need for 'loose'/sloppy.[/QUOTE]

Underline one character too long

Underline one character too long

Comment

Comment

Comment

Comment

Comment