[ 15 posts ] Go to page 1, 2 Next

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile

YUI 3 adding margin or padding to top of my page

Post Posted: Wed Oct 27, 2010 10:24 pm
+0-
I have a strange problem.

When I load my YUI 3 libraries, the web page I'm creating has a small amount of space at the very top. This space comes before absolutely any other element, does not seem to be tied to any particular tag, and is about 24 to 36 pixels high. It's as if the <html> tag had been given a top-padding of about 30 pixels, or maybe 1 em.

I have tried to apply margins and paddings of 0 pixels at every possible opportunity in my CSS, including html and body tags.

However, I have isolated the problem to the presence of the YUI 3 library files. If I do not include them, the space at the top of the page goes away. If I include the libraries, the extra space is included.

Here's where it gets a little weirder. I'm using the YUI 3 libraries to support sliders. If I have a slider on the page, the space at the top of the page goes away.

So, if I include YUI 3 libraries but don't render a slider, I get space at the top of my page. If I include YUI 3 libraries and do render a slider, I do not get unwanted space at the top of my page.

Any advice on how I can eliminate this problem would be much appreciated.

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Wed Oct 27, 2010 11:08 pm
+0-
Additional information:

On a page refresh just now, I noticed the quick flicker of what look to be some style elements from the default skins provided for sliders. It looked like some thumb graphics were in the top left of my page for a moment, and then they disappeared.

Also, at the bottom of my screen, it said something about loading from "yahoo.api.com"

There seem to be two related problems here.

One is that the YUI libraries seem to be loading default skin graphics and CSS from the Yahoo server. Something in the YUI default ("sam skins"...?) is probably what is causing the excess space at the top of the page.

The other issue is that the scripts are downloading from the YUI server at all. I need my entire site to be completely local, in that all the libraries, graphics, files, and everything are all in one place on my own server. I don't want YUI dynamically loading anything from the yahoo server or anywhere else.

Assuming that the mysterious space at the top of my page is coming from some default YUI CSS over riding my local CSS, the question becomes: How do I prevent YUI from using anything except my CSS and graphics?

Further, how do I stop it trying to dynamically load anything at all? If there are any libraries I need, I would rather manually copy them to my server.

Thank you for any advice

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile
Tags:

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Thu Oct 28, 2010 12:38 am
+0-
Thank you for responding.

Sorry if I was unclear.

It does not matter to me if YUI grids or CSS is easy to use. I have custom built all my graphics and CSS, so I do not want to use the YUI stuff at all.

There must be a way to globally stop it, and also prevent the additional undesired downloading of libraries.

Adam Moore

YUI Contributor

  • Username: adam
  • Joined: Wed Sep 03, 2008 11:16 am
  • Posts: 356
  • GitHub: apm
  • Gists: apm
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Thu Oct 28, 2010 9:17 am
+0-
If you are serving YUI from your local server, make sure you download the zip distribution. The CSS files in the zip do not have references to yui.yahooapis.com.

To prevent the loader from fetching YUI CSS, set the 'fetchCSS' config attribute to false.

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile
Tags:

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Tue Nov 02, 2010 12:14 am
+0-
Thank you for responding.

First, I have downloaded the .zip file and I'm using the files from there.

I have added the "fetchCSS: false" declaration.

However, when I use the "fetchCSS: false" declaration, my YUI 3 slider does not render at all.

Part of the problem may be that I am paring down the files I'm including. My goal is to eventually bundle all the javascript into an application that can be used on Android and iPhones. Because of this, I want to have only the files I need for inclusion, and not rely on dynamically loading the files from the entire library.

So, in short, what I need to do is be able to figure out how to keep all CSS and javascript includes locally and limit it down to just the ones I need.

How can I figure out exactly which CSS is being called so that I can bundle it with my local and custom CSS?

Caridy Patino

YUI Contributor

  • Username: caridy
  • Joined: Mon Dec 08, 2008 5:40 pm
  • Posts: 492
  • Location: Miami, FL
  • Twitter: caridy
  • GitHub: caridy
  • Gists: caridy
  • IRC: caridy
  • YUI Developer
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Tue Nov 02, 2010 7:59 am
+0-
Hey Dave,

To use yui in a bubble for iphone/android/etc, you will have to download the zip (as adam mentioned), and reconfigure the loader to use your local copy, instead of the Y! CDN copy.

In your case, the slider is not working because you have fetchCSS: false, which means that none of the CSS files associated with the modules (in this case slider) will be included in the page dynamically, you have to do it manually as a simple "link".

Check this page:
http://developer.yahoo.com/yui/3/api/config.html

Those are all the configuration options that you can use to set up the loader correctly. My recommendation is to use "fetchCSS: true" but set up the "base" to point to your local copy.

Best Regards,
Caridy

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Thu Nov 04, 2010 7:55 am
+0-
Caridy,

Thank you for responding.

If I use the "base:" parameter, I can see how I can avoid going to the Yahoo server to load files.

However, if I do that, I don't see how I can determine which files are being called so that I can know which files to include in my "bubble" and which not to.

Is there no way of knowing which files are being called?

Caridy Patino

YUI Contributor

  • Username: caridy
  • Joined: Mon Dec 08, 2008 5:40 pm
  • Posts: 492
  • Location: Miami, FL
  • Twitter: caridy
  • GitHub: caridy
  • Gists: caridy
  • IRC: caridy
  • YUI Developer
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Thu Nov 04, 2010 9:27 am
+0-
Hmm, I see. Why do you want to ship only a piece of the library? Why don't you ship the whole "build" folder? It's not that big actually.

I guess only the configurator will help you to identify the pieces you need to ship, but still it's very complicated, and you will have to do the same for every iteration of the library due internal refactoring processes. My recommendation is to ship 'build' folder.

Best Regards,
Caridy

Dave M G

  • Username: Dave M G
  • Joined: Fri Sep 25, 2009 9:34 pm
  • Posts: 32
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page [SOLVED

Post Posted: Thu Nov 04, 2010 10:05 pm
+0-
Caridy,

Thank you for your continued help in this matter.

The build folder is about 9 MB, which is tiny for most computer applications, but for a mobile application, that's pretty huge. By only including the libraries I need, my entire application is about 950 Kb, so having the entire build library increases the size ten times, which is a little hard to justify since 90 percent would go untouched.

In any case, I followed your advice of going through the configurator again.

In doing so, I found that it had added some CSS files that I had not previously included. By copying the contents these CSS files into my own CSS, I found that I had the level of control over the display that I was looking for.

I also put "fetchCSS" to false to ensure I am not going to the YUI server for any data.

Lastly, I found that the YUI library will load some CSS even if you do not specify a <div> to render a slider in, so I had to adjust my code to test for the presence of the target <div> before executing YUI code.

You are right that being as strict as I am about file inclusion means it is more complicated for me to maintain the right library sets. However, I think that the results in terms of data transfer savings will justify the effort.

Thank you for your time and help. It is much appreciated.

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile

Re: YUI 3 adding margin or padding to top of my page

Post Posted: Thu Nov 04, 2010 10:10 pm
+0-
Dave,

Caridy wasn't suggesting you actually send the entire build/ folder to you user, just that you have it on your server so that it's available for inclusion if you need it, and use() will pull in what it needs.
  [ 15 posts ] Go to page 1, 2 Next
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum