I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).
FIRST TIME:
SECOND (AND LATER) TIME:
I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?
EDITS
Thanks for all the feedback. Just to clarify a few things. The CSS is standard Bootstrap 3.0 only, there is no other styling or CSS. The URL is https://www.acls.net/index-exp120.php and this is Chrome Private mode with all extensions disabled. I only see this issue in Chrome, have updated title to reflect that.
Ok - the issue depends on multiple things
only might happen with an empty cache
depends on the loading speed of font-awesome & bootsrap - if they load faster than your logo or not...
So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.
You cannot easily fix the loading race condition but fixing your css should work :
add class pull-left to your logo
clear the floated area by applying class clearfix to the page-header
Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded
So here it is:
<div class="page-header clearfix">
<a href="/" class="logo pull-left"">
<img src="images/logo.png" height="62" width="232" alt="">
</a>
Hope that helped.
Some main issues to look into.
Browser size.
Is it wider at one point than the other?
It's obviously within the same browser but just in case, I would test this in multiple browsers, because you do want your code to be cross compatible.
To me it looks like a width problem.
Perhaps you have a #login div, or some oddly named, at the top right that contains that content and floats it, and being that the content is not responsive, but the div itself is. When the div shrinks a little the content itself doesn't and pushes the rest of the content down.
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.
I just switched to ZURB Foundation 4 after much consideration (switching from Twitter Boostrap 3 RC1) and it's all good and fine mostly but I am concerned that I may already be running into some bugginess in it -- but the bugginess may be in my way I'm using it perhaps?
Basically, I am setting up a block grid within which are a series of images. Initially it works as expected: the images are automatically scaled into the width of their column, makes sense since they have max-width:100% and height:auto.
Now, when I add class="th" to each of the anchors for the images suddenly the images overflow their containers and are not size constrained at all but are the dimensions of the image file itself.
Inspecting this in Firefox I find that the only difference that could be causing this is that the th class has line-height:0. I'm somewhat new to all this stuff so I don't quite understand why they are setting the line-height to zero but as far as I can tell that's what is breaking everything in my usage. Is this a bug or am I missing something?
Here's a code example:
<ul class="large-block-grid-4">
<li>
<a class="th" href="http://placehold.it/800x800.jpg">
<img src="http://placehold.it/800x800.jpg" />
</a>
</li>
</ul>
i.e. it overflows all over the place but if I just remove the th class, it's fine.
It looks like a bug to me but before I submitted it I wanted to make sure I wasn't an idiot and missing some important point.
I've been using just the default CSS (v4.3.1) and not SASS with the same issue. Only for me it occurred in IE 10/9 exclusively. In comparing the style sheet used for the docs and the one included in the download, I found one difference.
Add the below to the 'a.th' style:
max-width: 100%;
it shouldn't overflow. http://foundation.zurb.com/docs/components/thumbnails.html
are you using sass or just working on top of their css?
I am currently using a modified version of this theme to display an annual report:
http://www.elegantthemes.com/preview/ElegantEstate/
I can't link the report as our project manager wants to keep the site private until launch.
The project manager is complaining of a strange loading pattern where some content in the features slider shows up before the first slide for a few seconds, until the page is completely loaded. I do not have this problem myself.
Could anyone explain why this might be happening, and how I could fix it? Could I install a plugin that would pre-load the entire page or something like that?
I tried an image pre-loader plugin that did not solve the problem.
Thanks for your help.
Many sliders employ a technique where all of the content is loaded in the html, something like:
<div id="slider">
<div class="pane">
content
</div>
<div class="pane">
content
</div>
<div class="pane">
content
</div>
</div>
While the height and width of the combination of all three individual pane heights and widths, it will be larger than your slider wrapper div. For those who do not use JS, this is what they will see. This is considered to be graceful degradation, whereby they will not get the fancy slider, but they still will be able to see the content.
Once the JS loads in the page, the slider script most likely applies CSS rules that limit the size of the viewable slider area. The slider will likely get height and width parameters and an overflow declaration, something like:
width:200px;
height:200px;
overflow:hidden;
Once those rules take effect, the slider will look as it should. Until that happens, your slider will look nothing like a slider and all of the content will be viewable in a very ugly fashion.
The reason why your project manager is seeing it differently than you may be due to different connection speeds or individual browser inconsistencies. It sounds to me like your slider is working, you just want it to do something that it's not meant to do.
I think you might be able to hack this to work the way you want by adding rules similar to the ones I showed above to the containing div in your CSS style sheet.
I know you cannot post the url here, but if you can post or link to some JS, HTML, and/or CSS for the slider (or even the slider script used in this project), we might be of more help.
This is really a weird problem. So we have an existing navigation that goes like this:
<div class="tab">
HOME
NAV2
NAV3
NAV4
NAV5
</div>
Thing is once we change the URLs to something longer (cause the web address of the live site is longer than the test site), the layout of the header goes awry (the items should be in one horizontal line but when we make the URLs longer, some of the text goes to the next line).
Why is that so? I mean it's not the text on the URL, it's the URL itself which shouldn't affect how things are displayed.
Has anybody encountered this weird problem? Happens on all browsers.
This sounds impossible. The only two ways I can see this happening are:
you've got some javascript which manipulates the DOM depending on the value of those href=""
you've got css content property outputing some content based on the value of those href=""
Is it any of those two?
Also, have you tried validating the html source using http://validator.w3.org/?