Forum Moderators: not2easy
I thought this was going to be simple but it hasn't worked out as yet.
For my menu i want a image at the top that lines up with a css table which has 1px borders. Thing is the table works fine in explorer 6 but appears larger in firefox.
From what i can find IE includes the border in the width so it all works whereas firefox adds the border to the width making it 2px too large to line up with my image.
From what I have read it is IE not doing the right thing but i would really like this to work on both browsers.
here is the code i have for the table:
}
table.menutable {
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #60778C;
border-collapse: collapse;
}
table.menutable th {
border-width: 0px;
border-style: none;
background-color: #9DACBF;
}
table.menutable td {
border-width: 0px;
border-style: none;
background-color: #9DACBF;
}
Every thing else i want this table to do works but i just can't find the solution to get this working in both browsers.
Is there a fix for this?
Thanks in advance
james
I have since found a new (well to me anyway) and better way of doing exactly the same thing.
I have replaced the table with a <div> and use this (below) in the css file to get exactly the look i wanted with half the code and none of the problems.
}
div.menu {
font-size: 12px;
text-align: left;
background-color: #9DACBF;
width: 118px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #60778C;
padding: 10px 0px 10px 10px;
}
:)
