Whats with the big gap halfway down my page? - html

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.

Related

How can I change the line height in the code cell of a jupyter notebook

The space difference between 2 lines of code in my jupyter notebook is too much. I want to reduce it.
I checked out the custom.css file inside the custom folder in my .Jupyter directory, but I have no experience with CSS. I'm confused between so many options to change which one. Is it possible to change this?
In CSS, the distance between lines is defined as line-height. I'm not entirely sure how this will apply to you as i have never used Jupyter, but if it works from a CSS stylesheet you could use:
*{
line-height:10px; // Tweak till happy
}
In that custom.css file try to insert the following:
* { line-height: 140%; }
That's a line height parameter which makes the distance from one baseline (= the line on which the letters are put) to the next being 1.4 time the height of the maximum space that is used for letters.
Change that value until you find one that's convenient (120%, 160%, whatever)
The * character at the beginning makes that apply to all lines in the whole document. If headers and similar look okay and you only want to change the line height for "regular" text, write p instead of *, which will apply to all paragraphs, like
p { line-height: 140%; }
browser always load CSS which it see till the end of page load, If you want to edit something from your page but you want to create custom.css for that so linked that CSS on HTML page after Jupytor.css. After that Everything you will edit will be displayed in your page. Still explain your question more nicely if you are not achieving your goal. Thanks
I was able to change the space difference between 2 lines of code by tweaking the line-height part in the following code. It is inside the custom.css file inside the ~/jupyter/custom directory.
div.CodeMirror pre {line-height: 1.1 !important;}

How can I make my iframe fit the whole section?

The problem I'm having is located at http://fourbetpoker.com/play/index.html
If you click on either "Poker" or "Dice", you'll see that my iframe has space around it (easier to see on the dicing tab). Can anyone tell me why, and potential fixes? I've been messing with the code for well over an hour and I have no idea what's wrong with it. I'm a newbie when it comes to Bootstrap/CSS. Thanks!
When I click Dice tab, I saw lot of empty space around for the content. It is coming because of the following class available in global.css file. Margin applied around the form.
#loginContent #loginHeadlineContainer
{
margin:100px 100px 0 100px;
}
If you don't want apply any margin then reduce it in the class. By Simple make it zero.
#loginContent #loginHeadlineContainer
{
margin:0;
}

CSS ContentEditable Span: Ugly Border

I have to make some text editable to form an Email. To indicate where text may be changed, I want to give a border around editable passages.
Sadly, it looks pretty ugly with:
outline: 1px solid #c9c9c9;
If the editable span contains a line break (border looks even worse!).
See fiddle: http://jsfiddle.net/Q5qdA/1/ for reference. Try to add a double line break and some text. Especially line breaks will result in very ugly vertical borders.
Another problem is (only tested on firefox), that if you add a line break at the end, you can't remove it (it creates a new break with type="_moz", which won't get removed...)
Is there some way to work around this ?
ps: I have jQuery / jQuery-UI at hand, but wouldn't like to use plugins...
its hard to get your problem, because its not easy to see, what you wish.
But maybe its better to get one outline for one span :
Here's my fiddle
http://jsfiddle.net/Q5qdA/7/
p {
width:210px
}
(for example)
with a width you can solve this.

Actual text area not placing correctly with IE - how do I fix it?

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.

Strange empty space in CSS table

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.