Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML+CSS: 'a' width doesn't work

Tags:

html

css

doctype

I have the following code:

CSS part:

<style type="text/css">     .menu     {         width:200px;     }      .menu ul     {         list-style-image:none;         list-style-type:none;     }      .menu li     {         margin:2px;     }      .menu A     {         height:25px;         width:170px;         background:url(./images/button-51.png);         padding:2px 5px ;     }      .menu A:link     {         height:25px;         width:170px;         background:url(./images/button-51.png);         padding:2px 5px ;     } </style> 

HTML part:

Everything work fine, but when I add 'DOCTYPE' element in the beginning of the HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

the width of 'a' element is not taken into account.

Question 1: Why?

Question 2: How to fix that?

Thanks a lot!

like image 322
Budda Avatar asked Jan 16 '11 17:01

Budda


People also ask

How do I fix the width in CSS?

To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.

Why height and width is not working in CSS?

While the display property is inline , height and width will not work. display :inline; By changing the display property from inline to block or inline-block , height and width should be worked properly.

Can we give width more than 100% in CSS?

Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.

How does width work in CSS?

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.


2 Answers

Question 1: Why?

Because it's by default not a block element.

Question 2: How to fix that?

Make it a block element using display: block;, or an inline block by display: inline-block;.

like image 123
BalusC Avatar answered Sep 21 '22 19:09

BalusC


make block for anchor tag add display:block in style

.menu a {     display:block;     height:25px;     width:170px;     background:url(./images/button-51.png);     padding:2px 5px ; } 

NOTE: dont repet all elements in .menu a:link class.. just add changes or new styles. NOTE: always use lowercase in html and css code

like image 42
Abudayah Avatar answered Sep 19 '22 19:09

Abudayah