I'm building a new site for myself as freelancer. I'm planning to use the cycle plugin in the header but I'm experiencing a small problem.
I wrote HTML and CSS for de items that need to be cycled. Each div.feature inside div#featured should be cycled. A div.feature exist of an image and a div.info. They are both floated left, so they would appear next to eachother.
After writing the HTML and CSS I wrote the Jquery and when I test the page I see the first div.feature perfectly displayed, but after the first cycle all the floats seem to go wrong.
You can check it here: http://webstudions.be/projects/layout6/
Also chrome and safari seem the make another mistake as firefox, ie9 and opera.
Does anybody has an idea of how I should fix this or how I could get this to work??
In your CSS Try adding the following line to your elements style:
clear: both;
This generally fixes my float problems.
Related
I am trying to set up a simple blog using Metalsmith and the fullPage.js library.
At the moment I have a problem where the height of the section divs upon intial loading are roughly 2 times the correct size.
Ie. when it initially loads the height in the console reads 1563px.
The odd thing is that once I resize my browser window in any way ie. make it larger or smaller, the div(class='section') height will then resize to its correct height in the console and in the browser, and everything is laid out correctly again (with regular sized divs as opposed to the super tall ones that were there previously.
This initial height inconsistency is causing many issues with alignment in my layout, such as the prev/next arrows as well as the div content.
here is a link to my public git repo for this project.
If you want to run this locally you can pull it down, run npm install, then run nf start. You will then be able to access it at localhost/3000.
If anyone has any suggestions that would be much appreciated.
Thanks.
It is not ideal to just public your source. A link reproducing the error would be much better.
In any case, I believe yours is a case of missing the compulsory DOCTYPE declaration at the very start of the page.
Take a look at any examples of fullpage.js. They all have it.
Add this in the first line of your resulting HTML files:
<!DOCTYPE html>
My brain is overflow about this issue, so let me share my frustration in order to look for someone having the same experience and, luckily, finding a solution.
The thing is the following:
http://jsfiddle.net/w4d2E/
In chrome, percentages work fine, but when trying the same in Firefox (latest version) the content div is not expanding horizontally and vertically anymore.
I've analyzed every similar question over here, but I can't find any valid answer.
Thanks in advance
P.S.: I've tried to use block display instead of the 'box' one in the 'content' layer, but still having the same behavior.
You're using XUL box layout. I suggest not doing that. -moz-box is NOT CSS flexbox layout, as you seem to think.
The problem here is display: -moz-box for body. If you remove it everything works fine. It appears to be a bug, so I suggest filing a report in the bug tracker.
On a couple pages of mine I have a Fancybox lightbox and I have a jQuery Cycle Plugin. Normally it works fine. There are instances when I click the link that creates a lightbox then when I close it the Cycle Plugin transitions and does not come back. It makes a huge gap of space when this happens.
I am not sure what is going on, this does not happen 100% of the time. Its sporadic. I am unsure if this is a one browser issue or multiple browsers as I was able to recreate this in FF5 on two different machinces but have not replicated this in other browsers.
Any Advice?
Thanks - Here is the page: http://www.ubhape2.com/artists/ (note: any artist page has this same header and happens on all of them. The fancybox is any link referencing "Choosers")
Found out an answer to those who have similar issues (this answer came from the Fancybox forums):
After further tests, I figured out what the issue is and it happens when you open and close Fancybox quickly and successively it seems that the animation behind (jQuery cycle) is creating something called "animation queue buildup" (http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup), which happens when interacting with other js scripts that handle animation (Fancybox uses opacity animation in the overlay).
I would say that this is not a fancybox issue and that you should bring the issue to the cycle plugin forum, however (since you are using the lite version), you may want to edit the cycle js file and do the following changes to minimize the impact of the issue (at least it won't disappear from your page):
Replace the line 166:
var fn = function() {$n.animate(opts.animIn, opts.speedIn,
opts.easeIn, cb)};
with this:
var fn = function() {$n.animate(opts.animIn, 1000, opts.easeIn, cb)};
and line 167:
$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
with this:
$l.animate(opts.animOut,{queue:false, duration: opts.speedOut},
opts.easeOut, function() {
All I can say is my layout went crazy in IE8 and I cannot see why. Of course, it looks correct in other current browsers. I have spent many hours trying to figure it out but when I make any changes, they do not fix this issue and send everything haywire in the other browsers. Can someone please take a look? This one is beyond me!
The page:
http://www.careersinmusic.com/sell-my-music.aspx
MANY thanks!!!!
Rich
well first of all 'jQuery' is undefined on line 132?
The main issue I can see in debugging your IE8 Compatability Mode On code is your lack of clears on the floats.
You should look into how CSS does floating, you must clear the float afterwards otherwise things can get really janky.
To clear a float you put in:
<div style="clear: both;"></div>
That will clear both left and right float (eg starting a new section). To just clear one of the floats you can do clear: left; or clear: right;
Here's a tutorial on floats with CSS:
http://css.maxdesign.com.au/floatutorial/
Also....honestly....the html and css are a mess. I can barely tell what is going on in some of it....allthough that might just be the asp.net adding in magic to try and 'help' you.
This is probably an easy fix, but I'm stumped. Here's the URL: http://urgent.mchenry.edu
First off, underneath the urgent.mchenry.edu text box in the header is an h2 w/ class="caps" and text that says "Official McHenry County College Update". However, it absolutely disappears in IE7. Gone.
I tweaked the ie.css with !important declarations, but still, no go. What gives?
Secondly, in FF, the same h2 has some weird a:hover states, despite the fact that there's NOT an anchor tag in the source code, but FF inserts its own. Use Firebug and see what I'm talking about.
Any help on the above two points would be greatly appreciated. BTW, I'm running XP/FF 3.5 and IE8.
The problem with the hover state is easy to fix - your closing tag on the urgent.mchenry.edu link is <a/> instead of </a>. I suspect this may fix your other issues too.