I researched this site and tried a few things I found and I still am broken on this.
My website is www.autofxcollision.com and the dots of the slider disappeared, and it puts a large gap under the picture pushing my words all the way down the page. When I was testing it using dreamweaver through Chrome it worked fine, then when I uploaded I got that. I tried disabling one of the Javascript links, and adding the width to the wrapper of the slider...can someone please look at my code and see if I forgot anything. Thanks a million
Jessica
Its not the problem with nivo slider.. you have images which are in variable resolution.. Try to keep all the images in same resolution to achieve better result...
when i checked i saw a picture which has the height very large.. exactly till the white space...
Related
I have a website that has a moving background (code borrowed somewhere online) and I recently corrected an issue with the scroll bar not appearing but that actually caused another issue that wasn't very noticeable until I tried adding a new page.
If you go to http://theromdepot.com/ and move your cursor to the bottom of the page, you'll see a very thin white line start to appear. I just ignored it until I started adding a new page here: http://theromdepot.com/emulators.php. Now you can really see the issue. I'm sure the problem is in my CSS, but for some reason I cannot find it. I'd really appreciate any help, thanks.
CSS: http://pastebin.com/Up3WtmJ8
emulators.php: http://pastebin.com/UE78eMgT
It seems like your problem really lies in the CSS,but not just in it. I am not pretty sure what's the exact problem,but I ran the developer tools with Internet explorer and I have discovered this:
If you leave out the transform: matrix(1,0,0,1,0,0); property,the problem won't persist anymore.
I made all the webpages in html5, css and js and used google chrome to see the result.
When I change the pc for example, the structure of the webpage changes completely...
I think it has something to do with position relative and absolute but not sure...
Here it is sample fiddle, the webpage for now is just 5 images that I can navigate with 4 keys from keyboard,
sorry for my english...
Can anyone help me?
Are the screens different 'sizes'. Check the resolution of the displays. That's most likely your issue.
It sounds like you're positioning your elements based on the size of your screen. This would be fine if everyone had your screen.
If you could provide your code, I could further assist on how to remedy your situation.
In the meantime, try reading more into css positioning: http://css-tricks.com/almanac/properties/p/position/
I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.
The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.
Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..
Issue #1 -
I have read all about different solutions for getting rid of the "white space" in IE within tables, but nothing has worked so far! The page I am working on displays OK in Firefox and all other browsers. I have tried the height=100% command but that makes things so much worse and spaced out, and I have also tried deleting spaces between the different table and td tags but that doesn't change anything either. The images are exactly 115px square or twice that for a horizontal or vertical image.
Issue #2 -
I have an image gallery for each image that is SUPPOSED to appear when clicking on the image. It appears fine in Firefox and Chrome, but IE won't show the image gallery. Help on getting that javascript to work?
You can see our "live" site at www.tracystonearchitect.com (it is just the main home page - the rest of the site is in flash.. which we are working on converting) - it appears 100% correct in Chrome, the spacing issue and image gallery issue shows up in IE, and in Firefox the fonts I used aren't loading right.. which is another issue that I may have already figured out locally, but havent posted the updates yet.
I'm still pretty new at all this coding stuff, so may be a user-error. I've also been trying different techniques to fix these problems so things may be a bit awry based on my trying the different solutions. I'd appreciated any ideas or thoughts on how to fix the space-- or any other code technique comments!
Please help, I really need a solution for this.
As Per Issue #1
Do you have developer tools for your IE. This has become essential for me to troubleshoot and debug web pages. I took a look at your page. In the dev tools look for find in the menu and choose select element by click. Do this for several img. Look to the right of the dev screen and select layout. I noticed the offset varied between different pictures.
See this other SO topic How do I get rid of an element's offset using CSS?. Your on the right track with the css reset i saw in your code. Just keep going. The article mentions positioning as a possible cause.
As Per Issue #2
I wish i had more time to dig into this. I researched the error and found many hits most likely a syntax error. See this SO topic Possible cases for Javascript error: "Expected identifier, string or number"
I hope this points you in the right direction.
Before you tune out and label this as a dreadful question, please listen, I am aware that there are many jQuery plugins that flip images / content. My problem however involves something a little more difficult.
My problem is that a client wants their logo to constantly flip at a slow rate (this is not much of a problem) but when the logo is flipped halfway, instead of the image having 0 width they want the logo to appear a little "3D" so that when you are viewing it head on, it actually has a width.
I've googled around a bit but really can't seem to find a plug-in that achieves this, is it even possible?
If you're having trouble visualising what I mean when I say flip, see this demo
In the end we gave up on a JavaScript solution (it was going to be near impossible to have a reasonable cross browser solution)
So we ended up using jquery reel to accomplish this (why we didn't think of sprites earlier I'll never know!)
I have found some 3D Flipping image examples, so please try for it.
http://jquery.vostrel.cz/reel
http://www.360-javascriptviewer.com/learning-centre/code-examples/multiple-360-images-page.html
http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
if you wan to create codebins for it then click on link http://codebins.com/