I have a large amount of excess whitespace on the right hand side of my page (shown best when viewed on a mobile).
I believe this is caused by a margin-right somewhere but I can't seem to find the underlying issue.
Live link: http://185.123.96.102/~kidsdrum/moneynest.co.uk
I found two issues:
First, the #weeklyearningschartimage image should have a width of 100% so that it resizes with the parent. This should fix most of the extra white space on mobile.
After fixing that, you may notice that there is still a small bit of white space on the right side (even on desktop). This is because the .row elements are not wrapped in a .container-fluid
Check here for the proper grid HTML structure: http://getbootstrap.com/css/#grid
I imagine part of the problem is...
<div class="row richard">
.richard {
background-color: #232323;
color: white;
font-size: 130%;
padding: 2%; <-------- This applies to left and right as well
font-weight: bold;
}
You are adding padding to the left and right of a row which might give you overflow.
Yes, I see what's wrong in your website, see your code
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text">
the class homepage-text you have written max-with: 700px; please fix it with some %(80-90).
Related
On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle
Problem with font-size (line-height) affecting <img ... > elements
(at least in webkit / safari) It seems that extra space is applied under elements according to the font-size / line-height that affects the parent container.
in this example, the outer div is larger than the image (space is added under the image):
<div class="outer">
<img src="http://placehold.it/300x100" width="300" height="100">
</div>
but in this example no space is added:
<div class="outer">
<div style="width:300px; height:100px">
</div>
The bigger the font-size(line-height) on the outer div, the larger the space added. So the following CSS will fix the problem (but isn't a useful fix really):
.outer{
line-height: 0;
}
See a full demonstration of the problem here:
http://jsfiddle.net/mikkelbreum/wtKS2/
I'm sure this is a known 'problem', but I couldn't find a good treatment of the problem from my googling..
I would like to hear from others, if this is a well known problem (why would an image be treated as a text block with regards to line-height being added below it.) And is there an agreed upon way to handle this problem?
A way to solve it is adding the CSS property vertical-align:middle; or vertical-align:text-bottom; to the <img>. This will remove the space under the image.
I'm experiencing what appears to be a bug in WebKit's rendering of floating elements' width when they have margins.
The following renders as one would expect in Firefox (3.6) and WebKit (Chromium 5.0):
<div style="width: 100%; background-color: green;">
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>
That is to say, as a completely red box, with no green background showing.
Now try this:
<div style="width: 100%; background-color: green;">
<div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>
What is expected is the same as as before, except for 10% of the box on the left-hand side to be left green. This is what is seen on Firefox.
However, on WebKit browsers, one pixel of green is left on the right-hand side of the box: the floating elements no longer completely fill it up.
The problem appears to compound when more floats and margins are used, leaving a larger amount not filed up.
Is this a bug? A rounding error? It's certainly not what I expected. And more importantly, what can I do to get around it?
EDIT: After much searching I found that it is a reported bug; probably a rounding error as suspected: https://bugs.webkit.org/show_bug.cgi?id=5531
My most important question still stands: is there any way around the bug?
I suspect there is no magic workaround for this. Browsers interpret sizes in a mathematically different way. There is another question slightly related to this here, which is the particular problem I encountered. There is wider infomation here. I once read a great article explaining the problem very exactly, but I lost the bookmark. I'll try and find it again so I can post it here.
Essentially, different browsers round decimal pixel values differently. So, the short answer is you will never get an exact cross-browser solution as long as this differences exist. The particular problem I had was the one described in my first link: even without using percentage values (fixed pixel sizes), I encountered 2 "sides" between browsers, in which the vertical alignment of some elements would be different: Firefox and Internet Explorer, on the one side, and Opera, Chrome and Safari on the other.
Yet, this depended on the exact values of line-height and font-size I used, so sometimes I would get differences even between Firefox and IE, or other combination. Without using conditional CSS, I could only reduce the problem to those 2 groups, and then used conditional CSS to adjust the margins in Opera and Chrome.
So, to sum it up, as far as I know, I'm afraid you'll have to use conditional CSS. Cheers!
Perhaps something like this instead?
<div style="width: 100%;">
<div style="background-color: green; float: left; width: 10%;"></div>
<div style="background-color: red; float: left; width: 40%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
table.uitbetaling {
margin: 11px 18px 10px 19px;
border: 1px solid #8ccaee;
width: 498px;
padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
margin: 0;
border: 0;
padding: 0;
width: 496px;
}
table.uitbetaling tr {
margin: 0;
border: 0;
padding: 0 1px 0 0;
}
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">
It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
Try:
table{border-collapse:collapse;}
Its good practice to always set table{border-collapse:collapse;} in the css, and then use cell-padding="0" and cell-spacing="0" in the html anyway.