Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm just starting in on a new site and am getting extra space at the top of the div's I'm building for the home page. Using Safari's Web Inspector, I've eliminated any obvious padding or margins being responsible; but it's also seemingly telling me that the height of the div's is, for some reason, set to a greater amount than the image which should be its maximum height.
Sigh.... 10 minutes in and I'm already banging my head against my desk. Well, about to anyway.
This is the very-much-in-progress site:
http://compassionglobally.org/wordpress/
You can see a black strip above the first area and a grey one above the second area. I can't figure out where that space is coming from. And it's really bothering me.
I am using a WordPress theme which I realize may be interfering in my formatting, but I suspect that this isn't really the issue.
I removed all spaces and carriage returns since I know that this can cause space to be inserted, but it hasn't helped. I hope another set of eyes can!
Thanks!
Adam
Maybe you just remove the blank <p></p> that you really don't need it.
remove that <p></p> after the <img/>.
And your layout will be good.
Take a look(which <p></p> you should remove it.)
It comes from the paragraph margin. Probably the easiest way to fix it (without removing the margins) is to wrap those paragraphs inside a container or to do something like this to the .homeStripContent:
.homeStripContent {
float: left;
width: 100%;
}
Or just to negate the top margin: .homeStripContent {margin-top: -28px;}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I'm building a web app using HTML & SVG, and I've run into a weird problem with tables. When I move my table into a particular div, all the cells lose their spacing.
This is my expected result:
This is what I actually get:
To achieve the expected result, I put my table 'habitruler' inside 'main' but above 'habits':
What I want to do though is put 'habitruler' inside 'habits' like this:
All I'm doing is moving it inside another div, but the moment I do that all the spacing disappears between cells as you see in image #2.
This is the css for the div 'habits':
And this is the table inside 'habitruler':
This even happens when I remove all the other child elements from 'habits'. I can't find anything out of the ordinary that would cause this. I also can't find any information on tables that would explain this behaviour. Does anyone have an idea why this is happening, or what I can try next to find out?
habitruler maybe inherits style from habits, try !important
(also show css from devtools for habitruler)
Try using:
table{ table-layout:fixed; width: 100%;}
If it doesn't solve the problem please show what's styling and is having. So, I can propose better solution.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I usually build my wordpress sites by using a theme and creating a child theme. Generally I have done this with Wordpress 2013, but this time decided to take a crack at it with 2014. I have run into a few issues but finally landed on one I have not been able to resolve.
http://demo.diocesan.com/robert/
On this page, it tells me the page has a height of 2000+ px. When I try to find where this height is computed, I find nothing. I have set the height on many different elements to 1000px (even the HTML tag itself) and I still have this mysterious height value.
I suspect this has something to do with the 2014 masonry script (Admittedly I am not great with javascript) and any direction on this would be helpful. So my question - Does anyone upon glancing at this know where the height is coming from and what steps I can take to remove it?
The problem is the CSS on #secondary - it has min-height: 100vh applied, which will make that one element at least one full viewport tall.
It's then hidden because the following element (#primary) which contains the content is given a float: left which makes it move up, so that it appears that the gap is beneath #primary, even though it's not.
Removing the min-height on #secondary, or setting it to a sensible value, will fix your problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm having a weird issue that I appear to only see in Firefox. Chrome and surprisingly IE work just fine. The site that link below works fine in both of these browsers but in firefox the whole page gets pushed to the right while the #spotlightbar get pushed to the left. Im at a loss of what the problem may be. Any suggestions?
http://www.bristolymca.net/index.php
EDIT: So this has been solved. Thanks for the quick help to all.
SOLUTION: Obviously when you you float one div on a page inside of a content block either the rest needs to be floated as well or you need to clear the float before and after what you have floated. This was my mistake in misnaming CSS classes. So for future reference make sure those are the same name!
You have no styles on
<div id="contentHome">
Add some css like this;
#contentHome {
float: left;
width: 100%;
}
Well, my first suggestion would be to prevent using tables for layout elements and inline styling.
I removed the inline styling and added the following css properties to it:
width: 100%;
float: left;
That solved the problem to me.
PS: Pretty webpage, congrats!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
There's this really cool effect I'd like to recreate, however I don't understand how the developer is achieving it. I've looked at the source - but I still don't quite understand.
The site is: http://drewwilson.com and below will be a couple of screenshots of what is happening.
When I click on the ellipsis on the header, a little about element pops up and the actual site 'zooms' backwards, leaving whitespace around it's border and greys out.
I can't see any javascript or jQuery doing it, so i'm assuming it's css?! - Although I might have missed something totally - so any help is appreciated :)
Inactivated
Activated
I think the whole page is wrapped in a div which have a 100% height and 100% width. So you have a control over everything inside that element.
You can achieve that by using css3 transform: scale(value); and of course jQuery
see samples here