I have a couple of problems with the layout in
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/">http://wsdev.colostate.edu/cwis116/admmock/</a><!-- m -->
There is an IE6 only problem :-
A line spacing that appears between the banner and the rest of the content (a white line- background). Is this an IE error due to float? How can I fix this.
In both IE6 and Mozilla :-
The Connect Campus image does not align, even though the height and the width of the image match the container. There is a portion of the background that appears below the image (beige color).
Thanks in advance.
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;
}
A:LINK, A:VISITED {
background-color : transparent;
color : #003300;
font-weight : bold;
text-decoration : none;
}
A:HOVER {
background-color : #003300;
color : #FFFFFF;
}
.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;
}
div{
font-size: xx-small;
border: 0px;
margin: 0px;
outline : 0px;
padding: 0px;
}
.xxsmall{
font-size: xx-small;
}
#logo { height:85px; width:760px; border:0; }
#mainnavlist
{
color: white;
background: #030;
border-bottom: 0.2em solid #030;
border-right: 0.2em solid #030;
padding: 0 1px;
margin-left: 0px;
margin-top : 1.5em;
margin-bottom : 0px;
margin-right : 0px;
width: 26.5em;
font: normal 0.8em arial, Verdana, sans-serif;
}
#mainnavlist li
{
list-style: none;
margin: 0px;
font-size: 1.47em;
}
#mainnavlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #040;
border-width: 1px;
border-style: solid;
/*border-color: #5bd #035 #068 #6cf;*/
border-color : #393 ;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#mainnavlist a#current { border-color: #5bd #035 #068 #f30; }
#mainnavlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}
#mainnavlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 15.4em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#mainnavlist a:hover, #mainnavlist a#current:hover
{
background: #050;
/*border-color: #069 #6cf #5bd #fc0;*/
border-color : #093 #393 #393 #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#mainnavlist a:active, #mainnavlist a#current:active
{
background: #030;
/* border-color: #069 #6cf #5bd white;*/
border-color : #093 #393 #393 white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#rightsection {height:480px; width : 192px; float:right;background-color : #669966;
border-bottom : medium ridge #DDC642 ; }
#rightnavcontainer ul
{
position : relative;
top : 60px;
margin-left: 18px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align : center;
font-size: 8pt;
font-weight :500;
}
#rightnavcontainer a
{
display: block;
padding: 3px;
width: 136px;
background-color: #030;
color : #DDC642;
border-bottom: 1px solid #eee;
}
#rightnavcontainer a:link, #navlist a:visited
{
color: #DDC642;
text-decoration: none;
}
#rightnavcontainer a:hover
{
background-color: #e8d980;
color: #003300;
}
#search { position : relative; top : 0px; width : 192px; background-color : #003300; color : #DDC642; }
#subsearch { position : relative; top : 0px; background-color : #004400; color : #DDC642; }
input.azsearch {
margin-left:10px;
border: black 1px solid;
font-size: 8pt;
color : #003300;
}
input.azsubmit {
width:22px;
border: black 1px solid;
font-size: 7pt;
background-color : #DDC642;
}
#address { position : relative; top : 150px; text-align:center; color:#003300; }
#main_content {width:568px; height:480px; float:left; background-color:#efe4a6;
border-bottom : medium ridge #DDC642 ; }
#visit_campus_bg { float:right; width:350px; height:250px; background-repeat : no-repeat;color:#fff; }
#connect_img { clear:both; position:absolute; top:335px;width:568px; height:230px; background-repeat : no-repeat;
}
.clear { clear:both; }
#footer_main { text-align:center; background:#fff; margin:0 auto; width:100%;}
.box {
border : 1px solid;
padding : 3px;
width : 352px;
}
.title{
font-size: x-small;
}Try this:#logo { height:85px; width:760px; border:0; vertical-align:bottom; }Thanks. That worked.
I still have the second problem where the lower campus image does not fit the container. There is the background color strip (beige) between the image and the golden bar. Any suggestions? Thanks.The "Connect campus" image is not aligned in IE. It works in firefox. How can I fix this?
Also, the left navigation increases with larger fonts and messes up the layout. How can I lock the left navigation to a layer in the current layout.
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/">http://wsdev.colostate.edu/cwis116/admmock/</a><!-- m -->
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/">http://wsdev.colostate.edu/cwis116/admmock/</a><!-- m -->
There is an IE6 only problem :-
A line spacing that appears between the banner and the rest of the content (a white line- background). Is this an IE error due to float? How can I fix this.
In both IE6 and Mozilla :-
The Connect Campus image does not align, even though the height and the width of the image match the container. There is a portion of the background that appears below the image (beige color).
Thanks in advance.
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;
}
A:LINK, A:VISITED {
background-color : transparent;
color : #003300;
font-weight : bold;
text-decoration : none;
}
A:HOVER {
background-color : #003300;
color : #FFFFFF;
}
.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;
}
div{
font-size: xx-small;
border: 0px;
margin: 0px;
outline : 0px;
padding: 0px;
}
.xxsmall{
font-size: xx-small;
}
#logo { height:85px; width:760px; border:0; }
#mainnavlist
{
color: white;
background: #030;
border-bottom: 0.2em solid #030;
border-right: 0.2em solid #030;
padding: 0 1px;
margin-left: 0px;
margin-top : 1.5em;
margin-bottom : 0px;
margin-right : 0px;
width: 26.5em;
font: normal 0.8em arial, Verdana, sans-serif;
}
#mainnavlist li
{
list-style: none;
margin: 0px;
font-size: 1.47em;
}
#mainnavlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #040;
border-width: 1px;
border-style: solid;
/*border-color: #5bd #035 #068 #6cf;*/
border-color : #393 ;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#mainnavlist a#current { border-color: #5bd #035 #068 #f30; }
#mainnavlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}
#mainnavlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 15.4em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#mainnavlist a:hover, #mainnavlist a#current:hover
{
background: #050;
/*border-color: #069 #6cf #5bd #fc0;*/
border-color : #093 #393 #393 #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#mainnavlist a:active, #mainnavlist a#current:active
{
background: #030;
/* border-color: #069 #6cf #5bd white;*/
border-color : #093 #393 #393 white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#rightsection {height:480px; width : 192px; float:right;background-color : #669966;
border-bottom : medium ridge #DDC642 ; }
#rightnavcontainer ul
{
position : relative;
top : 60px;
margin-left: 18px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align : center;
font-size: 8pt;
font-weight :500;
}
#rightnavcontainer a
{
display: block;
padding: 3px;
width: 136px;
background-color: #030;
color : #DDC642;
border-bottom: 1px solid #eee;
}
#rightnavcontainer a:link, #navlist a:visited
{
color: #DDC642;
text-decoration: none;
}
#rightnavcontainer a:hover
{
background-color: #e8d980;
color: #003300;
}
#search { position : relative; top : 0px; width : 192px; background-color : #003300; color : #DDC642; }
#subsearch { position : relative; top : 0px; background-color : #004400; color : #DDC642; }
input.azsearch {
margin-left:10px;
border: black 1px solid;
font-size: 8pt;
color : #003300;
}
input.azsubmit {
width:22px;
border: black 1px solid;
font-size: 7pt;
background-color : #DDC642;
}
#address { position : relative; top : 150px; text-align:center; color:#003300; }
#main_content {width:568px; height:480px; float:left; background-color:#efe4a6;
border-bottom : medium ridge #DDC642 ; }
#visit_campus_bg { float:right; width:350px; height:250px; background-repeat : no-repeat;color:#fff; }
#connect_img { clear:both; position:absolute; top:335px;width:568px; height:230px; background-repeat : no-repeat;
}
.clear { clear:both; }
#footer_main { text-align:center; background:#fff; margin:0 auto; width:100%;}
.box {
border : 1px solid;
padding : 3px;
width : 352px;
}
.title{
font-size: x-small;
}Try this:#logo { height:85px; width:760px; border:0; vertical-align:bottom; }Thanks. That worked.
I still have the second problem where the lower campus image does not fit the container. There is the background color strip (beige) between the image and the golden bar. Any suggestions? Thanks.The "Connect campus" image is not aligned in IE. It works in firefox. How can I fix this?
Also, the left navigation increases with larger fonts and messes up the layout. How can I lock the left navigation to a layer in the current layout.
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/">http://wsdev.colostate.edu/cwis116/admmock/</a><!-- m -->