i can't manage to find where is the cause of the problem :
the page where the css is 'broken' : messy layout
the same page, but with a another text in it shows the result as excepted : good layout
Thank you ;)
You have a (small) stack of machine detectable errors. It isn't worth doing any further investigation until they are fixed.
Related
I'm not so well in web design. But now I'm using Robust Bootstrap 4 template for my project. I have a problem.
The footer's position is depended on the content above it.
I have read some answers in this site which involve many CSS configurations. I am worried that it could influence the template. Is there any simple tricky solution for me?
EDIT:
I am not sure to post the code because of its complexity.
BINGO! I just found a solution. Just adding css min-height: 95% to the content, and it works like a charm.
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've been playing around with wordpress plugins for a couple of hours and have managed to get most things working apart from a css-related problem that just occured.
I believe I've missed closing a div or possibly have some undeclared element present that I'm missing.
This is the site in question.
As you can see, it's displaying the content correctly. This one, on the other hand is definitely missing something.
I've been going through the positioning of my different elements but I just can't seem to get it all worked out correctly.
I'm guessing it's something obvious but I've got somewhat of a tunnel vision right now. Any pointers would be highly appreciated! I'm happy to share whatever code may be needed.
Just from a brief scan of the html the first red flag that I saw was two elements with the same id. I would start investigations there because even if it is not causing the issue you are describing, it is still something that needs some attention.
<div id="primary"></div>
<aside id="primary" role="complementary"></aside>
Edit:
As the comment below mentions, just switch the id of the div to content and it fixes it.
I have a site based on Solar Sentinel Joomla template: www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
The HTML is throwing a lot of validation errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sism.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
My guess is that Safari and Firefox are rendering around these errors in a way that is according to what you would expect. Try fixing the errors and seeing what happens. If nothing else, you'll have ruled out invalid HTML as the issue.
It looks like your div class="col3" is inside your div class="colright".
Try placing div class="col3" outside the other one.
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.