Jump to content

Safari spacing issue with "padding"...


Recommended Posts

I know this issue is not new to those of you who are advanced coders, so I'm hoping this is an easy resolve. Among other properties in the css, I simply want to add code that will move a line of text downward within a cell, so that it aligns with a background image. Typically, I would do this using the "padding-top" code. When I specify, "padding-top: 87px;" in the css, it displays fine in Firefox. However, in Safari it pushes the background image, and all content below down 87px, creating undesired spacing. Here's my css code:

.nav-text {	font-family: Geneva;	font-size: 10px;	letter-spacing: 0.02em;	padding-top: 87px;	text-align: center;	color: #9297a3;	background-image: url(images/nav_cntr_backg.gif);    	background-position: center;	background-repeat: no-repeat;}

Preview the web page in Safari and Firefox, and you see the problem:View the Web PageThis is frustrating because there is nothing complicated about this page. Please help, thanks. (FYI, I am Mac based, using Dreamweaver.)Here's the 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"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Jessica Smit, Fine Artist</title><style type="text/css"><!--body {	background-color: #292c14;	background-image: url(images/backg_repeat_extd.gif);	background-repeat: repeat-x;	margin-left: 0px;	margin-top: 0px;}--></style><link href="jsmit_styles.css" rel="stylesheet" type="text/css" /><script type="text/javascript"><!--function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}//--></script></head><body><table width="592" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td height="115" colspan="2" valign="top" class="nav-text">HOME            <a href="galleries_launch.html">GALLERIES</a>            <a href="js_bio.html">BIOGRAPHY </a>           <a href="contact.html">CONTACT</a></td>  </tr>  <tr>    <td colspan="2" valign="top"><img src="images/hero_cntr1.jpg" width="592" height="508" alt="hero homepg" /></td>  </tr>  <tr>    <td width="388" height="168" valign="top" class="bttm-text-L">Jessica Smit      |      <a href="mailto:jsmit920@hotmail.com" class="bttm-text-L">jsmit920@hotmail.com</a></td>    <td width="389" valign="top" class="bttm-text-R">©2009 Jessica Smit. All rights reserved.</td>  </tr></table></body></html>

Link to post
Share on other sites
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}/*--*//*]]>*/</script><style type="text/css">body {background-color: #292c14;background-image: url(images/backg_repeat_extd.gif);background-repeat: repeat-x;margin-left: 0px;margin-top: 0px;}.nav-text {font-family: Geneva;font-size: 10px;letter-spacing: 0.02em;height:115px;text-align: center;color: #9297a3;background-image: url(images/nav_cntr_backg.gif);background-position: center;background-repeat: no-repeat;}.nav-text a {display:block;text-decoration: none;float:left;margin-top:87px;padding: 0 20px;}.nav-text a.home{margin-left:120px!important; margin-left:60px;/*IE6 fix*/}.nav-text a:link {color: #9297a3;}.nav-text a:visited {color: #9297a3;}.nav-text a:hover {color: #959c4c;}</style></head><body><table width="592" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td colspan="2" valign="top" class="nav-text"><a href="index.html" class="home">HOME</a><a href="js_p_01.html">GALLERIES</a> <a href="js_bio.html">BIOGRAPHY </a><a href="contact.html">CONTACT</a></td></tr><tr><td colspan="2" valign="top"><img src="images/hero_cntr1.jpg" width="592" height="508" alt="hero homepg" /></td></tr><tr><td width="388" height="168" valign="top" class="bttm-text-L">Jessica Smit   |   <a href="mailto:jsmit920@hotmail.com" class="bttm-text-L">jsmit920@hotmail.com</a></td><td width="389" valign="top" class="bttm-text-R">©2009 Jessica Smit. All rights reserved.</td></tr></table></body></html>

Link to post
Share on other sites

That looks like it will work. In his inimitable style, dsonesuk has provided a code dump with no explanation. The key features are giving .nav-text the height of your background image (115px), and putting the 87px at the top of the link elements. That positions them in the black area.

Link to post
Share on other sites

Apology accepted, the poster sent me a pm about this problem, after few more i got enough information to work on a solution, later on day when i had time free I finished solution and gave explanation, only to find this posting, being a bit peeved I just posted solution. People have no patience these days.

Link to post
Share on other sites

I understand your being peeved. Was OP still validating at the time? For reasons like this, I refuse personal requests from all validators, and usually everyone else. Special circumstances excluded, naturally.

Edited by Deirdre's Dad
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...