Welcome to WebmasterWorld Guest from 54.159.44.227

Forum Moderators: not2easy

Message Too Old, No Replies

IE7 layout issue

float issue IE7

     

4css

2:05 pm on Apr 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have a 3 column layout that works fine in FF (of course) And when I use the Web Developer tool bar it shows plenty of room between the 3 divs. Same with the IE7 tool bar. It shows that there is plenty of room between the divs, yet the 3rd div drops down.
---------
Here is the css:


* {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;}
body {
background-color: #D6DFE4;
/*#EAD8D4;*/
}
html, body {
margin: 2px;
text-align: center;
font-size: 100.01%;
font-family: Arial, Verdana, sans-serif;
color: #1D0A04;
}
div#mainwrapper {
width: 804px;
text-align: left;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
div#wrapper {
width: 804px;
float:left;
}
div#hd {
width: 804px;
margin: auto;
}
.seagull {
border: 4px groove #71726D;
margin-right: auto;
margin-left: auto;
}
div#hdnav {
Width: 804px;
height: 50px;
float: left;
text-align: center;
}
/*header nav styles start here*/
div#hdnav ul {


}
div#hdnav ul li {
display: inline;
font-size: ,8em;

}
/*header nav styles end here*/

/*left nav styles begin here*/
div#leftnav {
float: left;
width: 162px;
/*background-color:#FFF5DF;*/
height: 100%;
/*D1DAD5;*/
}

div#leftnav ul {
}
div#leftnav ul li {
font-size: .9em;
font-weight: bold;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;

}
.first {
border-top: 1px solid #000;
}
div#leftnav ul li a:link, div#leftnav ul li a:visited {
color: #fff;
background-color: #7584A1;
display: block;
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;}
/*left nav styles end here*/
div#content {
width: 300px;
color: #000;
float: left:
}
div#content p {
margin-left: 10px;
line-height: 1.30em;
font-size: 1em;
text-indent: .9em;
margin-bottom: .50em;
}
/*This is for the about page*/
div#poem {
float: right;
width: 240px;
top: 10px;
}
div#poem h1 {
font-size: 1em;
text-align: center;
}
/*end coding for the about page poem*/
div#poem p{
font-size: .8em;
font-weight: bold;
text-indent: .8em;
color:#1D0A04;
line-height: 1.5em;
}

div#footer {
width: 804px;
background-color: }

div#h2 {
font-size: 1em;
text-align: center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}
/* \ */
* html .clearfix {height: 1%;display: block;}
/* */

__________

The about page is the only one that I started with 3 columns. I plan on adding a 3rd column to the other pages as well, but need to resolve this issue first.

The poem div is the 3rd div on this page.

Any help would be greatly appreciated.

4css

4:55 pm on Apr 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just an added note, if I change the float right to float left, the third box drops down under the nav on the left of the page.

I have been searching google all morning and just can't seem to find any answers.

4css

11:54 am on Apr 29, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Issue is resolved. It was a matter of punctuation in my css file.

I thought I had validated this file, but it was the other one that goes along with the site.

This part of the code:

div#content {
width: 300px;
color: #000;
float: left:
}

Was incorrect on the float left. I had a colon and should have had a semi colon.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month