Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts

    IE moving nested div

    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*

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Keleth,
    I'm not sure what's causing that... could it be the stuff in front of the DocType?
    Code:
    Array
    (
    )<!DOCTYPE HTML PUBLIC "-//W3C//...
    Anyway, this works:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Keleth (11-27-2008)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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...

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    first you can remove the extra spaces/margins/paddings in your browser like putting this..

    Code:
    *{margin:0;
       padding:0;
      }
    if that don't work, there always ie hacks.. hehe..

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    #content {
    	..........
    	......
    	height:1%;
    }
    With that said, keep in mind that, most of the issues of IE would be due to hasLayout
    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

    Code:
    <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
    Code:
    input.text{
    
    }
    input.button{
    
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •