homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

CSS Forum

    
Float Drop?
roclimb

5+ Year Member



 
Msg#: 4261543 posted 4:52 am on Feb 2, 2011 (gmt 0)

Having a problem in older versions of IE. I have three left floated divs above three floated divs, both in seperate wrappers. The lower divs are overlapping the upper ones in older versions of IE. Safari, mobile, and firefox its fine.

Please help.

My code:



#header {
z-index: 1000;
background-image: url(images/top-metal-background.jpg);
background-repeat: repeat-x;
height: 39px;
margin-right: auto;
margin-left: auto;
}

#wrapper {
background-position: center bottom;
background-repeat: no-repeat;
width: 980px;
margin-right: auto;
margin-left: auto;
height: 650px;
}

#headwrapper {
margin-right: auto;
margin-left: auto;
height: 39px;
width: 900px;
background-position: left;
background-repeat: no-repeat;
}

#slidercontainer {
padding-top: 20px;
float: right;
background-repeat: repeat;
background-image: url(images/grey-background.jpg);
padding-right: 50px;
height: 280px;
width: 750px;
background-color: black;
}

#botwinleft {
padding-left: 20px;
padding-top: 30px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
float: left;
height: 335px;
width: 410px;
}

#botwinleft h3 {

text-shadow: 3px 3px #e1e1e1;

color: #da1922;

}

#botwincenter {
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
height: 365px;
float: left;
width: 95px;
}

#botwinright {
padding-top: 50px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
background-repeat: no-repeat;
height: 315px;
float: left;
width: 445px;
}

body {
background-image: url(images/wall.jpg);
background-color: black;
background-repeat: repeat;
padding: 0px;
margin: 0px;
}

#left {
background-image: url(images/grey-background.jp);
background-repeat: repeat;
padding-right: 20px;
padding-left: 40px;
border-style: none;
height: 250px;
float: left;
width: 239px;
}

#left img {
padding-right: 15px;

}

#center {
background-image: url(images/grey-background.jp);
background-repeat: repeat;
padding-right: 20px;
padding-left: 20px;
border-style: none;
height: 250px;
float: left;
width: 260px;
}


#center img {
padding-right: 15px;
}


#right {
background-image: url(images/grey-background.jp);
background-repeat: repeat;
border-style: none;
height: 250px;
float: left;
width: 375px;
}


#right img {
padding-right: 15px;
}


#footer {
border-top-style: groove;
border-top-color: #4c4c4c;
border-top-width: 2px;
background-image: url(images/black-background.jpg);
background-repeat: repeat;
clear: both;
height: 150px;
margin-right: auto;
margin-left: auto;
}

#nav {
background-image: url(images/navcolor.jpg);
background-repeat: repeat-y;
height: 300px;
float: left;
width: 150px;
}

#menu {
padding: 0px;
margin: 0px;
width: 0px;
}

#menu li {
list-style-type: none;
margin:0 0 0.25em 0;
}

#menu a, #menu a:visited {
background-color: #4c4c4c;
display:block;
width:9em;
text-align: center;
text-decoration:none;
color:#eee;
}

#menu a:hover {
background: #ddd;
color: red;
}
#leftfloat {
border-left-style: none;
border-bottom-style: groove;
border-right-style: none;
border-top-style: none;
border-bottom-color: #595959;
border-bottom-width: 3px;
background-image: url(images/grey-background.jpg);
background-repeat: repeat;
height: 300px;
background-color: #858585;
margin-left: auto;
}
#bottomwrap {
background-position: 0 bottom;
background-image: url(images/testimage.png);
background-repeat: no-repeat;
height: 700px;
margin-right: auto;
margin-left: auto;
width: 980px;
}
#lowerbackground {
border-top-style: none;
background-image: url(images/redbackground.png);
background-position: 0 bottom;
background-repeat: repeat-x;
height: 700px;
margin-right: auto;
margin-left: auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>
<body>
<div id="header">
<div id="headwrapper"></div>
</div>
<div id="leftfloat">
<div id="wrapper">
<div id="nav">
<ul id="menu">
<li><a href="inde.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Pastjobs.html">Past Jobs</a></li>
<li><a href="Currentjobs.html">Current Jobs</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<img src="images/logosign.pn" alt="logosign" width="" height="" />
</div>
<div id="slidercontainer">
<div id="slider">
<ul>
<li><img src="images/engine.jpg" alt="" /></li>
<li><img src="images/comero.jpg" alt="" /></li>
<li><img src="images/ebgine2.jpg" alt="" /></li>
</ul>
</div>

</div>
<div id="botwinleft">
<h3>Welcome to S & L Motors</h3>
<p>text here</p></div>
<div id="botwincenter"></div>
<div id="botwinright"><iframe width="325" height="250" frameborder="0" >View Larger Map</a></small></div>
</div>
</div>
<div id="lowerbackground">
<div id="bottomwrap">
<div id="left">
<h3 align="center">Great Service</h3>
<img src="images/Classic%2066-128.png" align="right" alt="Classic%2066-128" width="128" height="128" />
<p>text here
</p>
</div>
<div id="center">
<h3 align="center">Weekend Work</h3>
<img src="images/Classic%20truck-128.png" align="right" alt="Classic%20truck-128" width="128" height="128" />
<p>text here.</p>
</div>
<div id="right">
<h3 align="center">Expert Staff</h3>
<img src="images/red_128.png" align="right" alt="red_128" width="128" height="128" />
<p>texte.</p>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

 

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