471,582 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,582 software developers and data experts.

Underline one character too long

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

Expand|Select|Wrap|Line Numbers
  1. div.links1 li{
  2. text-decoration:underline;
  3. display:inline;
  4. margin:10px;
  5. padding:6px;
  6. background:#cccccc;
  7. color:blue
  8. }
  9.  
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
Oct 12 '07 #1
5 4082
numberwhun
3,503 Expert Mod 2GB
I've made up my code as below but the underline is one character longer than the word underlined.

div.links1 li{
text-decoration:underline;
display:inline;
margin:10px;
padding:6px;
background:#cccccc;
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
Oct 12 '07 #2
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..
Expand|Select|Wrap|Line Numbers
  1. body, html{
  2. margin:0; 
  3. padding:0; 
  4. background:#a7a09a;
  5. color:#000;
  6. }
  7.  
  8. body{
  9. min-width:100%
  10. }
  11.  
  12. div.wrap{
  13. background:#cccccc; 
  14. margin:0 auto;
  15. width:100%
  16. }
  17.  
  18. div.header{
  19. background:#ddd;
  20. margin:0;
  21. padding:5px;
  22. }
  23.  
  24. div.links1{
  25. padding:5px;
  26. }
  27.  
  28. div.links1 ul{
  29. margin:0; 
  30. padding:0;
  31. font-size:14pt; 
  32. list-style:none
  33. }
  34.  
  35. div.links1 li{
  36. text-decoration:underline;
  37. display:inline;
  38. margin:10px;
  39. padding:6px;
  40. background:#cccccc;
  41. color:blue
  42. }
  43.  
  44. div.links2{
  45. padding:5px;
  46. text-decoration:underline;
  47. width:100%;
  48. background:#99ff99
  49. }
  50.  
  51. div.links2 ul{
  52. margin:0; 
  53. padding:0; 
  54. list-style:none
  55. }
  56.  
  57. div.links2 li{
  58. margin-right:-4px;
  59. margin-left:-4px;
  60. display:inline;
  61. padding-top:6px;
  62. padding-bottom:6px;
  63. padding-left:8px;
  64. padding-right:20px;
  65. background:#99ff99;
  66. color:blue
  67. }
  68.  
  69. .accomodation{
  70. background:#99ff99;
  71. margin-bottom:8px;
  72. margin-left:0;
  73. margin-right:0;
  74. padding-left:5px;
  75. padding-right:5px;
  76. padding-bottom:12px;
  77. padding-top:4px;
  78. color:black;
  79. text-decoration:none
  80. }
  81.  
  82.  
  83. div.main{
  84. float:left;
  85. width:75%;
  86. background-color:#9c9;
  87. padding-left:5px  
  88. }
  89.  
  90. div.ads{
  91. background-color:#c9c; 
  92. float:right; 
  93. width:20%;
  94. padding:0 10px
  95. }
  96.  
  97. div.ads h5, ads p{
  98. padding:0 10px
  99. }
  100.  
  101. h5{
  102. text-align:center;
  103. padding:0 10px
  104. }
  105.  
  106. a:link{color:#0000ff}
  107.  
  108. a:active{color:#0000ff}
  109.  
  110. a:visited{color:#0000ff}
  111.  
  112. a:hover{color:#ff0000}
  113.  


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.css"></link>

</head>
<body>

<div class="wrap">

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


<div class="links1">


<ul>

<li><span class="accomodation">accomodation</span></li>
<li><a href="bkkplacestogo.html">places to go</a></li>
<li><a href="bkkwhatson.html">what's on</a></li>
<li><a href="bkktravel.html">travel</a></li>
<li><a href="bkkmapsandguides.html">maps and guides</a></li>
<li><a href="bkkpeoplelikeyou.html">people like you</a></li>
</ul>
</div>


<div class="links2">
<ul>
<li><a href="#bkkhotels">hotels</a></li>
<li><a href="#bkkbandb">B and B</a></li>
<li><a href="#bkkapartments">apartments</a></li>
<li><a href="#bkkhostels">hostels</a></li>
<li><a href="#bkkhomestay">homestay</a></li>
<li><a href="#bkkcamping">camping</a></li>
<li><a href="#bkkcaravans">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="bkkapartments"></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
Oct 13 '07 #3
drhowarddrfine
7,435 Expert 4TB
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.
Oct 13 '07 #4
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
Oct 15 '07 #5
drhowarddrfine
7,435 Expert 4TB
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 "application/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]
Oct 15 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

29 posts views Thread by jmaxsherkimer | last post: by
5 posts views Thread by Brent McIntyre | last post: by
2 posts views Thread by John A Grandy | last post: by
3 posts views Thread by shapper | last post: by
6 posts views Thread by dfoster | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by
1 post views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.