CSS - IE vs FF Issue - Width & Borders

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;
}

Code (markup):

<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>

Code (markup):

 

The issue is that you don't have a complete and proper DTD. How do I know? IE isn't following standards. The DTD will put IE into standards mode where it at least tries to follow the rules.

See http://www.alistapart.com/articles/doctype/ for info. For any new document, use a strict DTD. There is no sane reason to use deprecated elements or attributes.

cheers,

gary

 

Thanks for the reply.

I AM using a complete and proper DTD. I was using the xhtml 1.1 dtd, then tried the xhtml 1.0 strict dtd, and no change occurred.

The code renders perfectly in IE7, and all firefox editions, but not the IE 5 and IE 6

 

Okay - i JUST found the issue. I had an XML declaration:

<?xml version="1.0" encoding="UTF-8"?>

...above the doctype. I moved it below, and everything is now fine, and order is restored. I guess you can't put anything above the doctype, although the examples i saw of the use of this xml declaration all had them at the page's top.

 

Lose the xml declaration completely. It is inappropriate for a document served as text/html.

cheers,

gary

 

what about if the page also displays content from an xml feed? (on a part of it?_)

 

The xml declaration is optional even for xml pages, as long as the defaults, xml 1.0 and utf-8, are used.

But, for an html page&#8212;even with embedded xml&#8212;the declaration should not be used.

cheers,

gary