CSS Width differences (ie5/6 and FF)

[gwrman]

Following XHTML & CSS. The problem is that the header in FF must be reduced in width by 2px (243 instead of 245) in order to make compensation for the 1px border on each side. In IE though (5, 6) there seems to be no need to do this. How can I compensate for the unevenness?

.sidebar-item
{
padding: 0;
margin: 0 0 20px 0;
width: 245px;
}

.sidebar-item a.sidemenu
{
text-decoration: underline;
font-size: 14px;
color: #333333;
float: center;
text-align: center;
margin:auto;
}   

.sidebar-item a.sidemenu:hover
{
text-decoration: underline;
}

.sidebar-head
{
width: 243px;
padding: 5px 0 6px 0;
background-color: #99cc66;
background: url(images/side_menu_header.gif) repeat-x 0 0;
border-top: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}

.sidebar-item-content
{
border: 1px solid #d0d0d0;
margin: 0;
padding: 10px 10px 0 18px;
background-color: #f0f0f0;
}

.ulnav
{
margin: 0;
padding: 0 0 0 5px;
list-style-type: none;
text-align: left;
}

.sidebar-item-content a
{
font-size: 11px;
text-decoration: none;
color: #005ebb;
}

.sidebar-item-content a:hover
{
text-decoration: underline;
color: #333333;
}

<div class="sidebar-item">
	<div class="sidebar-head">
	<a class="sidemenu" href="" title="">Pool Playing Tips</a>
	</div>

        <div class="sidebar-item-content">
	       
        <ul class="ulnav">
        <li>
        <a class="menuitem" href="#">anchor</a>
        </li>
        <li>
        <a class="menuitem" href="#">anchor</a>
        </li>					
        <li>
        <a class="menuitem" href="#">anchor</a>
        </li>
        </ul>

        </div>    			

</div>
</div>

 

[BabyJeffy]

Use a conditional comment to set the CSS change for IE 5&6. This is the accepted way to solve the problem you are experiencing. Google will help you with the syntax.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[Vragabond]

In IE6, use complete and valid doctype. That will correct the faulty box model that IEs use. In IE5, if you need to support an ancient browser with minimal market share, go for the conditional comment that Jeff was referring to.

 

[gwrman]

thanks - my problem was that I had an xml declaration above teh doctype. (<?xml version="1.0" encoding="UTF-8"?>) This caused problems with IE. It had to go under the doctype.

Thanks everyone for the response.