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;
}
Related
This is my first time posting here and I'm entirely self-taught, so bear with me please if I misspeak or say some dumb things.
I have a Wordpress blog. For quite some time, I have had my blog post format set up so that a "header image" displays across the width of the content space. Across the bottom of that image, I list the title of the post and the date.
To do this, I created what I believe is called a class -- I named it "container" and the only defining trait of this class is that it has "position: relative;" inside it's brackets. (It also has a "shadow" border. I tried taking this out and it had no effect.) This was done in the "additional CSS" section of the wordpress site.
.container {
position: relative;
box-shadow: 1px -1px 7px rgba(0,0,0,0.8);
}
I also made a class called "text-block" that is defined as follows:
.text-block {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
background-color: rgba(128,128,128,0.6);
color: white;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
Each post begins with opening a container. Then, immediately inside of the container is the image, with the width set to 100%. Then, still in the container, I put the text-block in, which is oriented across the bottom. The background color is opaque so that you still see the image behind the text, slightly greyed out.
Here is the code that begins the post of which I've attached a screenshot:
<div class="container"><img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
<div class="text-block">
<h2 style="color: white;"><em>THX 1138</em></h2>
<h6 style="color: white;">Review by *me* | November 6, 2020</h6>
</div>
</div>
The crucial part that I need to ask some advice on is the bottom edge of the container. Until recently, the bottom edges of the image, the text-block, and the container all coincided. Now, instead, a small amount of excess "padding" was added to the bottom of the container. So now, the text-block overlaps the image and some un-filled space beneath it, as you can see in the image. I can't seem to attach a second image of what it should look like, but I think it is clear what I'm trying to achieve.
I don't know where this excess "padding" came from. I didn't change anything -- no CSS was changed. I was just writing individual posts, copy-pasting the format from an old post to a new one to get the correct formatting. I was previewing a single new post when I realized the change, and I thought that I had messed something up on that individual post. But then I started clicking through my site and realized every single post now showed the error.
In the past, some other weird formatting things have happened that stemmed from a plug-in. I've deactivated all plug-ins and the issue remained. I've taken the text-block out entirely and the excess "padding" remains.
Like I said, I'm self-taught. I've really only learned things as I needed to know them. So it's possible I'm missing something simple or committing some grave error without knowing it. But it seems to me that my container lacks the definition that would cause it to be larger than an exact fit to what I put inside of it. Further, the fact that I did not change any of the underlying definitions seems to indicate it's some other kind of issue. But I don't know where it could be stemming from.
I would appreciate any help to figure this out!
UPDATE:
First, Akhilesh, thank you for the reply. Your suggestions did not directly lead to a solution but they at least got me into the spirit of trial and error.
I have found two "solutions" to this problem.
The first is to set "line-height: 0px;" inside of the container in "Additional CSS." This isn't ideal because it means that I can't type regular text in this container anymore. Not very elegant.
The second kind of seems like a fluke. As I showed above, my posts begin with:
<div class="container">**here**<img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
That is a single, unbroken line of code. By starting a new line where I indicate above, it solves the issue. As I stated in my initial description, I have not changed anything. All my posts have been like this since I decided on the format. And as Akhilesh stated, it works in the fiddler (which was a new tool for me, so thanks again).
So, problem solved, but what changed to cause the issue? Something in the way that Wordpress interprets HTML code?
Try adding this to the img element : display:block;
Also, try to find whether there's any padding/margin set for the h2 and h6 elements.
Because I don't see any issues when I tried. Here's the fiddle: https://jsfiddle.net/vL80u1a2/
If that didn't helped, try using the Developer Tools in your browser. Just right click on the element and choose Inspect Element. Then when you select an element on the left side, all CSS would appear on the right pane. You can try trouble shooting for the padding using that Developer Tools.
Have a look at this for more details on how to use the Developer Tools: https://developers.google.com/web/tools/chrome-devtools/css
I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.
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.
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.
I've got an embedded widget from The Weather Channel and everything is working fine except that they've got a <tr> with a 1px height image that is expanding to a height equal to the other rows.
It's shifting the rest of the content down. Because it's just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.
If you visit http://www.scwd.com and scroll to the bottom you'll see the weather widget. The row with the grey td below #weather.com is the issue. It should only be 1px in height. I've used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.
-- UPDATE --
Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.
<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>
Best I can find is:
Inherited from div#wx_module_6107.wow_container
.wow_container {
line-height: 14px;
}
Are you hosting this or pulling the HTML from a foreign source? I suspect you can't control the HTML that's being rendered or the CSS that it's using?
I'm no CSS expert, so thus far nothing I've tried in FireBug have made a difference without affecting the rest of the table elements in the widget.
Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.
The image is in a td which has a line height of 14 according to your css:
.wow_container { line-height: 14px; }
I would give it a line-height of 1px and set the background-color to transparent. That makes things look nice for me. Is this widget coming from a wordpress plugin? If so which plugin? You may be able to edit the plugin code yourself.
I think the problem occurs because the font-size of the body. My suggestion is to add font:1px Verdana,Arial,Helvetica,sans-serif for the td that is the grey row.