I have to clean up some code and add some features to an existing site.
The layout is broken in Firefox 12.0
See: http://bit.ly/LEqamL
I'm at my wits end. Tried a lot of things but no dice.
The footer and an overlaying image may look broken but when it renders dynamically, it works fine. I just need to get the large 999x666 image to show in the right area.
Any help or direction would be highly appreciated!
Putting clear: both on the <div id="display"> should do the trick.
Related
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
The website: http://epic.lexcorp.ca/capabilities
If you open it in Firefox and then in Internet Explorer/Chrome you should see what I mean, and this is in regards to the two areas below the content (View Our Projects and News)
I've been trying to figure this out for about 40 minutes now and I'm at a loss. Help is greatly appreciated.
It's only a CSS problem.
Add this to your CSS file:
.bottomBox .region {
overflow:hidden;
}
With help from BumbleB2na I noticed there was a at the front of one of the tags.
That helped, but didn't fix it completely. I then noticed that there was margin-top areas that were pushing down the boxes entirely, so I adjusted the values to the div wrapping container and changed them to padding.
Seems to be seamless in all 3 browsers now.
I'm working on a simple website using Twitter's Bootstrap css framework for the basic styling (don't know if this is relevant info).
I've made a simple filterable products page using isotope.js, which is working as expected in Chrome, Safari and Firefox on my Mac. However, something weird is happening in IE8 and IE9; the images get all scrunched up (they should be square, using WP featured image function), see image.
The URL of the site is: http://www.nieuwkerkonline.nl/het-bedrijf/producten/
Does anyone know what is causing this, and how I may be able to resolve it? The fact that the rounded corners and other CSS3 goodness get left out, I can live with, but the pictures defninitely need to display properly.
Any help would be greatly appreciated.
try adding
float:left;
overflow:hidden;
to your css classes .post and .entry-content
I am working on a website and have embedded a Simpleviewer gallery into one of my pages. There is a blank white area under the gallery that I can't make go away. My ultimate goal is to have no need to scroll vertically on the page.
Here is a link to the page: http://www.tuckermatthewsphoto.com/a...tomotive1.html
Any help is greatly appreciated. This is driving me absolutely nuts.
Thanks
Well, I figured it out for myself.
Since I knew that there was nothing on the bottom of the page that I needed, I decided on trying to hide the scrollbar, so I added into the css file:
body { overflow:hidden; }
No more scrolling! This seems like it would be a pretty useful trick, so far it works in Safari and Firefox.