...

View Full Version : formatting problem with float layout



mimi
05-17-2005, 10:11 PM
I have a couple of problems with the layout in
http://wsdev.colostate.edu/cwis116/admmock/

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;
}

mimi
05-18-2005, 02:55 PM
I have the first problem fixed by adding "vertical-align : bottom" to #logo.

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.

mcdougals4all
05-18-2005, 03:03 PM
Change this:


#connect_img { position:absolute; top:335px;width:568px; height:230px; vertical-align : bottom;background-repeat : no-repeat;
}

... to this:


#connect_img { width:568px; height:230px; }

Not tested in IE but fixes the problem in Firefox.

mimi
05-18-2005, 07:15 PM
Thanks.

I still have the problem in IE. There is a margin on the top and the bottom of the connect_img.

Also, I have a problem with larger fonts of the browser. The left navigation shifts and enlarges. How do I lock this layer in the current layout?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum