...

View Full Version : right column dropping with fixed layout



harlequin2k5
12-19-2006, 05:35 AM
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

<!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

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...

felgall
12-19-2006, 06:51 AM
What is in iestyle.css? Since that overrides the standard stylesheet for IE6 and earlier it is probably something in there.

harbingerOTV
12-19-2006, 06:54 AM
didnt dig to deep but why:


#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.

_Aerospace_Eng_
12-19-2006, 06:58 AM
Float the #right-content to the left instead and give it a left margin of 6px.

#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.

harlequin2k5
12-19-2006, 02:52 PM
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=http%3A%2F%2Fshiznit.no-ip.info%2Fjmtools%2Findex.htm&charset=%28detect+automatically%29&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?

Graft-Creative
12-19-2006, 06:00 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum