On 9/24/06, Larry Lyons <[EMAIL PROTECTED]> wrote:
>> Hi Guys,
>>
>> I'd appreciate it if you could take a couple of minutes and go through this
>> site I've been working on. Any comments appreciated:
>>
>> http://www.surfatas.com/index.cfm
Then Casey Dougall wrote::
>>better do some work on your table or divs or what ever your using.
>>shrinking the windows makes your site screwed up.
On that note, I've made a few alterations that will fix this (at least
to some degree), but first a couple of other minor points.
You can use the shorthand method on elements such as padding, margin,
and background without repercussion. So the following ...
#header {
height:144px;
width:100%;
position:relative;
top:0; left:0;
background-color:transparent;
background-image: url(/images/headerBG.jpg);
background-repeat:no-repeat;
background-position: right top;
text-align:center;
}
.... would become
#header {
height:144px;
width:100%;
position:relative;
top:0; left:0;
background: transparent url(/images/headerBG.jpg) no-repeat top right;
text-align:center;
}
See <URL:http://www.htmldog.com/guides/cssintermediate/multivalue/>.
If you're using DW or some such other editor, you can and should set
these preferences in the program.
Next, you have these rules in your content and contentColumn divs:
float:left;/**/
top: 0;
left: 0;
but left and top are only properties of absolute and relative
positioning, serving no function here and should be removed. Also, in
your #contentColumn you have re specified margin and padding:
#contentColumn{
float:left;
top: 0; left: 0;
/*min-width:60%;*/
max-width:500px;
width:470px;
position:relative;
margin: 0px;
padding:0px;
padding-left:5px;
padding-right: 5px;
margin-left:5px;
height:auto;
vertical-align:top;
font-size:.85em;
}
This entire rule can be rewritten like so:
#contentColumn{
float:left;
/*min-width:60%;*/
max-width:500px;
width:470px;
position:relative;
padding: 0 5px;
margin-left:5px;
vertical-align:top;
font-size:.85em;
}
Now onto the breaking layout. Change your #contentColumn to the following:
#contentColumn{
margin: 0 255px 0 155px;
padding-left: 5px;
padding-right: 5px;
vertical-align: top;
font-size: .85em;
}
and add ...
/*hide from ie mac\*/
* html #contentColumn {height: 1%; margin-left: 5px;}
/**/
.... which prevents the 3px jog from taking effect in IE (since I've
altered the contentColumn to use margins only for positioning this
allows it to become liquid, but in doing so I had to remove the float
since floats always require a width (according to the specs) and this
then triggers that IE bug. If you don't like the holly hack then feel
free to use conditional comments. I see you've encountered this bug
elsewhere on your site so this should be nothing new.
From #rightColumn, remove all of these:
margin: 0;
margin-left:2px;
padding:0;
padding-left:2px;
None of them are required for your layout. You are also using a
min-height of 400px on most of your layout divs for some reason. I
understand why this is sometimes required, and I use it myself from time
to time, but here there is no need. Remove them all and add a left clear
to your footer to keep that below everything.
#footer {
text-align: center;
clear: left;
/*clear: both;*/
padding:2px 0 5px 0;
margin:2px 0 5px 0;
width:100%;
}
And finally, in your html, change the source order so that the
#rightColumn comes before your #contentColumn:
<div id="content">
<div id="leftNav">
<p> <br /></p>
<ul>
<li><a href="http://www.surfatas.com/pointOfUse/organic.cfm";>Organic
Compounds</a></li>
<li><a
href="http://www.surfatas.com/pointOfUse/dissolvedMetals.cfm";>Dissolved
Metals</a></li>
</ul>
<p> </p>
<p> </p>
</div>
<div id="rightColumn">
<img src="industrial.cfm_files/rightSideBG.jpg" alt="right side fluff"
title="right side image" border="0"/>
</div>
<div id="contentColumn">
<a name="skipContent"></a>
<h3>Industrial, Wastewater</h3>
<p>Industrial water contaminant reduction poses unique challenges,
particularly dependent upon targeted contaminants, concentration
levels, and the relative cost/benefits to their capture and disposal or
recovery. From contaminated earth remediation or ground water concerns
to precious metal recovery in mining and chemical processing, our
extensive knowledge of material performances gives our clients the
confidence to focus their efforts on what they know best.</p>
<p>Surfatas brings a bundle of technologies and materials to your
situation. Our team can work with your partners, vendors, and suppliers
to complement what is already in place. Of course, we can also support
your efforts in developing an entirely new solution to your problems,
using the latest in technologies, additives, and materials. Surfatas
technologies are effective at parts per thousand or parts per million.
They can be either broad in spectrum or highly specific. We understand
other characteristics of the fluid will play a factor as well. The
Surfatas technologies are designed to function in a wide variety of
conditions as well.</p>
<p>What kind of contaminants is your team challenged with?</p>
<div id="horizontalList"><ul><li><a
href="http://www.surfatas.com/pointOfUse/organic.cfm"; title="Organic
Compounds">Organic Compounds</a></li><li><a
href="http://www.surfatas.com/pointOfUse/dissolvedMetals.cfm";
title="Dissolved Metals">Dissolved Metals</a></li></ul></div>
<p> </p>
</div>
</div>
If you prefer that your content come nearer the top of your source, then
use one of these layouts instead:
<URL:http://blog.html.it/layoutgala/>
And I just noticed in your leftnav you also seem to be using empty
paragraphs above and below your navigation for spacing. No need for this
at all. Simply apply either a top and bottom margin (or padding) on the
ul (or even the leftnav itself would work in this situation) and remove
the empty paragraphs.
Hopefully I haven't forgotten anything critical to making this work.
Tested locally on IE6, Firefox 1.5.07, and Opera 9. If none of this
makes sense just write me off-list.
HTH
Mark
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four
times a year.
http://www.fusionauthority.com/quarterly
Archive:
http://www.houseoffusion.com/groups/CF-Community/message.cfm/messageid:215936
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.5
