I have the below HTML code:
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee906da6f81f%3A0x512998f16ce508d8!2sSahibzada+Ajit+Singh+Nagar%2C+Punjab!5e0!3m2!1sen!2sin!4v1449838222081"
width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Now i have the following CSS:
body {
color: #fff;
}
.google-maps {
margin: 1em 0;
background: #000;
padding: .5em;
}
I have gone through the HTML and the CSS thoroughly , but i can't figure out whats 'causing the extra padding at the bottom in spite of the even padding i have given I.E.
padding: .5em;
can somebody explain why am i getting this uneven padding ?
FIDDLE HERE
iframe has display:inline; by default, it acts like a letter. For example, when you have a letter there is some spaces below the letter. However, you can use the below solutions:
1- vertical-align:bottom; Jsfiddle
2- display:block; Jsfiddle
or ..
Here is the image which is shown the extra space(2px).
Jsfiddle
The issue isn't technically with the padding; there is a small space after the iframe that is picking up the background: #000; style.
There is a similar issue located here: Unwanted Padding in IE Image Rendering in div Tag
I modified your fiddle and added a display: block; to the iframe, ran the fiddle, and all was well with the output (i.e. no more uneven padding). Here is that fiddle.
Related
In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be.
<!DOCTYPE html><html>
<head>
<style>
body {
background-color:red;
font-size: 10pt;
}
.menu {
background-color: #5f6062;
overflow:hidden; /* To contain floats */
box-sizing: content-box;
}
.right-menu {
float:right;
margin:auto;
padding:0 0 0 20px;
list-style: none;
}
.spacer {
background-color: #ffffff;
height: 20px;
}
.content {
background-color: #ffffff;
border-radius:0 0 10px 10px;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="menu">
<ul class="right-menu">
<li>Link</li>
</ul>
</div>
<div class="spacer"></div>
<div class="content">
<div class="content-title">There shouldn't be a 'border' above this...</div>
</div>
</body>
</html>
JSFiddle (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)
The most interesting part is that the issue seems to be caused by border-radius. If I remove it, the 'border' is gone. It will also go away if I remove some other element (the .menu div for example), but that is less of an option since I would prefer not having to mess with the structure of the site having this problem.
I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.
Also of note, while trying to reduce the size of my demonstration, I ended up with a code that showed the border in JSFiddle, but not in a plain HTML file. This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file.
Found the bug in EDGE's Platform Issues but still would like to find a workaround...
It looks like IE is rendering a transparent border to display the border-radius but picks the 'background' color further down the layers than it should (in my sample, using red instead of white).
So I went with workarounds...
On my actual page, two elements are having this bug. For one my workaround was to set the background-color of another element further behind the one with border-radius and for the other to set an actual border the same color as the element's background.
I am working on iframes, and I need to show only a particular portion of the page.
I want to display only this part of the blog.
http://s17.postimg.org/ickav5d33/pic.png
This is the actual page of the blog.
This is my code:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>
Here is a Fiddle
How can I achieve this?
It seems like you just need to tweak your inline CSS a bit. For example:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;">
</iframe>
</div>
This appears to match the picture you provided.
I changed the margin-left, margin-top, and width of the iframe. I also changed the div's max-width to a simple width with a different value.
I figured the values for all these using Firebug. I highly recommend familiarizing yourself with browser developer tools such as that (all modern browsers include some kind of "developer tools" these days) that let you play with these things "live" until you find the tweaked CSS you like.
JSFiddle: http://jsfiddle.net/cnmteg76/2/
You can scroll to any portion of a page with a link if the element has an id attrib. IE http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#boxB links to boxB scroll position any yes that can be used in as an iframe URL.
div id=post-body-2265336028782673534 is the closest element with an ID attrib. Unfortunately there are 10 br elements under this position and not html element with an ID closer. http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#post-body-2265336028782673534
If you can change the source page, place an id attrib in the font tag element (ID="linkanchor"). Link to the page, using the iframe, with a hash tag link ... http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#linkanchor
I have built several web sites and now i am having newbie problem that is driving me nuts...
Here's my code:
<body>
<div id="page">
<div id="page_wrapper">
<div id="header">
<h1>Heading 1</h1>
<div class="clear_both" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </div>
</div><!-- end #main_menu -->
<div id="left">
</div><!-- end #left -->
And here's my CSS
First i have a CSS Reset template from here:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
and then on another file:
body, html {
font: 10pt Verdana,Arial,sans-serif;
background: #fff;
margin: 0;
padding: 0;
text-align: left;
color: #333;
}
div {
line-height: 1.4em;
}
#page {
}
#page_wrapper {
}
#main_menu {
}
#left {
}
div.clear_both {
margin: 0;
padding: 0;
font-size: 0;
height: 0;
line-height: 0;
clear: both;
}
And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)
There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it?
I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S
Unexplainable DIV space
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heights for more information,
if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
JSFiddle : HERE
In top of your CSS file just paste this
* {
margin: 0; padding: 0;
}
Hope this helps.
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
If you delete this, all other will be like text below...
Sorry if I understand something wrong... ;)
div {line-height: 1.4em;} should be the culprit.
on your DIV or image use:
.div
{
display: inline-block;
padding:0;
margin:0;
}
and on body use:
body
{
padding:0;
margin:0;
}
I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.
Div comes with blank spaces whenever used.
In order to remove them
Use
margin-top: -10px
or whatever is convenient to your page setup.
Even After setting the frameborder attribute in the iframe to 0 there is still some white space present around the iframe border (unlike the original url/link page). Is there any other way to get rid of the white space or some white must be presented around the iframe as it is within the webpage (or part of it) and it cannot be the whole page? Thank you.
Maybe that whitespace is actually the outside margin of the document loaded in the <iframe>. Try styling the loaded document with:
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
Apply below to iframe
display: block
By adding this CSS we can make iframe in full screen
body,html
{
background-color:#DDEEDD;
padding:0px;
margin:0px;
height:100%;
width:100%;
overflow:hidden;
}
iframe
{
margin:0;
padding:0;
border:none;
overflow:hidden;
background-color:#DDEEDD;
}
try this:
<iframe bgcolor=#FFFFFF frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 width=100%
height="340"
src="myframe.html">
</iframe>
Simply add style="margin: 0 0 0 0" inside <iframe > tag.
example:
<iframe src="http://www.yahoo.com" style="margin: 0 0 0 0"></iframe>
If you want margin, you must add 'px' after number
(Thanks to "Inspect Element" tool of Safari Browser) this solved my solution.
Frederic's proposal solved my problem: howto get rid off the white border in a fullscreen slideshow for safari browser. Perfect! Many thanks, wimsch [Since I couldn't add a comment on his answer [[< 50]]: I put it here to let him know my gratitude]
try this
<iframe src="....." style="position:absolute;"></iframe>
I ran into a similar problem: I had the iframe inside a figure tag, and there was some white space between the iframe and the figcaption element.
<figure>
<iframe></iframe>
<!-- white space was here -->
<figcaption></figcaption>
</figure>
In my case simply adding iframe { display:block } solved the issue.
I'm having trouble with the layout of a simple HTML page. Please help.
Here's the layout I'm going for...
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
orange = body
blue/red = frame div
green = header image
black/white = menu div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu).
Internet Explorer, Firefox, Safari, and Chrome...
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
...
<body>
<div id="frame">
<img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
<strong>One</strong> |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine
</div>
<div id="content">
...
</div>
...
</body>
</html>
Notice there's no whitespace between the IMG and the menu DIV.
This is my CSS...
...
div#frame {
background: #FF0000;
margin-right: auto;
margin-left: auto;
width: 700px;
border: 5px #30AADE solid;
}
div#frame img#header {
margin: 0;
padding: 0;
border: 0;
}
div#frame div#menu {
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
border-top: solid 2px #FFFFFF;
text-align: center;
font-size: small;
color: #88BE34;
background-color: #000000;
}
div#frame div#menu strong {
font-size: medium;
color: #FFFFFF;
}
div#frame div#menu a {
color: #88BE34;
}
Why are Firefox, Safari, and Chrome showing that 4-pixel gap?
It has to do with the default rules for IMG tags.
I recommend always using this in your stylesheet as a default rule:
img{
display:block;
}
My guess is it's the line height of the image-elements line, since IMG is a an inline element. You could probably fix it by giving img#header display: block;.
Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there.
Edit:
When that is said, your menu should also be marked up as an unordered list (UL).
In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text.
freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode.
It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line.
You could either add the display:block property to a class or inline style on your image alone.
Or something like this:
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. In which case often you have already a class on the parent element like:
<div class="imagebox">
<img .... />
</div>
.imagebox img { display:block; }
You should wrap your menu links in an unordered list and then style the items with CSS. There are some reason for doing this:
Structuring your navigation links as a list results in more semantic markup. It better represents the content you are presenting. If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. This is especially meaningful if you intend the site to be viewable by mobile browsers.
This may also (slightly) help search engines prioritize the content and boost your ranking.
You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect. This will be reusable and makes it easier to change the menus to some other style in the future.
See A List Apart - CSS Design: Taming Lists
There is an example there showing complete CSS for achieving this effect.