width differences in IE/FF

[bbolte]

here's the page: http://www.billbolte.com/test/template.html
style sheet: http://www.billbolte.com/test/assets...s/style_01.css

on the nav buttons on the left, i would like them to fit 100% across the width of the left column. I can get it to work in either FF or IE but not both at the same time. what's the trick?

[bbolte]

can someone at least point me in the right direction? i still haven't figured this out...

[Paul O'B]

Hi,

Sorry I missed your post.

Change the width in the nav lists and anchors to 130px and remove the margin left 1px from nav ul.

#nav, #nav ul{
 padding: 0 0 0 0;
 margin: 5px 0 10px 0;
 font-size: 12px;
 list-style: none;
 /*float: left;*
 position:relative;
}
#nav li{
 height: 25px;
 /*border-left: 1px solid Black;*/
 border-top: 1px solid Black;
 /*border-right: 1px solid Black;*/
 line-height: 22px;
 padding: 0 0 0 0;
 width: 130px;
 height: 25px;
 position:relative;
}

Do the same width for the anchor as well.

Then remove the ie style as shown below as its not really necessary.

* html #outer{/* remove this styleblock*/
 margin-left:127px;
 margin-right:127px;
}

and then change left to be -2px as below.

#left {
 position:relative;/*ie needs this to show float */
 width:130px;
 float:left;
 margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
 left:-2px
}

That seems to work for me

[bbolte]

thanks paul i'll give it a try...

[keithc]

Paul I took a look at this layout and when I modified the css with your changes the result for me was that the <p> </p> that sits below the left side navigaton pushes up underneathe that navigation and does not hold its position within FF.

[Paul O'B]

Hi,

I modified the css with your changes the result for me was that the <p> </p> that sits below the left side navigaton pushes up underneathe that navigation and does not hold its position within FF.

I'm not quite sure what you mean?

This is the code with the changes i mentioned above.

http://www.pmob.co.uk/temp/bbolte.htm

Where is it coming unstuck?

[keithc]

Hey Paul,

Maybe I copied something in wrong or I dont have all the style sheets for the page but this is what I get if I copy the css and the source code off that page along with the changes you noted. In FF it should show that paragraph slide up underneathe the left side navigation links.

http://ww2.tektown.net:92/NiceLayout.php

[Paul O'B]

Hi,

Yes you've missed some stuff out here.

 
#nav, #nav ul{
 padding: 0 0 0 0;
 margin: 5px 0 10px 0;
 font-size: 12px;
 list-style: none;
 /*float: left;*
 position:relative;
}
}
#nav li{
 height: 25px;
 /*border-left: 1px solid Black;*/
 border-top: 1px solid Black;
 /*border-right: 1px solid Black;*/
 line-height: 22px;
 padding: 0 0 0 0;
 width: 130px;
 height: 25px;
 position:relative;
}

You missed the finishing slash off the css comments which makes all the middle section of that code become a comment. You also have an extra bracket which will kill mozilla also.

#nav, #nav ul{
 padding: 0 0 0 0;
 margin: 5px 0 10px 0;
 font-size: 12px;
 list-style: none;
 /*float: left;*/
 position:relative;
}
/* just one bracket will do */
#nav li{
 height: 25px;
 /*border-left: 1px solid Black;*/
 border-top: 1px solid Black;
 /*border-right: 1px solid Black;*/
 line-height: 22px;
 padding: 0 0 0 0;
 width: 130px;
 height: 25px;
 position:relative;
}

and there you go

[keithc]

thanks Paul