Jump to content

Safari spacing issue with "padding"...

danknol

By danknol
in CSS

Recommended Posts

danknol Newbie

danknol

Posted
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...