The page <!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm">http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm</a><!-- m -->
looks aligned in IE 6.0 and the page border looks shifted in Mozilla 1.7.5.
There is a gap (white line) between the border and the right column.
How can I fix this in Mozilla. If I shift the right col to close the gap still the banner does not look ok.
Thanks.
CSS :-
body {
background-color :#003300;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
/* Fix IE. Hide from IE Mac \*/
* html #leftnav ul li { float: left; }
* html #leftnav ul li a { height: 1%; }
/* End */
#leftcol {
width : 175px;
float : left;
position : relative;
margin-left : -175px;
margin-right : 1px;
}
#rightcol {
width : 175px;
float : right;
position : relative;
margin-right : -175px;
margin-left : 1px;
}
#maincol {
float: left;
width : 100%;
position : relative;
margin : 0 -8px 0 -2px;
}
.content {
padding-left : 8px;
padding-right : 8px;
}
#outer {
border: solid white 0px;
border-left-width : 175px;
border-left-color : #003300;
border-left-style : solid;
border-right-color : #dddddd;
border-right-style : solid;
border-right-width : 175px;
background-color : #FFFFFF;
width : auto;
border-bottom : 1px solid #DDC642;
}
#inner {margin:0; width:100%;}
#outer>#inner{}
#footer { text-align:center; margin:0 auto; width:100%;}That "white" line is actually colored #F4EDC6 and is how Firefox renders ridge style borders. IE6 is either not supporting the ridge style or it's just a difference in how browser developers interpreted the standard.
So the answer is either live with it or use graphics for the borders.
looks aligned in IE 6.0 and the page border looks shifted in Mozilla 1.7.5.
There is a gap (white line) between the border and the right column.
How can I fix this in Mozilla. If I shift the right col to close the gap still the banner does not look ok.
Thanks.
CSS :-
body {
background-color :#003300;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
/* Fix IE. Hide from IE Mac \*/
* html #leftnav ul li { float: left; }
* html #leftnav ul li a { height: 1%; }
/* End */
#leftcol {
width : 175px;
float : left;
position : relative;
margin-left : -175px;
margin-right : 1px;
}
#rightcol {
width : 175px;
float : right;
position : relative;
margin-right : -175px;
margin-left : 1px;
}
#maincol {
float: left;
width : 100%;
position : relative;
margin : 0 -8px 0 -2px;
}
.content {
padding-left : 8px;
padding-right : 8px;
}
#outer {
border: solid white 0px;
border-left-width : 175px;
border-left-color : #003300;
border-left-style : solid;
border-right-color : #dddddd;
border-right-style : solid;
border-right-width : 175px;
background-color : #FFFFFF;
width : auto;
border-bottom : 1px solid #DDC642;
}
#inner {margin:0; width:100%;}
#outer>#inner{}
#footer { text-align:center; margin:0 auto; width:100%;}That "white" line is actually colored #F4EDC6 and is how Firefox renders ridge style borders. IE6 is either not supporting the ridge style or it's just a difference in how browser developers interpreted the standard.
So the answer is either live with it or use graphics for the borders.