http://corexii.com/web/shinji-eme/empty-space-problem.png
I cannot for the life of me figure out why that empty space is there. It's inside of section .Blog. Removing the section .SidepanelPanel (the ad) makes it go away. Some different content for .SidepanelPanel doesn't cause this to happen leading me to believe it has something to do with the link + image contents of the .SidepanelPanel... but why? And how to fix?
If you apply vertical-align: top; to .Blog, the large gap goes away.
Related
There is some empty space on the right side of a subreddit that I moderate, r/Fantasy. The page looks normal on load, but there's a horizontal scrollbar, which if I scroll shows the empty space, with just the background, like so:
Same issue on mobile. The CSS for the subreddit can be seen here.
I think the element causing the issue is the div containing the AMA schedule in way down in the sidebar, but can't figure out what's wrong with it. I'm pretty much dead in the water when it comes to web design/CSS, so any help is appreciated.
And yes, I realise plenty of similar questions exist already, but none of their solutions helped me yet.
Problem is caused by the class .side .md blockquote:nth-of-type(1):after ,
which is used to create the separator. This has the property display:block and width:400px; which is causing it to overflow. You can change the display type to initial or put a overflow-x hidden on parent element.
you can add the property overflow-x: hidden to the class .side .md blockquote to get rid of the empty space.
.side .md blockquote {
color: #000;
font-size: 13px;
overflow-x: hidden;
}
My website doesn't show right with IE whether I use the compatibility view or not. The text area of my site is either placed too much right or waaay too much down (starts right from where the last part of header image ends for some reason, I can't force the text go over the picture?).
I'd copy-paste the code parts I need help with if I actually knew where did I do wrong, but since I don't, I hope it's not too much to ask for to check out the whole site and its code.
http://viuhku.net/shaghas/skpr/skpr/
And CSS:
http://viuhku.net/shaghas/skpr/skpr/style.css
Add float: left; in your CSS file under #txt
In your #txt class, you have a padding-right: 200px attribute; remove it and you should be fine.
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
My page is here. The section I am on about starts with CANVAS FINE ART WRAPS, you will notice between the first and second paragraph there is a big gap. I have looked at it on chrome (osx), safari(osx) and firefox(windows)
There's nothing in the markup to suggest the reason for it. Inspecting it shows no margin or anything causing it.
It sounds like Wordpress is sticking in something it shouldn't be. My suggestion would be:
Go into html view
Cut out all of the code
Paste it into notepad
Save the page as completely empty
Copy back the elements one by one into your html view and save.
Add display: inline-block; to the .box p selector. It should work after this.
the p has a margin - which should be reduced
also , the box class should reduce its line height.
edit
Also - ive edited your text to : 1111 and 2222 and it was fine
you probably pasted the text which contains some bad chars
The main issue I see is on line 199/200 of your normalise.css file:
it has:
p, pre {
margin: 1em 0;
}
If I remove this, the big gap is removed.
Here is a link to my problematic page:
http://www.studioteknik.com/lamouvance/programmation.php
I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...
Please, help! I'm sure it a one line solution... Thanks in advance!
Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !
I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?
I think I see the issue, try:
.content {
overflow: auto;
}
If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:
<div class="clear"></div>
With this CSS:
.clear {
height: 0;
clear: both;
}
Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)