homepage Welcome to WebmasterWorld Guest from 54.198.139.141
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
IE7 layout issue
float issue IE7
4css




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved