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.
Related
angular/ng-bootstrap context :
probably obvious answers for you experts but I tried since many days without success yet.
My header in fixed-top configuration is correctly displayed.
My Content in a container is also properly displayed with a top margin until I scroll down to a defined fragment by its id (like http://somewhere.com/page#fragment)
At this point, the browser jumps to the section but displays it at the top of the viewport which below the header and then makes it hidden by the header.
So I'd like to find a way to ban the top zone to be used by something else than the header.
Thx for any help in this matter.
I'm actually not sure what is "fixed-top configuration". Here is a nice solution for your markup requirements. It is a simple one and works without bootstrap or any other dependencies.
And take a look at the comment to that answer. There is an accessibility remark there.
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
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.
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I can't determine why this text can't be scrolled over and the hyperlink (all in the body of the page) can't be clicked. I'm not sure if it's a CSS issue, or some other kind of issue.
The XHTML is valid, but the CSS isn't totally. Wondering if I can fix without totally remedying every CSS element.
http://www.writershore.com/ltlaw
Thanks for any help!
The z-index of your div.main style is set to -1. Because of this, it is located under some other div. Just set it to something higher and everything should be good.
First on all, your site doesn't seems to validate 100% of XHTML.
Also, your Web site doesn't work correctly on IE, so you must have something wrong in your XHTML and/or CSS and/or JavaScript.
Now what you can do is to try to remove your reference to all your CSS file and see if it's work. If it's still doesn't work, remove your JavaScript reference and see if it's work.
If fact, at this step, what you want to know is where the error come from, because if I take your "a href" tag and put it in an empty file, it's work, so your XHTML seems right.
My way to resolve this kind of problem is to reduce the problem at is simple expression. By that I mean, remove all the external factor that can have an impact in my problem.
I hope this will help.
Let me know of your result.