Home/ Questions/Q 6161775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T21:32:08+00:00

In the code below: <html> <head> <style type=text/css> ul { list-style-type:none; margin:0; padding:0; }

  • 0

In the code below:

<html>
<head>
    <style type="text/css">
    ul
    {
     list-style-type:none;
     margin:0;
     padding:0;
    }
    a
    {
     display:block;
     width:60px;
     background-color:#dddddd;
    }
 </style>
 </head>

 <body>
      <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
      </ul>
 </body>
 </html>

Here, even if i donot display anchor as a block then still on changing it’s width, it is changing in actual. However, i have read that:

The W3C’s CSS2 spec states that for Inline, non-replaced elements, “the ‘width’ property does not apply”.

Can anybody please explain this to me, why is it so?Thnks…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried this in Firefox, IE, Chrome and Opera, and none of them applies the width if you don’t make the anchor elements into block elements.

    I did however try using jsfiddle, where the pages have a doctype. Your page doesn’t have a doctype, so it’s rendered in quirks mode, which may trigger unusual behaviour in some browsers.

    • 0