...

View Full Version : IE moving nested div



Keleth
11-27-2008, 04:53 PM
I was hoping for some help... in addition to me realizing today that IE doesn't bother to allow attribute selectors, meaning I have to go back and recode a bunch of stuff with classes and whatnot, for the life of me, I cannot figure out why in IE, I have a graphic shifting 3px to the right. Obviously, this is cryptic, so links abound! Note, this fails in both IE6 and 7.

http://mafia.rhovisions.com

I was hoping someone could help me figure out why the graphic in the main content body is skewed right. I've been at it for a while and it refuses to work.

Also, how much would it cost to have a virus written to eliminate all existence of IE? *sobs at the lack of standards with IE*

Excavator
11-27-2008, 05:55 PM
Hello Keleth,
I'm not sure what's causing that... could it be the stuff in front of the DocType?
Array
(
)<!DOCTYPE HTML PUBLIC "-//W3C//...

Anyway, this works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mafia v2</title>
<style type="text/css">
/*
Mafia v2.0 Main CSS Stylesheet
Created by RhoVisions, designer Rohit Sodhia
*/

body, td, input, select, textarea {
font: 13px "Arial";
color: #FFF;
}

body {
background: #222;
padding: 0px 0px;
margin: 0px 0px;
text-align: center;
}

div {
text-align: left;
}

input, textarea {
padding: 2px 3px;
}

input[type="text"], input[type="password"], select, textarea {
background: #000;
border-top: 1px solid #660;
border-left: 1px solid #660;
border-bottom: 1px solid #AA0;
border-right: 1px solid #AA0;
}

select {
margin-top: 1px;
}

button[type="submit"] {
background: url(http://mafia.rhovisions.com/images/submit.jpg) top left;
border: none;
width: 80px;
height: 26px;
}

button[type="submit"]:hover {
background: url(http://mafia.rhovisions.com/images/submit.jpg) bottom left;
}

button[type="submit"].update {
background: url(http://mafia.rhovisions.com/images/update.jpg) top left;
}

button[type="submit"].update:hover {
background: url(http://mafia.rhovisions.com/images/update.jpg) bottom left;
}

hr {
border: none;
height: 1px;
color: #FFF;
background-color: #FFF;
}

table {
width: 100%;
}

td {
vertical-align: top;
padding: 2px 2px;
}

p {
padding: 0px;
}


/* Links */
a, a:visited, a:active {
text-decoration: none;
color: #A00;
}

a:hover {
text-decoration: underline;
}


/* IDs */
#headerContent, #mainBody {
width: 795px;
margin: 0px auto;
}

#header {
background: url(http://mafia.rhovisions.com/images/headerBG.jpg) top left repeat-x;
height: 140px;
text-align: center;
}

#header #headerContent {
text-align: right;
}

#header #headerContent img {
margin-right: 20px;
}

#menu {
float: left;
width: 170px;
}

#content {
background: url(http://mafia.rhovisions.com/images/bodyBG.jpg) top left repeat-y;
margin-left: 170px;
}

#content #contentBody {
background: url(http://mafia.rhovisions.com/images/bodyTop.jpg) top left no-repeat;
height: auto !important;
height: 150px;
min-height: 150px;

padding: 25px 25px 10px;
}

#footer {
background: url(http://mafia.rhovisions.com/images/bodyBottom.jpg) bottom left no-repeat;
padding: 0px 30px;
padding-right: 60px;
padding-bottom: 25px;
text-align: right;
clear: both;
}

#footer #footerContact {
float: right;
}

#footer #footerCR {
padding-left: 30px;
}


/* Menu */
#menu .menuSet {
background: url(http://mafia.rhovisions.com/images/menuBG.jpg) top left repeat-y;
}

#menu .menuContent {
background: url(http://mafia.rhovisions.com/images/menuTop.jpg) top left no-repeat;
padding: 25px 20px;
padding-bottom: 0px;
}

#menu .menuTitle {
text-align: right;
font-weight: bold;
padding-right: 5px;
}

#menu ul {
padding: 0px;
padding-left: 20px;
padding-top: 5px;
margin: 0px;
}

#menu ul li {
list-style: url(http://mafia.rhovisions.com/images/dash.jpg);
}

#menu .menuFooter {
background: url(http://mafia.rhovisions.com/images/menuBottom.jpg) bottom left no-repeat;
height: 30px;
}


/* Classes */
.tr {
padding: 5px 0px;
}

.noFloat {
float: none;
}

.textLabel {
padding-top: 3px;
}
.new {
}

.pageTitle {
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin: .75em 0px;
}

.showDiv {
display: block;
}

.hideDiv {
display: none;
}


/* Pages */
#page_register .label {
float: left;
width: 195px;
text-align: right;
padding-right: 10px;
}

#page_register .textfield {
float: left;
}

#page_register .textfield input {
width: 150px;
}

#page_register .alert {
margin-left: 370px;
width: 190px;
height: 20px;
font-size: 85%;
color: #C00;
text-align: left;
}

#page_register .alert div {
padding-top: 5px;
}


#page_createGame .break, #page_gameAdmin .break {
color: #444;
background-color: #444;
width: 90%;
margin: .75em auto;
}

#page_createGame .label, #page_gameAdmin .label {
float: left;
width: 180px;
text-align: right;
}

#page_createGame .textfield, #page_gameAdmin .textfield {
float: none;
margin-left: 200px;
}

#page_createGame .textfield div, #page_gameAdmin .textfield div {
border-left: 1px solid #FFF;
padding: 3px 0px;
padding-left: 20px;
}

#page_createGame #mainOptions .label, #page_gameAdmin #mainOptions .label {
padding-top: 6px;
}

#page_createGame #mainOptions div.tr:hover .textfield div, #page_gameAdmin #mainOptions div.tr:hover .textfield div {
border-left-color: #880;
}

#page_createGame #typeList, #page_gameAdmin #typeList {
padding-top: 4px;
}

#page_createGame #typeList div, #page_gameAdmin #typeList div {
padding: 1px 0px;
padding-left: 15px;
}

#page_createGame #numPlayerOptions .sectionTitle, #page_gameAdmin #numPlayerOptions .sectionTitle {
text-align: center;
font-weight: bold;
margin-bottom: .5em;
}

#page_createGame #numPlayerOptions .textfield, #page_gameAdmin #numPlayerOptions .textfield {
float: left;
}

#page_createGame #numPlayerOptions .label, #page_gameAdmin #numPlayerOptions .label {
margin-left: 0px;
width: 170px;
}

#page_createGame #numPlayerOptions .textfield, #page_gameAdmin #numPlayerOptions .textfield {
margin-left: 0px;
width: 30px;
padding-left: 10px;
}

#page_createGame #numPlayerOptions .secondOption, #page_gameAdmin #numPlayerOptions .secondOption {
width: 150px;
}

#page_createGame #numPlayerOptions .noFloat, #page_gameAdmin #numPlayerOptions .noFloat {
float: none;
margin-left: 360px;
}

#page_createGame #playerNums, #page_gameAdmin #playerNums {
border-left: none;
}

#page_createGame #submitButton, #page_gameAdmin #submitButton {
text-align: center;
margin-top: 1em;
}


#page_betaReport input[type=text] {
width: 200px;
}

#page_betaReport .textLabel {
width: 150px;
text-align: right;
float: left;
padding-top: 3px;
}

#page_betaReport .inputField {
float: left;
margin-left: 10px;
}

#page_betaReport .alert {
margin-left: 380px;
padding-top: 5px;
width: 190px;
height: 20px;
font-size: 85%;
color: #C00;
text-align: left;
}
</style>
</head>
<body>
<div id="header"><div id="headerContent"><img src="http://mafia.rhovisions.com/images/headerBG.jpg"></div></div>
<div id="mainBody">
<div id="menu">
<div class="menuSet">
<div class="menuContent">
<div class="menuTitle">Main Menu</div>
<ul>
<li><a href="http://mafia.rhovisions.com/">Home</a></li>
<li style="margin-bottom: 0.5em;"><a href="http://mafia.rhovisions.com/betaReport">Beta Report</a></li>
<li><a href="http://mafia.rhovisions.com/register">Register</a></li>
<li><a href="http://mafia.rhovisions.com/login">Login</a></li>
</ul>
</div>
<div class="menuFooter">&nbsp;</div>
</div>
</div>
<div id="content">
<div id="contentBody">
</div>
<div id="footer">
<div id="footerContact">
<a href="mailto:contact@mafia.rhovisions.com">Contact us</a>
</div>
<div id="footerCR">
2008 <a href="http://rhovisions.com/" title="RhoVisions">RhoVisions.com</a>
</div>
</div>
</div>
</div>
</body></html>

Keleth
11-27-2008, 06:58 PM
I'm kind of embarrassed it was something that simple... Thank you very much... I had a print_r while I was developing the PHP to check some variables, and forgot to shut it off... I was so used to seeing it, I didn't even notice... thanks a lot!

Keleth
11-27-2008, 07:23 PM
Actually, looking back on it, the site is completely borked in IE6... not only is the graphic 3px moved, but of course, IE6 didn't use attribute selectors, so a bunch of stuff doesn't show up right...

Anyone know about the 3px move in IE6? And secondly, does anyone know how prevalent IE6 still is? I know its good methodology to code for all browsers... but... IE6 is doing a number on me...

jhaycutexp
11-28-2008, 06:43 AM
first you can remove the extra spaces/margins/paddings in your browser like putting this..



*{margin:0;
padding:0;
}


if that don't work, there always ie hacks.. hehe..

abduraooft
11-28-2008, 09:00 AM
Hi Keleth,

Anyone know about the 3px move in IE6? And secondly, does anyone know how prevalent IE6 still is?
Well, to solve the alignment issue, change your CSS like

#content {
..........
......
height:1%;
} With that said, keep in mind that, most of the issues of IE would be due to hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html)

but of course, IE6 didn't use attribute selectors, so a bunch of stuff doesn't show up right...
IE is not capable to recognise selectors based on attributes. A feasible solution is to apply an extra class to those elements, say


<input type="text" class="text" .../>
<input type="password" class="password" .../>

<input type="submit" class="button" .../>
<input type="button" class="button" .../>

and then apply the CSS based on these classes as normal, say

input.text{

}
input.button{

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum