homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved