Dreamweaver - Re: Absolute positioning vs. float: Neither will work in

Author

Re: Absolute positioning vs. float: Neither will work in

Chuckdesign

2006-02-07, 10:43 pm

Thanks, Osgood and Murray! (A few of those CSS IDs are for elements I haven't
added back in yet, but yes, there probably is too much code there nonetheless.)

For my Float test (which I think is the way to go), I tried putting the
graphics in the columns, and that helps a lot but still looks uneven from
IE/Windows to Firefox to Safari:

http://www.sullivancreative.com/paa.../services2.html

In an alternate approach, I left the pictures outside the columns and applied
a negative margin to my leftcol body text, and that magically knocked
everything into place beautifully in IE as well as Firefox and Safari:
http://www.sullivancreative.com/paa...9/services.html

Regardless of which method I use, it still looks like a mess in IE/Mac. I
think I may need to resort to a hack for that, which I'm not looking forward to.

Chuckdesign

2006-02-07, 10:43 pm

Osgood,

I'll happily refer to your posted code, but where do I find it? I'm not familiar with how to download your code.

Thanks,
Chuck

osgoodosgood

2006-02-07, 10:44 pm

I dunno if this is going to work but i'll try and attach the 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Peter Arnold Associates | Services</title>

<script type="text/javascript">

</script>
<style type="text/css">
/* Text
----------------------------------------------- */
p {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #666;
}
li {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
padding: 0 0 5px 0;
color: #666;
}

.strongblue {
font-weight: bold;
color: #230358;
}
a:link, a:visited {
font-weight: normal;
color: #230358;
text-decoration: none;
}
a:hover {
font-weight: normal;
color: #C3103B;
text-decoration: underline;
}
a:active {
font-weight: normal;
color: #C3103B;
text-decoration: underline;
}
.footer {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
color: #666;
padding: 10px 0 0 20px;
}

/* Positioning
----------------------------------------------- */

body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
background: #fff;
}
#wrap {
min-width: 775px;
max-width: 900px;
width: 800px;
margin-left: 40px;
}
#header {
margin: 0;
}
#leftcol {
float: left;
width: 465px;
margin: 0;
}
#leftcol img {
margin-left: -40px;
}
#leftcol div {
padding: 0;
}
#rightcol {
width: 310px;
padding: 0px;
float: left;
}
#footer {
clear: both;
margin: 0 10px 10px 50px;
background: url(images/home/homefooter.jpg) repeat-x left;
width: 95%;
max-width: 95%;
}
#titlename {
float: left;
clear: both;
}
#titlepic {
float: left;
clear: none;
}
div#mainimage-right {
padding: 0 0 24px;
float: left;
position: absolute;
top: 70px;
left: 465px;
}
div#clearimage {
clear: left;
float: left;
}
skinny#li {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
padding: 0 1000px 5px -50px;
color: #666;
float: left;
margin: 0;
}
#subnav {
position:absolute;
left:271px;
top:106px;
width:132px;
height:34px;
z-index:1;
overflow: visible;
}
/* Navigation
----------------------------------------------- */
#nav {
position: absolute;
margin: 0;
padding: 33px 0 0 20px;
list-style: none;
background: url(images/home/nav_rule.gif) repeat-x bottom left;
left: 377px;
width: 50%;
min-width: 700px;
}
#nav li {
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 80%;
}
#nav a {
float: left;
display: block;
margin: 0 3px 0 0;
padding: 4px 8px;
color: #FFF;
text-decoration: none;
border: 1px solid #230358;
border-bottom: none;
background: #230358 url(images/home/button-offback.jpg) repeat-x top left;
}
#nav a:hover, body#services #t-services a, body#clients #t-clients a,
body#about #t-about a, body#contact #t-contact a {
color: #C3103B;
text-decoration: none;
border: 1px solid #230358;
border-bottom: none;
background: #fff url(images/home/button-onback.jpg) repeat-x top left;
}
h3 {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 15px;
font-weight: bold;
color: #180D5A;
}
h4 {
padding-bottom: 3px;
font-size: 11px;
font-weight: normal;
color: #666666;
padding-top: 9px;
padding-right: 0px;
padding-left: 0px;
}
.clientquote {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #656396;
}

</style>
</head>

<body id="services">
<a name="top" id="top"></a>
<div id="clearimage">
<a href="index.html"><img src="images/home/paa-homelogo.gif" alt="Peter
Arnold Associates" width="397" height="57" hspace="0" vspace="0" border="0"
/></a>
</div>
<ul id="nav">
<li id="t-intro"><a href="index.html">Introduction</a></li>
<li id="t-services"><a href="/">Services</a></li>
<li id="t-clients"><a href="clients.html">Clients</a></li>
<li id="t-about"><a href="about.html">About Us</a></li>

<li id="t-contact"><a href="contact.html">Contact</a></li>
</ul>
<br style="clear: both;" />
<div id="wrap">
<div id="leftcol">
<img src="images/services.gif" alt="Services" width="465" height="69" />
<div>

<p>As partners with our clients, we are an extension of their
marketing department, providing services that map directly
to their business objectives.  These services include:
 </p>
<h3><strong>Strategic Media Relations Counsel and Tactical
Implementation</strong></h3>

<ul type="disc">
<li>Awareness Building Campaigns</li>
<li>Brand Building</li>
<li>Market Trend Commentary</li>
<li>Media Tours </li>
<li>Message Development</li>

<li>New Product Launches</li>
<li>News Creation</li>
<li>Pitch and Storyline Development </li>
<li>Positioning</li>
<li>Press Conferences</li>
<li>Press Coverage</li>

<li>Press Interviews</li>
</ul>
<h3>Review Programs</h3>
<ul type="disc">
<li>Thought Leadership</li>
<li>Vertical Market Penetration</li>
</ul>

<h3>Powerful Writing, Editing and Content Development</h3>
<ul type="disc">
<li>Annual Reports</li>
<li>Awards Submissions</li>
<li>Bylined Articles</li>
<li>Case Studies</li>

<li>Company Backgrounders</li>
<li>Customer Profiles</li>
<li>Employee Communications</li>
<li>Internal Company Announcements</li>
<li>Media Kit Materials</li>
<li>News Releases</li>

<li>Newsletter Content</li>
<li>Presentations</li>
<li>Press Materials</li>
<li>Shareholder Letters</li>
<li>Speaking Submissions</li>
<li>Speeches</li>

<li>Website Content</li>
</ul>
<h3>Influencing Analysts and Deal Makers</h3>
<ul type="disc">
<li>Event Participation</li>
<li>Market Conditioning</li>
<li>Message Development</li>

<li>Relationship Building</li>
<li>Road Show Creation and Execution </li>
<li>Securing Briefings </li>
</ul>
<h3>PR and Communications Strategy and Consulting  </h3>
<ul type="disc">

<li>Client Satisfaction Surveys</li>
<li>Coverage Impact Analysis</li>
<li>Crisis Communications</li>
<li>Employee Communications </li>
<li>Executive Communications</li>
<li>Issues Response Strategy Development</li>

<li>Market Research</li>
<li>Marketing Department Staffing</li>
<li>Media Training (print, broadcast, presentation) </li>
<li>Mergers and Acquisitions Communication Strategy
Development</li>
<li>Partner Relations</li>
<li>Press Coverage Impact Analysis</li>

<li>Program Measurement</li>
<li>Strategy, Planning and Execution</li>
</ul>
<p align="right"><a href="#top">^top</a></p>

</div>
</div>

<div id="rightcol">
<img src="images/servicespic.jpg" name="titlepic" width="308" height="209" />
<p class="clientquote">"Passion, professionalism, and competency are
the most accurate
terms to describe Peter Arnold Associates (PAA).  Through
superior leadership at all levels of the organization, PAA has
become one of the most trusted and reliable business
relationships
that I have had in my career.  This team has consistently
over-delivered regardless of economic conditions or competitive
pressures, and this is why I will continue to leverage PAA for
all of my current and future PR needs."</p>
<p align="right" class="clientquote"> - Daryn Walters, <br
/>
Senior Vice President
Global Marketing and<br />
Strategy, HandySoft Corporation, <br />
Vienna, VA</p>

</div

Chuckdesign

2006-02-07, 10:44 pm

Thanks, Osgood. Yes, I use the web forum, which apparently didn't show your
original attachment. It came through in your last posting.

I'll check your code out later this evening and let you know how it works!
Your help is greatly appreciated.

Chuck

Chuckdesign

2006-02-07, 10:44 pm

Actually, I just took a few minutes to check it out and upload it to my site:
http://www.sullivancreative.com/paa...rvicestest.html

The right-hand graphic floats far to the right and does not meet up with the
red rule in the Services graphic. (They should abutt one another.)

But at least it's consistent in all browsers, across platforms, so we're
getting closer. I just need to shove the right-hand column to the left.
Changing the absolute positioning of div#mainimage-right doesn't seem to have
any bearing on this...