PDA

View Full Version : IE CSS not aligning correctly



Jacobb123
02-21-2007, 07:45 PM
I have been desinging a site and it comes up fine in Firefox but not in IE. the Page is www.w_e_t_i_t_o.com/whats_hot.php( I don't want the search engines to pick up the domain name)



<?php
ob_start("ob_gzhandler");

session_start();
include("includes/top.php");
include("includes/conn.php");
?>

<!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=iso-8859-1" />
<title>wetito.com</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="header"> <a href="whats_hot.php" id="whats_hot"></a><a href="#" id="members"></a><a href="#" id="shop"></a><a href="#" id="artists"></a><a href="#" id="music"></a><a href="#" id="movies"></a>
</div>
<!-- the end of #header-->
<div id="pager_con">
<div id="pager">
<div id="pager_left"> Browse Artists: <a href="music.php?name=a">A</a> <a href="music.php?name=b">B</a>
<a href="music.php?name=c">C</a> <a href="music.php?name=d">D</a> <a href="music.php?name=e">E</a>
<a href="f">F</a> <a href="music.php?name=g">G</a> <a href="music.php?name=h">H</a>
<a href="music.php?name=i">I</a> <a href="music.php?name=j">J</a> <a href="music.php?name=k">K</a>
<a href="music.php?name=l">L</a> <a href="music.php?name=m">M</a> <a href="music.php?name=n">N</a>
<a href="music.php?name=o">O</a> <a href="music.php?name=p">P</a> <a href="music.php?name=q">Q</a>
<a href="music.php?name=r">R</a> <a href="music.php?name=s">S</a> <a href="music.php?name=t">T</a>
<a href="music.php?name=u">U</a> <a href="music.php?name=v">V</a> <a href="music.php?name=w">W</a>
<a href="music.php?name=x">X</a> <a href="music.php?name=y">Y</a> <a href="music.php?name=z">Z</a>
</div>
<!-- the end of #pager_left-->
</div>
<!-- the end of #lpager-->
</div>
<!-- the end of #pager_con-->
<div id="content_container">
<div id="content">
<div class="photo1"><img src="images/guitar.jpg"/></div>
<div class="contentbox"><div class="headertop">
<div class="videos">New Videos</div>
<div class="newmusic">New Music</div>


</div>

<div class="ad2"><img src="images/ad2.gif"></div>
<div class="contentbox2">
<div class="newmusic2">
<div class="newmusic3"></div>

</div>
<div class="newvideos">The making of America </div>

</div>

</div> <!-- the end of #contentbox-->
</div> <!-- the end of #content-->
<div id="footer"> <a href="#">Help</a> | <a href="#">Privacy Policy</a> |
<a href="#">Contact Us</a> | <a href="#">About Us</a> | <a href="#">Shopping
Account</a> | <a href="#">Terms of Use</a> | <a href="#">To Advertise</a>
| <a href="#">Copyright Policy</a> | <a href="#">Sitemap</a><br />
<p> <span class="leftfloat"> &copy; 1997 - 2006 Wetito, Inc. All Rights
Reserved</span> <span class="rightfloat">Website designed &amp; developed
by DEFinition / Innocreek</span> </p>
</div>
<!-- the end of #footer-->
</div><!-- the end of #content_container-->
</div><!-- the end of #page_container-->
</body>
</html>



This is the CSS
body {
background-image: url(img/bg.gif);
margin:0;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #FFFFFF;
}
a {text-decoration:none;color:#FFFFFF;}
form {padding:0;margin:0;}
p{margin:10px auto}
img.leftfloat {border:0;}
#page_container {
width: 780px;
margin: 0 auto;
}
#header {
background: url(img/header.jpg) no-repeat;
padding-top: 191px;
width: 100%;
position:relative;
height:44px;
}
#header a{
display:block;
height:44px;
float:left;
width:129px;
}
#whats_hot {background-image: url(img/whats_hot.jpg);}
#header #members {background-image: url(img/members.jpg); width:131px;}
#shop {background-image: url(img/shop.jpg);}
#header #artists {background-image: url(img/artists.jpg); width:133px;}
#music {background-image: url(img/music.jpg);}
#movies {background-image: url(img/movies.jpg);}
#pager_con {
background: url(img/pager_bg.jpg) repeat-x;
width: 100%;
position:relative;
height:20px;
}
#pager {
background: #23242B url(img/pager_r.jpg) no-repeat right top;
width:520px;
margin-right: 10px;
float: right;
}
#pager_left {
background-image: url(img/pager_l.jpg);
background-repeat: no-repeat;
text-align: center;
}
#pager_left a{
line-height: 20px;
color: #FFFFFF;
text-decoration: none;
padding:0 2px;
}
#content_container {
background: url(img/main_bg3.gif) repeat-y right top;
width:100%;
}
#content{position:relative;}
#the_mix{
background: #FFFFFF url(img/themix.gif) no-repeat center 12px;
padding: 124px 0px 0px 0px;
}
#leftcol_mix {
padding:12px 0 0 12px;
width: 322px;
float:left;
}
#rightcol_mix {
width: 445px;
padding-top:12px;
float:left;
}
#this_weak {
background: url(img/thisweak.gif) no-repeat left top;
height: 470px;
width: 100%;
}
#this_weaktext { padding: 60px 40px 40px 40px;}
#the_host {
background: url(img/thehost.gif) no-repeat left top;
height: 385px;
}
#the_hosttext{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
padding: 57px 40px 40px 32px;
}
.bigtxt{
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#episodes{
background: url(img/episods.gif) no-repeat left top;
height: 570px;
width: 100%;
}
#episodes_content { padding: 80px 40px 40px 50px; text-align:center}
.date{color:#301A69}
#ads_con{padding:20px;}
#left_col{
float: left;
width: 183px;
padding:0 0 0 17px;
position: relative;

}
#left_col_title {

height: 36px;
width: 185px;
margin: 0 0 5px -5px;
background-image: url(img/left_col_header.gif);
}
#right_col{
float: right;
width: 188px;
padding:0 2px 0 0px;
position: relative;

}
#right_col_title {
background-image: url(img/right_col_header.gif);
height: 61px;
width: 200px;
margin: 0 0 5px -10px;
}
#main_col{
float: left;
width: 380px;
padding:0;
position: relative;
text-align:center;
}
.featured_movies {
background-image: url(img/featured_movies.gif);
height: 35px;
width: 380px;
}
#main_content{
margin:10px auto;
width:350px;
text-align:left;
}
.bullet{
background: url(img/bullet.gif) no-repeat left center;
padding-left: 30px;
}
.box {
background-color:#23242B;
margin:0px 10px 20px 0;
padding:15px 5px 5px 5px;
font-size:11px;
}
.box_left{margin:0px 3px 20px 0;}
.border_bottom {border-bottom:1px solid #23242B;}
.bottom {
height: 17px;
line-height: 14px;
background-image: url(img/bottom.gif);
width: 120px;
padding:0 15px;
}
.top{
line-height: 17px;
background: url(img/top.gif) no-repeat left top;
width: 120px;
padding:0 15px;
text-align:left;
}
.more {
text-align:right;
position:relative;
line-height: 17px;
background: url(img/top.gif) no-repeat right top;
padding:0 40px 0 0;
}
.more a{
color:#ff8d02;
line-height: 17px;

}
#list_con{
margin:10px auto;
width:160px;
position:relative;
border-bottom: 2px dotted #23242B;

}
.link_y {
color:#fef600;
margin-left:40px;
}
.red{color:#ff0000;}
.link_u {text-decoration:underline;}
.right {
text-align:right;
padding-right:20px;
}
.leftfloat {float:left;}
img.leftfloat {margin-right:5px;}
.rightfloat{
float:right;
text-align:left;
}
#footer {
clear:both;
color: #000000;
background-color: #a5b9d9;
position:relative;
text-align:center;
padding:5px 70px;
height:40px;
font-size:11px;
}
#footer a{
color: #000000;
}.Box1 {
position: relative;
left: 15px;
top: 5px;
bottom: 15px;


}
.box2 {
height: 200px;
width: 570px;
background-image: url(../images/front.gif);
position: relative;
float: left;
margin-bottom: 15px;
top: 5px;






}
.newuser {
position: relative;
left: 50px;
top: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bolder;

}
.Price {
position: relative;
left: 10px;
}
.photo1 {
position: relative;
left: 20px;
margin-bottom: 10px;
top: 5px;



}
.contentbox {
height: 600px;
width: 750px;
background-color: #FFFFFF;
margin-right: 2.5%;
margin-left: 2.5%;

}
.headertop {
background-image: url(../images/headertop.jpg);
height: 36px;
width: 750px;
background-repeat: no-repeat;

}
.headertop2 {
height: 38px;
width: 750px;
float: right;
background-image: url(../images/headertop2.jpg);
}
.ad {
float: right;
height: auto;
width: auto;
margin-right: 90px;
}
.contentbox2 {
height: 400px;
width: 600px;
float: right;
position: relative;
right: 2px;
top: -1px;
border: thin none #000000;


}
.ad2 {
float: left;
height: auto;
width: auto;
position: relative;
left: 10px;
}
.videos {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
height: auto;
width: auto;
float: right;
position: relative;
top: 10px;
right: 115px;
font-weight: bolder;





}
.newmusic {
top: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bolder;
position: relative;
left: 250px;
color: #000000;
font-size: 12px;




}
.newmusic2 {
height: 400px;
width: 300px;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: solid;
border-right-color: #FFFFFF;
position: relative;
top: -34px;
float: left;



}
.newmusic3 {
background-color: #99CCFF;
height: 300px;
width: 300px;
position: relative;
top: 34px;


}
.newvideos {
height: 300px;
width: 297px;
background-color: #FF6600;
float: right;
}
.videotitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
text-decoration: underline;
position: relative;
left: 25px;
}



Can someone help me out as to why this is not aligning right. I'm not that great at CSS and would be very appreciative if someone could help me out

Excavator
02-21-2007, 08:05 PM
Hello Jacobb123,
Everything in red in the code quote below needs to go somewhere else. DocType must be the first line of your code.


<?php
ob_start("ob_gzhandler");

session_start();
include("includes/top.php");
include("includes/conn.php");
?> <!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=iso-8859-1" />
<title>wetito.com</title>
<link href="css/layout

Jacobb123
02-21-2007, 08:08 PM
That didn't do it.

jlhaslip
02-21-2007, 08:23 PM
so, what is IE doing differently? and which Browser? IE6 or 7?

Jacobb123
02-21-2007, 08:28 PM
This is a screenshot if what is doing wrong.

http://www.wetito.com/myspace/IE.jpg

jlhaslip
02-21-2007, 08:33 PM
Looks to me like a case for some margin-left using an IE specific CSS file.
Didn't test it though.

Lots of topics about IE conditional statements around. There is a search box for the site and Google is your friend.

Arbitrator
02-21-2007, 08:46 PM
Look at this part of your code:



<!-- Top.php -->
<html>
<head>
<title>Labelfreeatists.com</title>
<META NAME="description" content="Label Free Artists, Sell Music, Download Music, Make new friends, Watch movies, download movies">
<Meta name="keywords" content="Music, Friends, Movies, Sell Music, Sell Movies, Sell Merchandise, Bands, Independent, Idie, Film festivals, Events,">
<meta name="title" content="Buddy Zone Version 1.5 - Run your own Social Networking Site with ease!">
<meta name="copyright" content="Copyright 2006, Vastal.com">
<META NAME="rating" content="SAFE FOR KIDS">
<META NAME="distribution" content="GLOBAL">
<META NAME="classification" content="Portal">
<META NAME="revisit-after" content="3 Days">
<META NAME="robots" content="index,follow">
<meta name="Creator" content="Wetito Media, LLC">
<meta name="Publisher" content="Label Free Artists.com">

<meta name="Author" content="Wetito Media, LLC">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/css.css" type=text/css rel=stylesheet>
<link href="styles/css_t.css" type=text/css rel=stylesheet>
<link href="styles/myspace_css.css" type=text/css rel=stylesheet>
<link rel="stylesheet" type="text/css" href="styles/css_profile.css">
</head>


<!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">
…That is not valid XHTML. You can’t put markup before the document type declaration. Code like this throws browsers into quirks mode where they’ll intentionally render things incorrectly; since this “incorrectness” takes different forms from browser to browser, this makes it much more difficult to create a cross-browser–compatible Web site. See the second resource below for information about quirks mode and use the last set of resources to ensure that your code is correct.

Related Resources (Copied/Pasted):

Recommended DTDs to Use in Your Web Document (http://www.w3.org/QA/2002/04/valid-dtd-list.html) provides a list of W3C document type (doctype) declarations that you can use in your documents. I’d recommend that you use HTML 4.01 Strict; if you’re up for more of a challenge or know XML, XHTML 1.0 Strict is also suitable.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/) provides information concerning standards‐compliance and quirks modes and which doctype declarations trigger which mode.
After you’ve added a doctype declaration, validating your document against it ensures that your (X)HTML code is valid according to the chosen doctype. Validation services include the Validome Validator (http://www.validome.org/) and the W3C Markup Validator (http://validator.w3.org/); I’d recommend the former since it catches errors with more precision (http://www.validome.org/lang/en/errors/ALL) than the official (latter) validator.

Excavator
02-21-2007, 08:55 PM
Good catch Arbitrator! I mistakenly assumed the code he posted was what we were working on.

Jacob123, are you putting that bit above the DocType or is the php include doing it?

Jacobb123
02-21-2007, 09:18 PM
I didn't even catch that. That was it and a couple of other tweeks I had to do. Thank you all so much