SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Works in Firefox, Doesn't in Safari

    Hi,

    I designed a header and it looks ok in Firefox but in Safari it looks wrong.

    Here is the HTML:

    Code:
    <div id="header">
         <div id="site_branding">
              <h1>MySite</h1>
         </div>
         <div id="quoteOfTheDay">
               <p>
    	        <strong>"Quote"</strong><em> - Author</em>
    	   </p>
         </div>
    </div>
    Here is the CSS:
    Code:
    #site_branding h1
    	{
            padding: 0px;
    		padding-left: 5px;
    		margin: 0px;
    		border-top: 0.5px solid black; 
    		border-left: 0.5px solid black; 
    		border-right: 0.5px solid black;
    		width: 100%;
            height: 45px;
    	}
    
    #quoteOfTheDay
    {
    	background-color: #FFB90F;
    	border: 0.5px solid black;
    	padding-left: 5px;
    	padding-top: 0px;
    	margin: 0px;
    	width: 100%;
        height: 40px;
    }
    The page looks fine in Firefox - the header appears in a blue strip with the quote in an orange strip IMMEDIATELY under it. But in Safari there is a line of padding between the two strips.

    Could anyone please suggest why this might be happening?

  2. #2
    SitePoint Enthusiast queen4's Avatar
    Join Date
    Jul 2009
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by romsok View Post
    Hi,

    I designed a header and it looks ok in Firefox but in Safari it looks wrong.

    Here is the HTML:

    Code:
    <div id="header">
         <div id="site_branding">
              <h1>MySite</h1>
         </div>
         <div id="quoteOfTheDay">
               <p>
    	        <strong>"Quote"</strong><em> - Author</em>
    	   </p>
         </div>
    </div>
    Here is the CSS:
    Code:
    #site_branding h1
    	{
            padding: 0px;
    		padding-left: 5px;
    		margin: 0px;
    		border-top: 0.5px solid black; 
    		border-left: 0.5px solid black; 
    		border-right: 0.5px solid black;
    		width: 100%;
            height: 45px;
    	}
    
    #quoteOfTheDay
    {
    	background-color: #FFB90F;
    	border: 0.5px solid black;
    	padding-left: 5px;
    	padding-top: 0px;
    	margin: 0px;
    	width: 100%;
        height: 40px;
    }
    The page looks fine in Firefox - the header appears in a blue strip with the quote in an orange strip IMMEDIATELY under it. But in Safari there is a line of padding between the two strips.

    Could anyone please suggest why this might be happening?
    You can just delete the width: 100%; the defalut is 100% already.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    romsok, there's no such thing as 0.5px. The smallest pixel value is 1. If you change your borders to have 1px, you should get rid of the browser inconsistencies.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •