CSS Forum

**silverglade** · 10:13 AM

hi, ive tried everything and added my floated divs to my display: inline iefixes.css file. the text always floats to the right of my "music.html" page. any help greatly appreciated. thanks. derek
edit: now my background doesnt show up in dreamweaver internet explorer preview.

here is the page im talking about

http://derekvanderven.com/music_store/music.html

and here is the css to the page, the page code is at the bottom.

Code:

@charset "utf-8";
/* CSS Document */

body {
margin: 0 ;
padding: 0;
background-color: #301005;

}

#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width:1000px;
height: 750px;
background: url(music_background.jpg) no-repeat;
}


/********************************top links code******************/
#toplinks {
    font-weight:bold;
    width:325px;
    height: 60px;
    float:right;
    margin-top: 200px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: center;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#D59B24;
text-decoration:none;
}
/***************************content code*****************/



#content_oval_1 {
    float: left;
    width: 165px;
    margin-top: 250px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 40px;
    color:  #fff;
    text-align: left;
    
    
}

 #content_oval_1 p {
 padding-left: 10px;
 text-align: left;
 padding-right: 10px;
 font-size: small;
 
 }


#content_oval_2 {
    float: left;
    width: 165px;
    margin-top: 250px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 30px;
    color: #fff;
 
     
}

#content_oval_2 p {
 padding-left: 15px;
 text-align: left;
 padding-right: 10px;
 font-size: small;
 
 }
#content_oval_2 img {
float: right;
padding-right: 8px;
padding-left: 4px;
padding-bottom: 10px;
}

#content_oval_2 a:link, #content_oval_2 a:active, #content_oval_2 a:visited {
color: white;
text-decoration: none;
}

 #content_oval_2 a:hover 
{
color: #EEE904;
text-decoration: underline;
}

#content_oval_3 {
    float: left;
    width: 165px;
    margin-top: 250px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 22px;
    color: #fff;
}

#content_oval_3 a:link, #content_oval_3 a:active, #content_oval_3 a:visited {
color: white;
text-decoration: none;
}

 #content_oval_3 a:hover 
{
color: #EEE904;
text-decoration: underline;
}

#content_oval_3 p {
 padding-left: 10px;
 text-align: left;
 padding-right: 10px;
 font-size: small;
 
 }

#content_oval_3 img {
float: right;
padding-right: 10px;
padding-left: 0px;
padding-bottom: 10px;
}
#content_oval_1, #content_oval_2, #content_oval_3 h3 {
text-align: center; 
color: white;
padding-top: 10px;
}

#footer {
margin: 0 auto 0 auto;
width: 100%;
color: white;
background-color: black;
text-align: center;
}

 #footer a:link , #footer a:visited  {
text-decoration: none;
color: white;
}
 #footer a:active, #footer a:hover {
text-decoration: none;
color: red;
}
/*******************************music code*******************************/

#music_wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width:100%;
height: 750px;
background: url(music_background2.jpg) no-repeat;
}


#music_content_wrapper {
    float: left;
    width: 375px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 300px;
    color: white;
     
}

#music_content_wrapper p {
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
#music_content h3 {
text-align: center;
font-size: large;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link rel="stylesheet" href="music.css" type="text/css" charset="utf-8" />
<title>Music Store home</title>
 
 

</head>

<body>

<div id="music_wrapper"> 
 
<div id="toplinks"><ul>
<li><a href="index.html">Home</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="covers.html">Concert Images</a></li>
<li><a href="contact.html">Contact</a></li>
 
</ul></div><!--end toplinks-->


 <div id="music_content_wrapper">
   
  <h3> Music Selection and Prices </h3>
   
   <p> lorem ipsum......$19.99</p>
   <p>lorem ipsum......$9.99</p>
   <p>lorem ipsum......$10.99</p>
   <p>lorem ipsum......$13.99</p>
   <p>lorem ipsum......$11.99</p>
   <p>lorem ipsum......$12.99</p>
   <p>lorem ipsum......$5.99</p>
   <p>lorem ipsum......$19.99</p>
   </div> <!--end music content-->


</div><!--end  music wrapper-->
<div id="footer"> &copy; <a href="http://derekvanderven.com">derekvanderven.com</a> 2009</div>
</body>
</html>

**silverglade** · 06-03-2009, 10:20 AM

nevermind, after a few hours of looking, i realized i put my #music_wrapper, which WASNT floated, inside my ie6 fix for floated divs. that was causing all of the errors. thanks. derek