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/?
Related
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 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.
I've been building this site in CSS with virtually no problems, and now all in a sudden I'm experiencing a problem with some basic positioning that I can't figure out in my body-3 class div, going below my body-4 class div instead of pushing it downward and lengthening the page like normal. The page almost seems to have some sort of max length, although I don't believe I've set any sort of max page height.
.body-3
{
/* what's going on here?*/
if you query this on the testing area of the company website that I am working on right now, in the external css file, you'll see exactly what I'm talking about.
This testing page is live here:
www.testing.agcomputers.net
Note: that black box appears to be within the body-4 class div (light grey area at bottom) but they are actually contained within the .body-3 class div, and have no upper margin that should push them down into any other div.
I'm unable to choose an answer without enough karma, but these guys below have found my obvious mistake, where I forgot to close some divs. Thanks guys!
You have 3 divs you did not close, which is messing with your structure:
<div id="transition-left">
<div id="transition-right">
<div id="center">
An easy way to find these problems and more is to validate your HTML.
Among other potential problems, you can find:
Line 138, Column 33: Unclosed element div.
You need to close all your open divs.
You currently have 3 unclosed divs inside/including the body-3 class, which causes your body-4 div to be nested and thus not behave the way you expect it.
Other people will give you a fish, I will teach you to fish for yourself.
Use XHTML (if local files, rename to .xhtml or if using PHP use the following before you send out headers (headers are sent as soon as you echo anything in PHP intentionally or not)...
$mime = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml');
if ($mime) {header('Content-Type: application/xhtml+xml');}
else {header('Content-Type: text/html');}
In Firefox right click and View Page Information and if the Type: says application/xhtml+xml then it's XHTML. When you produce malformed XML (XHTML is a subset of XML) the whole page will break and you'll get an error message.
...or you could just struggle with regular HTML and manually validate every single time you reload but that wouldn't be very productive and would waste your time.
XHTML is much stricter but the best path is never the easiest. If you get stuck on anything because of XHTML visit me at my site, it's fully-fledged XHTML and I'll be happy to help you out.
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
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.