4 replies [Last post]
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 8 years 27 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

Hello,
I'm noticing an extra 20px being added to the top and bottom of the body element in Safari 5. I'm using a CSS reset, and a sticky footer. Is there a Safari specific margin/padding = 0 hack? To keep it simple, I'll include some very sparse markup which is displaying the extra 20px to the top of the Section. Can anybody help me figure this out? Thanks!

HTML & 1 CSS style

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
 
		<title>20px</title>
 
		<!-- CSS Reset -->
		<link rel="stylesheet" href="styles/reset.less" type="text/less" media="screen" />				
 
		<style> 
	    <!--
		section { width:100px; background-color:gold;height:100px;}
	    -->
	   </style>
 
 
 
 
</head>
 
    <body><section id="safari">Hi!</section> </body>
</html>

and my Reset

/* <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a> 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
 strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
html, body {margin:0; padding:0;}

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 34 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Your Code is Sparse

Your code you provided is "sparse". I don't see any problems in Safari on my end.

I think your reset is a tad bit excessive. Though that is just my personal opinion. My guess would be the problem lies with the sticky footer. Though considering it is not included in your code sample the best I could do is guess as you are not showing the actual source code where the problem lies.

My opinion on the sticky footer is it is impractical.

If you look at any website that offers a tutorial / hack to implement it. You will likely never see it used in the persons actual website because it becomes an unnecessary driver for the code.

You will end up spending a great deal of time working on little more than making that single functionality work. And everything else generally suffers. Facebook made it popular a few years back. If you look . . . they abandoned it. Every time I have tried to make it to work I realize it is a useless headache that makes the entire functionality, appearance and capabilities of the entire site suffer for it's presence . . . that is also my opinion.

If you provide more information and code it might be easier to trouble shoot the problem your having.

Best:

-Trav

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 8 years 27 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

gap persists on my end...

lol @ "I think your reset is a tad bit excessive." - I can appreciate that... It has given me a separate issue or two, but that's off topic... Laughing out loud

I too thought it was likely the sticky footer, but after completely removing it, the 20px gap persisted. In fact, it persisted after striping the code down to the sparse example I included in my post.

If my code example is looking good on your end, perhaps its a problem with this machine, or the instance of Safari on this machine. I've re-installed Safari, cleared the cache, and the gap still persists for me (see image)

thumb_20pixels.png

I'll try on a different machine tomorrow.

I appreciate your taking a look at this Trav!

Do you have any other ideas?

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 34 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

I looked Closer

I looked more closely at your code and did not realize you were actually using a section id as a div container. I code html and CSS for a living and am familiar with some basics of HTML 5 semantics. I have also not delved really deeply into the specific semantics of some of the new code language.

What I can tell you however is your use of a section id seems incorrect. http://stackoverflow.com/questions/7183132/how-to-correctly-use-section-tag-in-html5 In my opinion I would consider this to be fundamentally wrong. You would use a div id. Even if I were to apply and ID to a section tag and try and control it through CSS. I would call that id in the stylesheet for styling as #safari and not "section".

When you specify and id you call it in the CSS like this.

#safari { width:100px; background-color:gold; height:100px; }

Try this:

<!DOCTYPE html>
  <html lang="en">
 
  <head>
    <meta charset="utf-8">
    <title>20px</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <style type = "text/css">
    * { margin:0; padding:0; }
    a img { border-style:none; }
    a { text-decoration:none; } 
    ul li { list-style-type:none; margin:0; padding:0; }
    hr { margin:0; padding:0; display:none; }
 
    #safari { float:left; width:100px; background-color:gold; height:100px; }
    </style>
  </head>
 
    <body>
      <div id = "safari">Hi</div>
    </body> 
 
</html>

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 8 years 27 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

its this machine...

Finally got access to another machine with a fresh install of Safari... its not you its me.. well, this computer that is... Tired

As for the semantics - in my original document (with the sticky footer and all) the SECTION was being used correctly, I just kept taking stuff out of it trying to figure out the problem... In terms of *presentation* (not semantics) section and div displayed exactly the same, whether using IDs or the element themselves as the selector (in Safari at least).

Thank you for your help Trav! I've been working on a nearly new computer with a FRESH install of Safari, so it didnt immediately occur to me that it would be something wrong with my environment! You helped me figure that out!