PDA

View Full Version : [RESOLVED] plz plz plz help :)

Bucfan327
12-05-2007, 05:51 PM
I'm changing my question :) Ok, i have my css/template/and all other pages valid in the strict doctype or however you would say that, but the only problem i'm left with is this stupid class=middle is not working in IE, I have been at this for 2 days now trying to mess with everything and i can't figure it out :(

It works perfect in Fx:

* {
margin : 0px;
padding : 0px;
}
body {
margin : 0px;
padding : 0px;
color : #000000;
background-color : #ffffff;
font-weight : 400;
font-size : 8pt;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a {
color: #006cff;
background-color : inherit;
text-decoration : none;
}
a:visited {
color : #006cff;
}
a:active, a:hover {
color : #000000;
}
.holder {
width : 1003px;
margin : 0px auto;
}
.top {
color : #ffffff;
font-weight : 700;
font-size : 12pt;
background-color : #AEC1EE;
height : 48px;
text-align : center;
margin : 10px 0px 10px 0px;
}
.nav {
list-style-type : none;
margin : 0px 0px 0px 0px;
padding : 0px;
width : 150px;
float : left;
line-height: 25pt
}
.nav li {

margin : 0px 0px 1px 0px;
padding : 0px;
text-align : center;
font-size : 10pt;
font-weight: 700;
}
.nav li a:link, .nav li a:visited {
color : #000000;
background-color: inherit;
text-decoration : none;
display : block;

}
.nav li a:hover, .nav li a:active {
color : inherit;
background-color : #EEEEEE;
text-decoration : none;
}
.nav .left {
color : inherit;
background-color : #AEC1EE;
}
.middle {
background-color : #c6deff;
width : 665px;
float: left;
margin : 0px 0px 0px 10px;
}
.middle .rght {
float: right;
color: inherit;
}
.middle .left {
float: left;
color: inherit;
}
.right {
width : 165px;
background-color: blue;
float : right;
color: black;
font-size: 13pt;
font-weight: 400;
margin : 0px 5px 0px 0px;
text-align: center;
}
.ads {
width: 300px;
height: 250px;
background-color: black;
color: white;
margin : 0px 0px 10px 25px;
float: left;
}
.ads2 {
width: 300px;
height: 250px;
background-color: red;
color: white;
margin : 0px 0px 10px 40px;
float: left;
}
.leftbar {
float: left;
width: 150px;
clear: left;
list-style-type : none;
margin : 0px 0px 0px 0px;
padding : 0px;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #0344dc;
background-color: #ffffff;

}
.leftbar li {
height : 18px;
margin : 0px 0px 10px 0px;
padding : 0px;
text-align : left;
font-size : 12pt;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #AEC1EE;
}
.leftbar li a:link, .leftbar li a:visited {
color : black;
background-color : inherit;
text-decoration : none;
display : block;
height : 18pt;
}
.leftbar li a:hover, .leftbar li a:active {
color : blue;
text-decoration : none;
background-color : inherit;
}
.layout {
border-bottom-style: solid;
border-bottom-width: 4px;
border-bottom-color: #AEC1EE;
}
trollmannen
12-05-2007, 08:19 PM
Ok ok, calm down, I'm sure we can fix this as well.

What exactly is not working? Is it in the wrong place? Or is it something else, would be nice to know in order to help you. The css itself does not validate, I get one parse error and one attrib error on it. You might want to look for contradicting values and check the spelling of your class names as well.
Bucfan327
12-05-2007, 08:30 PM
I'm calm lol, I dont see how it could be in the wrong place as it works in Fx, and when i validate the css, it has no errors for me :/

is there any reason that i am not allowed to name a class middle? ill try that now

here is my index:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>


<div class="holder">
<p class="top"><a href="">Myspace Layouts!</a> | <a href="">TEST</a> | <a href="">TEST</a> | <a href="">TEST</a></p>



<ul class=nav>
<li class=left><a href="index.php">HOME</a></li>
<li class=left><a href="layouts.php">LAYOUTS!</a></li>
<li class=left><a href="">CURSORS</a></li>
<li class=left><a href="">GRAPHICS</a></li>

<li class=left><a href="">GENERATORS</a></li>
<li class=left><a href="">CODES</a></li>
<li class=left><a href="">VIDEOS</a></li>
<li class=left><a href=load.php>Upload!</a></li>
</ul>




<div class=ads>test</div>
<div class=ads2>test</div>


<div class=right>
<p>test!</p>
<p><a href=""><img src ="apple.jpg" width="161" height="500" alt="Error"></a></p>
<p><a href=""><img src ="apple.jpg" width="161" height="500" alt="Error"></a></p>


</div>






<ul class=leftbar>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>

<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>

<li class=leftbar><a href="">Myspace junk!</a></li>
<li class=leftbar><a href="">Myspace junk!</a></li>

</ul>






































</div>

<div class="middle">

<p>New Myspace Codes: <a href="">Enlarge Top Friends Pictures</a>, <a href="">Tiny myspace Profile</a></p>
<br>

<p class=rght>This is a new layout! check<br>it out here</p>
<div class=rght><a href=""><img src="http://img.freecodesource.com/pages/myspacegenerators/pic/mini-comment-box-thumb.gif" width="90" height="44" alt="Error"></a></div>

<div class=left><a href=""><img src="http://img.freecodesource.com/pages/myspacegenerators/pic/mini-comment-box-thumb.gif" width="90" height="44" alt="Error"></a></div>
<p class=left>This is a new layout! check<br>it out here</p>

</div>



</body>
</html>
hieuky
12-05-2007, 10:39 PM
uhmm... maybe you need to change the whatever alignment code to <p align=lalala>abcdef</p> and dont put the word "middle" in that p align code. just put "center" instead.

good luck.
ngaisteve1
12-05-2007, 10:43 PM
Bucfan327, I would suggest you to re-structure your div.

Since I am not that good at css, so I will redirect you to this website, http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Excellent stuff there!
Bucfan327
12-06-2007, 11:10 AM
uhmm... maybe you need to change the whatever alignment code to <p align=lalala>abcdef</p> and dont put the word "middle" in that p align code. just put "center" instead.

good luck.

Nope :( lol, it goes to the bottom right of the page instead of bottom left lol, any other suggestions?
Excavator
12-06-2007, 01:13 PM
Hello Bucfan327,
If you clear your floats so .holder encloses all of them, you will see that .middle is placed outside of .holder.

Add a background color so you can see what's happening, like this:
.holder {
width : 1003px;
background: #cccccc; /*for debugging purposes*/
margin : 0px auto;
overflow: auto; /*to clear your floats*/
}

Edit your markup to place .middle inside of .holder

Read about clearing floats here. (http://www.quirksmode.org/css/clearing.html)
Bucfan327
12-06-2007, 04:28 PM
fantastic lol, that was the problem, along with a few conflicts in my template.php but that helped tons to solve the problem thanks so much!!!

btw ive never even seen that overflow code :p