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
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    right column dropping with fixed layout

    ok so this is the site and it looks fine in ff but the right column is dropping in ie (no surprise)

    http://shiznit.no-ip.info/jmtools/index.htm

    the html is
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JM Tools - See why our tools kick ***!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css/jmtools.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="css/iestyle.css" type="text/css" />
    <![endif]-->
    </head>
    
    <body>
    <div id="main-wrap">
    	<div id="left-content">
    	<div id="header">
    		<img src="images/header.jpg" alt="J &amp; M Tool Incorporated" title="J &amp; M Incorporated" /><br />
    		<img src="images/centertopimage.jpg" alt="center top image" title="center top image" />
    	</div>
    	<div id="middleimage">
    	<p>5/8 12pt<br /><span class="pinktext">Early Spring 2007</span></p>
    	<p>13/16 12pt<br /><span class="pinktext">Summer 2007</span></p>
    	</div>
    	<div id="bottomimage">
    	<h1 class="centertext">"This is what other wrenches can't do!"</h1>
    	<h2>Why our tools kick ***!</h2>
    	<p class="kickass">The wrench will loosen and tighten plugs in the hardest to get at place that no other sparkplug tool can!!</p>
    	</div>
      </div>	
    	<div id="right-content"> <img src="images/right-column.jpg" class="right-column-tool-img" alt="The right tool for the tight plug" title="The right tool for the tight plug" />
    	<div id="address"><img src="images/address.jpg" /></div>
     </div>
    
    <div class="clearfix"></div>
    
    <div id="footer"><img src="images/footer.jpg" alt="J &amp; M Tool Incorporated" title="J &amp; M Tool Incorporated" /></div>
    
    </div> 
    
    </body>
    </html>
    and the css is
    Code:
    body {
    	background-color: #000000;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    }
    #main-wrap {
    	margin-right: auto;
    	margin-left: auto;
    	text-align: left;
    	width: 700px;
    	background-color: #000000;
    	background-image: url(../images/wrap-bg.jpg);
    	background-repeat: no-repeat;
    }
    #header {
    	width: 468px;
    }
    #left-content {
    	float: left;
    	width: 465px;
    	background-color: #000000;
    }
    #right-content {
    	text-align: right;
    	float: right;
    	width: 229px;
    }
    #footer {
    	background-color: #000000;
    	height: 33px;
    }
    .clearfix {
    	clear: both;
    }
    .right-column-tool-img {
    	text-align: right;
    	width: 182px;
    }
    #right-content p {
    	text-align: left;
    	float: right;
    	width: 182px;
    }
    #address {
    	text-align: right;
    	background-image: url(../images/address.jpg);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    	padding-top: 50px;
    }
    .middleimage {
    	background-color: #242424;
    	background-image: url(../images/centermiddle-image.jpg);
    	background-repeat: no-repeat;
    	background-position: right center;
    	width: 488px;
    	height: 107px;
    }
    #middleimage {
    
    	background-color: #242424;
    	background-image: url(../images/centermiddle-image.jpg);
    	background-repeat: no-repeat;
    	background-position: right center;
    	width: 488px;
    }
    #middleimage p {
    	padding: 5px;
    }
    .pinktext {
    	color: #FF8400;
    }
    .whitetext {
    	font-size: 10px;
    }
    #bottomimage {
    	background-image: url(../images/centerbottomimage.jpg);
    	background-repeat: no-repeat;
    	height: 239px;
    	width: 488px;
    }
    .centertext {
    	text-align: center;
    	padding: 25px;
    
    }
    h1 {
    	font-size: 18px;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    }
    .kickass {
    	font-weight: bold;
    	padding-right: 25px;
    	padding-bottom: 25px;
    	padding-left: 25px;
    }
    h2 {
    	color: #ff8400;
    	padding: 25px;
    	font-weight: bold;
    	font-size: 16px;
    }
    I'm at my wits end...

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    What is in iestyle.css? Since that overrides the standard stylesheet for IE6 and earlier it is probably something in there.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    didnt dig to deep but why:
    Code:
    #right-content {
    	text-align: right;
    	float: right;
    	width: 229px;
    }
    when your images are only 182px? try chopping down your #right-content to 182 and see how it works. Since your floating the 3px bug takes effect and giving a width wider than it seems to need to be might be the first issue.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Float the #right-content to the left instead and give it a left margin of 6px.
    Code:
    #right-content {
    	text-align: right;
    	float: left;
    	width: 229px;
            margin-left:6px;
            display:inline;
    }
    Felgall is right. Two of the declarations in your iestyle.css stylesheet aren't even in your document and the negative margins aren't needed either.

    The 3px bug doesn't take effect because the #left-content is also floated. The 3px bug would come about if the #left-content was not floated rather than given a right margin.

    After taking a closer look it would appear that your imaes in the #left-content div are wider than the width of that div. Change your background color from black to a more dominant color and notice how the color stops before the width of the content.

    Changing the width like harbinger said will also make the right column come up into place.
    Last edited by _Aerospace_Eng_; 12-19-2006 at 07:07 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I missed the wider image - I thought I had cut them to 488 but apparently one slipped by at 493

    I left the right column floated right and didn't use the 6px left margin

    I put in the iestyle.css bit after I couldn't get the right column to display properly - it has since been removed

    I appreciate your patience - that was the first time I ever sliced up a psd into css and now it's been quite awhile since I've done a fixed layout

    when I put through the validator an error came up
    http://validator.w3.org/check?uri=ht...doctype=Inline

    is that because I'm using the strict doctype? if the map is going to be used should I use a transitional doctype instead?

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harlequin2k5 View Post
    when I put through the validator an error came up...
    is that because I'm using the strict doctype? if the map is going to be used should I use a transitional doctype instead?
    I would take the validation result at face value first - then work backwards.
    What it appears to be saying, is that <map > isn't allowed to be a direct child of < body> ?

    ...also I believe the name identifier isn't valid in the strict doctype?

    Gary


  •  

    Posting Permissions

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