I'm a bit 'OCD' sometimes so this is really bugging me.
http://music.george-b.co.uk is the site I am working on.
I have two divs. Both contain some text (Formatted the same apart from colour) and an iframe. The problem is the second divs text appears higher above the iframe than the other div. The code for the two divs is this:
Div 1 (Normal spacing)
<div class="omot">
<h1>One Mic One Take</h1>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/287376712&color=00cc11&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Div 2 (Incorrect spacing)
<div class="xprtd">
<h5>XPORTED</h5>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/295617923&color=ff0000&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Although one text is h1 and the other h5 they are formatted identically with css (apart form colour). I really would like the spacing to be the same. If someone could help me fix this minor but really annoying issue I would be very grateful.
Thanks
The second block of text (h5) has different margin values than the first one (h1). The h1 has margin before and after of 0.67em while the h5 has margin before and after of 1.67em. You can examine this by inspecting the elements through browser dev tools.
One solution is to manually add css rules so that the margins are the same. Or change the h5 to a h1 or vice-versa.
We need to check your CSS too, the issue maybe there. Nevertheless, you should try using margin-top:<<a negative value here>> ex: margin-top:-15px;
Try that and feedback
Related
I'm trying to embed a Power BI report to my website in Wordpress using the HTML tool. Since when using the embedding version of the report of Power Bi, a button to share the report appears (and it really can't in this case), I found a solution here on how to "cut" the HTML element so that the down part wouldn't appear. I'm saying this just to explain why maybe the code down can look more complicated than needed. My problem now is that I'm trying to center this element on the page, but I don't know why I can't make it work in all PCs, since in mine it appears centered but in others that I tried it didn't.
This is the code that I have until now
<div id="content">
<div class="row-fluid">
<div class="aligncenter">
<div style="height:500px;width:400px">
<iframe width="600" height="400" src="LinkOfReport" frameborder="0" style="position: absolute; clip:rect(0px,1000px,344px,0px);
; zoom:162%;allowFullScreen=" true=""></iframe>
</div>
</div>
</div></div>
I don't understand much of HTML or CSS so if someone could explain me what I'm doing wrong I would appreciate it a lot!
I managed to understand what was happening. Basically, I copied part of the code from the question I mentioned in the post, since I needed to crop the HTML element. I understood that a part of it was forcing the element to start more to the left (the part of <div style="height:500px;width:400px">) and another one to keep the element fixed in the same place, independently of the size of the window (position: absolute)
I also changed the type of clip I was using, since from what I read, clip property is exclusive to absolutely positioned elements. So now I'm using clip-path property.
Summing up, this is my final code:
<div class="row-fluid">
<div class="aligncenter">
<iframe width="600" height="400" src="https://app.powerbi.com/view?r=eyJrIjoiYjE4ZDExNGQtNjgwYS00OTUwLTkzYjYtNjM1YjNjMGJkMjU4IiwidCI6ImU0YmQ2OWZmLWU2ZjctNGMyZS1iMjQ3LTQxYjU0YmEyNDkwZSIsImMiOjh9&pageName=ReportSection" frameborder="0" style="clip-path: inset(0 0 38px 0); zoom:162%"> </iframe>
</div>
</div>
Hope these explanations help anyone that is trying to start in HTML and CSS
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr
I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..
Here is a simple example..
<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
style="margin: 0px; padding: 0px">
<tr>
<td width="12" align="left" valign="top">
<img src="content/images/corner_left.gif" width="12" height="12" />
</td>
as you can see there is white space between img and td... and I remove it so it looks like this:
<img src="content/images/corner_left.gif" width="12" height="12" /></td>
the problem is gone, (notice the td and image are right next to each other)
Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...
Any ideas really appreciated.
As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.
Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!
Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.
Hope that helps!
The only way to "fix it" (and I use that term loosely) is to remove the whitespace.
More importantly, you should stop making websites like it's 2001. :)
I've fixed adding this before the end of table:
<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>
Hope this help.
This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.
Setting display:block on the images did it for me.
I tried all solutions above:
a) tried the display:block
b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )
c) I tried using:
padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;
Solution a) worked. Solutions b) and c) did not work on IE.
But the BEST SOLUTION I found is this:
Add a hspace=0 attribute to the Image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />
This does the trick.
IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.
It's been this way for as far back as I can remember, all versions.
For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.
Other (and the best :) ) solution is:
set the td width/height to the image width/height with css
set image to the background for td
Like:
<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>
It works form me :)
(sorry for my english :"> )
Another late response, but you could also use line-height: 0; to remove the whitespace.
To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.
td * { line-height: normal; }
I had this issue too with an intranet site on Internet Explorer, so I turned off the compatibility view mode for intranet sites to fix it: