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
    Registered User
    Join Date
    Oct 2007
    Posts
    55
    Thanks
    4
    Thanked 2 Times in 2 Posts

    IE 6 Compatibility Issue

    i'm very sure it has something to do with width. i'm not sure what is making my calculations off. the left column flows above/into the right when the width is over it's limit. here's the page: http://datawave.medicatedsquid.com/. here's the html code:

    Code:
    <!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>
    	<title>Data Wave</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" href="design/style_sheets/w3c_style.css" type="text/css" />
    	<!--[if IE 6]>
    	<link rel="stylesheet" href="design/style_sheets/microsoft_style.css" type="text/css" />
    	<![endif]-->
    </head>
    <body>
    	<div id="wrap">
    		<div id="header">
    		<a href="index.php"><img src="design/images/header.jpg" alt="" /></a>
    		</div>
    			<div id="menu">
    			<a href="index.php"><img src="design/images/home_button.jpg" alt="" /></a><a href="about.php"><img src="design/images/about_button.jpg" alt="" /></a><a href="contact.php"><img src="design/images/contact_button.jpg" alt="" /></a><img src="design/images/menu_end.jpg" alt="" />
    			</div>
    				<div id="content">
    					<div id="left_column">
    					</div>
    						<div id="right_column">
    							<?php
    							include("global_codes/right_column_content.php");
    							?>
    						</div>
    				</div>
    					<div id="footer">
    					<?php
    					include("global_codes/footer_content.php");
    					?>
    					</div>
    	</div>
    </body>
    </html>
    here's the css code:

    Code:
    body {
    	background: #FFFFFF;
    	margin: 0px;
    }
    
    div#wrap {
    	margin: auto;
    	width: 750px;
    }
    
    div#header {
    	height: 89px;
    	width: 750px;
    }
    
    div#header a img {
    	border: none;
    }
    
    div#menu {
    	height: 71px;
    	width: 750px;
    }
    
    div#menu a img {
    	border: none;
    }
    
    div#content {
    	margin: 5px 0px 0px 0px;
    	width: 750px;
    }
    
    div#content:after {
    	clear: both;
    	content: '';
    	display: block;
    }
    
    div#left_column {
    	float: left;
    	width: 500px;
    }
    
    div#left_column h1 {
    	color: #116D3C;
    	font-family: Arial, Sans;
    	font-size: 20px;
    	margin: 0px 0px 5px 0px;
    }
    
    div#left_column p {
    	color: #000000;
    	font-family: Tahoma, Sans;
    	font-size: 12px;
    	margin: 0px 0px 12px 0px;
    	text-indent: 10px;
    }
    
    div#left_column span {
    	color: #000000;
    	font-family: Tahoma, Sans;
    	font-size: 12px;
    }
    
    div#left_column span.red {
    	color: #FF0000;
    }
    
    div#left_column a {
    	color: #2B6A93;
    }
    
    div#left_column a:hover {
    	color: #000000;
    }
    
    div#left_column input {
    	background: url('../images/input_background.jpg') repeat-x;
    	border: 1px solid #000000;
    	color: #333333;
    	font-family: Arial, Sans;
    	font-size: 11px;
    	padding: 3px;
    	width: 150px;
    }
    
    div#left_column input.submit {
    	background: #BBBBBB;
    	color: #000000;
    	font-weight: bold;
    	width: 100px;
    }
    
    div#right_column {
    	float: right;
    	width: 240px;
    }
    
    div#right_column h1 {
    	color: #000000;
    	font-family: Arial, Sans;
    	font-size: 15px;
    	margin: 0px 0px 5px 0px;
    }
    
    div#right_column p {
    	color: #333333;
    	font-family: Tahoma, Sans;
    	font-size: 11px;
    	margin: 0px;
    }
    
    div#log_in_module {
    	background: #CCCCCC;
    	padding: 10px;
    	width: 220px;
    }
    
    div#footer {
    	border: solid #000000;
    	border-width: 3px 0px 0px 0px;
    	margin: 10px 0px 0px 0px;
    	padding: 5px;
    	text-align: center;
    	width: 740px;
    }
    
    div#footer span {
    	color: #000000;
    	font-family: Arial, Sans;
    	font-size: 11px;
    }

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    * {
            margin:0;
            padding:0;
    }
    img {
            vertical-align:bottom;
    }
    body {
    	background: #FFFFFF;
    	margin: 0px;
            font:0.7em/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

  • #3
    Registered User
    Join Date
    Oct 2007
    Posts
    55
    Thanks
    4
    Thanked 2 Times in 2 Posts
    why exactly did you change my font? also, that didn't even help.

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by ConnorMHB View Post
    why exactly did you change my font? also, that didn't even help.
    Obviously he is trying to help you with some things you did incorrectly. He might not have solved all your problems but he did address a few.

    1.) your html and body in your css needs to have the padding and margins clarified. Which fang did. Though I would have done it slightly differently.

    2.) as far as the font. Just declare ONE (1) time in your body and you won't have to make references to it in every other ID tag. Its a waste because not only does it cause more clutter but it also increases the file size of the css when its not necessary.

    here is another way of declaring your html and body in your css.

    Code:
    html, body {
    margin:0px;
    padding:0px;
    background:#FFF;
    font:0.7em/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    body {
    padding:0px;
    }

    -trigger

  • #5
    Registered User
    Join Date
    Oct 2007
    Posts
    55
    Thanks
    4
    Thanked 2 Times in 2 Posts
    i'm very aware of that. i do things a bit differently than most people regardless of the convenience of file and code size. what i don't understand is why the columns don't come out right by my calculations.

    is it actually "required" to have your html, and body elements specified to a certain margin and amount of padding?
    Last edited by ConnorMHB; 10-28-2007 at 09:49 PM.

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    You could also reduce some clutter by defining the principal Text colour in the body and then alter it in only those that require changing.

    The universal selector (*) is used to eliminate all margins and padding to avoid conflicts with the way various browsers handle padding and margin. Like the colour comment above, simply add the required amount of margin/padding where they are needed. Makes coding easier (cross-browser) .


  •  

    Posting Permissions

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