Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
negative margin in IE and Safari?
The page in question is here
The piece in question is the caption for the table at the bottom of the page.
I have applied a negative margin of 2px so that the grey top border will be hidden by the white background of the caption.
This works in FF, but not in IE or Safari.
Any thoughts? I’ve tried positioning, but without success.
THx.
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: negative margin in IE and Safari?
here’s your new HTML page:
<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” xml:lang=“en” lang=“en”><head></code>
<code>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”><title>Sonship Week with World Harvest Mission</title>
</code>
<code>
<style type=“text/css”>
<!—[if IE]>
</code>
<code>
(asterisk here) {
font: normal 13px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}
body { font: normal 13px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color: #333; text-align: center; background: #DDD; line-height: 1.1em;
}
h2 { font-size: 18px; font-weight: 200; }
h2.blue { color: #006699; font-size: 14px; letter-spacing: 1px; border-top: 0px; border-bottom: 0px; }
h1 { font-size: 22px; font-weight: 200; } h3 { font-size: 15px; font-weight: 200; }
<![endif]—>
/************************************** Global styles **************************************/
body { font: normal 13px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color: #333; text-align: center; background: #DDD; } (asterisk here) { padding: 0; margin: 0; outline: 0; } img { border: 0; } a, a:visited { color: #0033FF; text-decoration: underline; } a:hover, a:active { color:#000033; } p { padding: 7px 0; }
.clear { clear: both; height: 1px; overflow: hidden; margin-bottom: -1px; } strong { font-weight: bold; padding: 2px 0; }
/************************************** Layout styles **************************************/ #header_wrapper { background: #007AAB; border-bottom: 2px solid #025781; } #header { width: 660px; background: url(images/logo.gif) no-repeat 0 50%; padding-top: 10px; padding-bottom: 10px; margin-right: auto; margin-left: auto; } #header_right { float: right; width: 280px; }
#wrapper { text-align: left; }
div#above_wrapper{ background-color: white; } div#above { width: 660px; padding: 15px 0; margin-right: auto; margin-left: auto; }
#content_right_top{ width: 280px; float: right; } #content_left_top { width: 365px; float: left; } div#middle_wrapper { background-color: white; padding-bottom: 15px;
} div#middle { background-color: white; width: 660px; margin-right: auto; margin-left: auto; }
#content_left { width: 365px; float: left; } #content_right { width: 280px; float: right; } div#below_wrapper { background-color: #DDD; border-top: 2px solid #999; } div#below { margin-bottom: 200px; margin-right: auto; margin-left: auto; position: relative; top: -2px; width: 660px; } div#information_right { float: right; width: 280px; margin-top: 38px; }
/************************************** Heading, paragraph, and img styles **************************************/ h2.blue { color: #006699; font-size: 19px; line-height:21px; letter-spacing: 1px; border-top: 0px; border-bottom: 0px; } div#content_right_top img { padding: 6px; border: 1px solid #CCC; } #header_right h1, #header_right h2,#header_right h3 { color: #FEFEFE; line-height: 1.1em; }
#header_right h3 a, #header_right h3 a:visited, #header_right h3 a:hover { color: #FEFEFE; text-decoration: underline; } #middle h2.scripture { padding: 5px 0; border-top: 2px solid #999; border-bottom: 2px solid #999; margin-bottom: 10px; } img.img_right { float: right; padding: 5px; margin-left: 8px; border: 1px solid #ccc; } img.img_left{ float: left; padding: 5px; margin-right: 8px; border: 1px solid #ccc; } p.bio_left, p.bio_right { text-align: justified; clear: both; } #content_left h2 { margin-bottom: 1em; } #content_right p { padding: 10px; margin: 0 0 8px 0; border: 1px solid #CCC; } #content_right h2 { padding: 0px 10px 5px 10px; } div#information_right h2 { background: url(images/questions.gif) no-repeat 0% 50%; padding: 8px 0 8px 35px; } div#information_right p, div#information_right a { padding: 5px 0 5px 35px; } p#information_announce { padding: 5px 0 5px 35px; background: url(images/information.gif) no-repeat 0% 50%; } p#bottom { postion: absolute; bottom: 0px; margin-top: 100px; } /************************************** Table styles **************************************/ span.small { font-size: .9em; font-family: arial, sans-serif; text-transform: lowercase; font-weight: 100; } div#table { float: left; width: 368px; } #information { width: 365px; } #information_bottom { width: 365px; margin-top: 10px;
} caption { padding: 0 0 5px 0; width: 365px; font: 21px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; text-align: center; margin-bottom: 5px; border-top: 2px solid #fff; border-bottom: 2px solid #999; border-right: 2px solid #999; border-left: 2px solid #999; background: #FFF; } tr.row_heading { border-bottom: 2px solid #333; } tr.price td { background: #EEE; } th { font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color: #333; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; } th.row_heading { border-bottom: 2px solid #333; } td { padding: 6px 6px 6px 12px; color: #333; }
</style></head><body> <!—start wrapper—> <div id=“wrapper”> <div id=“header_wrapper”> <div id=“header”> <div id=“header_right”> <h1>Sonship Week</h1> <h2>November 5-10, 2006</h2> <h3><a href=“http://ridgehaven.org/”>RidgeHaven Conference Center,<br>Brevard (Asheville), NC</a></h3> </div><!—close header right—> <div class=“clear”></div> </div><!—close header—> </div><!—close header wrapper—> <div id=“above_wrapper”> <div id=“above”>
<div id=“content_left_top”>
<h2 class=“blue”>
Which better describes your life and ministry: joyful response to the Father’s love or steely commitment to survival?
</h2>
<p>As
ministry leaders, it is frighteningly easy to get so weighed down with
burdens – our own and others’ – that the Father’s love becomes a
distant memory. Away from the warmth of his love, we quickly develop an
independent, survival-oriented mindset; in short, we start to live like
spiritual orphans. </p>
<p>This year’s Sonship Week is specifically designed for
people who want to break away from a survival approach to life and
ministry and begin (again) to live and minister as children joyfully
responding to their Father’s love. </p>
</div><!—close content left top—>
<div id=“content_right_top”> <img src=“sswk_files/brevard.jpg” alt=“brevard” height=“196” width=“262”> </div><!—close content right top—> <div class=“clear”></div> </div><!—close above—> </div><!—close above wrapper—>
<div id=“middle_wrapper”> <div id=“middle”>
<h2 class=“scripture”>
With joy you will draw water from the wells of salvation. Isaiah 12:3
</h2>
<div id=“content_left”>
<h2 class=“blue”>Teachers</h2>
<p class=“bio_left”><img class=“img_right” src=“sswk_files/scotty.jpg” alt=“Scotty Smith Portrait” height=“74” width=“76”>Scotty
Smith is married to Darlene and they have two grown children. He is the
founding pastor of Christ Community Church in Franklin, TN, and is the
author of four books. The most recent is Restoring Broken Things,
co-authored with Steven Curtis Chapman. </p>
<p class=“bio_right”><img class=“img_left” src=“sswk_files/chuck.jpg” alt=“Chuck Holidy Portrait” height=“75” width=“76”>Chuck
Holiday serves as the Senior Pastor at River of Life Presbyterian
Church in Orlando, a church he started in 1994. Prior to that, he
served for 19 years as senior pastor of Westminster Presbyterian Church
in Elgin, Illinois. Chuck and his wife Debbie have four grown children.
</p>
</div><!—close content left—>
<div id=“content_right”>
<h2 class=“blue”>Also included in the conference</h2>
<p><strong>Individual Coaching</strong><br>
Trained mentors from World Harvest will meet with you as an individual
or couple in daily one-hour sessions to help you apply the lecture
material. Many people tell us each year that these sessions are the
most helpful part of Sonship Week. </p>
<p><strong>Small Groups</strong><br> The small group
will be a place to ask questions and share your experiences as you
reflect on the lectures and how to apply the truth to our lives and
ministries. </p>
</div><!—close content right—>
<div class=“clear”></div>
</div><!—close middle—>
</div><!—close middle wrapper—>
<div id=“below_wrapper”> <div id=“below”>
<!—start of 3 column information table—> <div id=“table”> <table id=“information” cellspacing=“0”> <caption>Price (including Room & meals)</caption> <tbody><tr> <th class=“row_heading” scope=“col”>By Sept 22:</th> <th class=“row_heading” scope=“col”>Couple</th> <th class=“row_heading” scope=“col”>Single <br><span class=“small”>(in double room)</span></th> </tr> <tr class=“price”> <th scope=“row” class=“nothing”> </th> <td>$1045</td> <td>$845</td> </tr>
<tr> <th class=“row_heading” scope=“col”>After Sept 22:</th> <th class=“row_heading” scope=“col”>Couple</th> <th class=“row_heading” scope=“col”>Single <br><span class=“small”>(in double room)</span></th> </tr> <tr class=“price”> <th scope=“row” class=“nothing”> </th> <td>$1095</td> <td>$895</td> </tr>
</tbody></table> <!—start of 2 column information table—> <table id=“information_bottom” cellspacing=“0”> <tbody><tr> <th class=“row_heading” scope=“col”>Conference Begins:</th> <th class=“row_heading” scope=“col”>Conference Ends:</th> </tr> <tr> <td>at 5:30pm with an evening meal<br><strong>Sunday Nov 5</strong></td> <td>11:30am<br><strong>Friday Nov 10</strong></td> </tr> </tbody></table> <p id=“information_announce”> Full payment is to be made when registering. Childcare is not available during the conference. </p> </div><!—close table—>
<div id=“information_right”> <h2> For more information </h2> <p> Meredith Elder<br> World Harvest Mission<br> 100 West Ave., W960<br> Jenkintown, PA 19046 </p> <a href=“mailto:merideth@whm.org”>merideth@whm.org</a>
<p> 215 885 1811 ×273 </p>
</div><!—close information right—>
<div class=“clear”></div> <p id=“bottom”><unsubscribe>If you’d prefer to correspond with us in other ways besides emailing, you can unsubscribe here. </unsubscribe></p>
</div><!—close below—> </div><!—close below wrapper—>
</div><!—close wrapper—>
</body></html>
</code>
Last edited by Walker (2006-06-12 15:42:09)
Offline
Re: negative margin in IE and Safari?
btw, I only changed the inline CSS, not the page’s html
….all the browsers treat captions differently. In the case of IE and safari, you cannot use margin on them. It’s all in the interpretation of the Spec. I, personally, think the Konqueror team/Safari Team and the IE team interpreted it correctly when it comes to the captions.
Last edited by Walker (2006-06-12 15:18:35)
Offline
Re: negative margin in IE and Safari?
p.s. Are you going to enkode the email addresses?
Offline
Re: negative margin in IE and Safari?
Walker,
Thanks man. Good to know.
The current version of the email address is for the email only.
The version for the web which will be posted elsewhere (at whm.org’s servers) will indeed be encoded.
Thanks for your help.
I’ve done so little in tables, that I haven’t really worked in styling them at all.
Thanks for filling me in on that little caption issue.
:)
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Pages: 1