PDA

View Full Version : text floating to the right in IE6


silverglade
06-03-2009, 12:22 PM
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

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.

@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;
}


here is the html for the page

<!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 align="center"> 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>

Rob_Che
06-03-2009, 12:37 PM
They're positioned exactly where you've told them to be.

toplinks is floated right with a 10px margin and music_content_wrapper is floated left with massive margins.

Sorry to sound like a broken record but you need to be looking more carefully at the structure of your page. The styles you have set will be useless across different screen reslutions as they're relying on the window dimensions. Your wrapper is set to 100% width, this serves little purpose.

Why are you fixing floats for IE6? I don't see why you need an additional IE6 stylesheet?

silverglade
06-03-2009, 01:26 PM
the text looks ok in dreamweaver code view and in firefox. so im not sure what is going on with IE6. also, to fit different resolutions, should i be using ems instead of pixels? thanks. derek

Rob_Che
06-03-2009, 01:31 PM
the text looks ok in dreamweaver code view and in firefox.
This is what I see in Firefox...

silverglade
06-03-2009, 01:52 PM
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;););)