I have a webpage with a 3 column layout. The left column has a login div, a navigation div and an rss news div
I want all 3 to have the same width, but IE 5.x doesn't show the navigation div as being the same width, in fact it looks like it thinks there's a 10px left margin, which there isn't.
This is the page: <!-- w --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/index.asp">www.firstchoicevacationhomes.com/Stokes/index.asp</a><!-- w -->
Any suggestions would be appreciated
#leftFrame {
float: left;
width: 160px;
margin: 0 5px 0px 0px;
border-right: 1px solid #f0f0f0;
padding: 0;
text-align: left;
}
#leftFrame ul
{
margin: 5px 0 5px 0;
width: 130px;
padding-left: 0;
list-style-type: none;
font-family: Tahoma,Arial,sans-serif;
font-size:12px;
}
#leftFrame li a
{
display: block;
width: 130px;
padding: 4px 10px 4px 10px;
margin: 1px 0 1px 0;
text-decoration: none;
color: #892700;
background:#f9cf6b url(bg_nav.jpg) repeat-x center;
border: 1px solid #b67439;
}
#leftFrame li a:hover
{
background: #9e2d01 url(bg_nav_o.jpg) repeat-x center;
color: #fff;
}
#rss {
width: 145px;
margin: 0px;
padding: 2px;
color: #505050;
background-color: #f4f4f4;
border: 1px solid #cccccc;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: justify;
}
form#login {
width: 145px;
margin: 0px;
padding: 2px;
color: #505050;
background-color: #f4f4f4;
border: 1px solid #cccccc;
}http://tantek.com/CSS/Examples/boxmodelhack.htmlThanks Fang
I've rewritten it all and got the width right, but introduced 2 new problems
1. The 'rollover' effect now doesn't work in IE 5.01
2. The rss div in Mozilla now seems to stretch up under the buttons
This is the new CSS:
#navigation {
padding: 0px;
margin: 5px 0px 5px 0px;
clear: left;
float: left;
width: 145px;
}
#navigation ul
{
padding: 0px;
margin: 0px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#navigation li a
{
display: block;
text-decoration: none;
color: #892700;
background:#f9cf6b url(bg_nav.jpg) repeat-x center;
border: 1px solid #b67439;
font: 12px Arial,sans-serif;
font-weight: bold;
padding: 5px 0px 5px 10px;
margin: 1px 1px 1px 0px;
width:146px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
}
#navigation li a:hover
{
background: #9e2d01 url(bg_nav_o.jpg) repeat-x center;
color: #fff;
}Fixed!
I want all 3 to have the same width, but IE 5.x doesn't show the navigation div as being the same width, in fact it looks like it thinks there's a 10px left margin, which there isn't.
This is the page: <!-- w --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/index.asp">www.firstchoicevacationhomes.com/Stokes/index.asp</a><!-- w -->
Any suggestions would be appreciated
#leftFrame {
float: left;
width: 160px;
margin: 0 5px 0px 0px;
border-right: 1px solid #f0f0f0;
padding: 0;
text-align: left;
}
#leftFrame ul
{
margin: 5px 0 5px 0;
width: 130px;
padding-left: 0;
list-style-type: none;
font-family: Tahoma,Arial,sans-serif;
font-size:12px;
}
#leftFrame li a
{
display: block;
width: 130px;
padding: 4px 10px 4px 10px;
margin: 1px 0 1px 0;
text-decoration: none;
color: #892700;
background:#f9cf6b url(bg_nav.jpg) repeat-x center;
border: 1px solid #b67439;
}
#leftFrame li a:hover
{
background: #9e2d01 url(bg_nav_o.jpg) repeat-x center;
color: #fff;
}
#rss {
width: 145px;
margin: 0px;
padding: 2px;
color: #505050;
background-color: #f4f4f4;
border: 1px solid #cccccc;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: justify;
}
form#login {
width: 145px;
margin: 0px;
padding: 2px;
color: #505050;
background-color: #f4f4f4;
border: 1px solid #cccccc;
}http://tantek.com/CSS/Examples/boxmodelhack.htmlThanks Fang
I've rewritten it all and got the width right, but introduced 2 new problems
1. The 'rollover' effect now doesn't work in IE 5.01
2. The rss div in Mozilla now seems to stretch up under the buttons
This is the new CSS:
#navigation {
padding: 0px;
margin: 5px 0px 5px 0px;
clear: left;
float: left;
width: 145px;
}
#navigation ul
{
padding: 0px;
margin: 0px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#navigation li a
{
display: block;
text-decoration: none;
color: #892700;
background:#f9cf6b url(bg_nav.jpg) repeat-x center;
border: 1px solid #b67439;
font: 12px Arial,sans-serif;
font-weight: bold;
padding: 5px 0px 5px 10px;
margin: 1px 1px 1px 0px;
width:146px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
}
#navigation li a:hover
{
background: #9e2d01 url(bg_nav_o.jpg) repeat-x center;
color: #fff;
}Fixed!