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"> © <a href="http://derekvanderven.com">derekvanderven.com</a> 2009</div>
</body>
</html>
Last edited by silverglade; 06-03-2009 at 10:13 AM..
|