I have a problem with my appended div's inside a link. I want them to be all connected without empty space at the bottom. I figured out that this is an <a> tag issue.
Here is the link to my codepen and an image presenting the issue:
http://codepen.io/Felnyr/pen/WRGRyQ
Image from Inspector:
There are two issues I see with your pen.
In the JS, you're missing a double quote after href=\"#\ on line 9.
To fix the bottom margin issue, you could just change the line-height to 0 for the channel boxes parent.
Like this:
.channelBoxes
line-height: 0
This fixes issues at all responsive breakpoints.
To keep the text formatted correctly. You can use a negative bottom margin but this may not be complete cross-browser compatible (especially some Android browsers seem to have trouble). You could add margin-bottom: -10px to your .Box css.
Related
so I want to show like button but it doesn't show that element when I run the emulator. and only show like blank space at that field. the code like this,
HTML:
<p><strong>Click Here</strong></p>
but when I removed the style inside, it will work like hyperlink text. the code below
<p><strong>Click Here</strong></p>
I used flutter_html: ^2.2.1
I tried your code & found few issues in it.
You height is conflicting with padding. You have set height as 20px and padding as 8px. In this padding is applying within this height leaving you only 4px to view. I think its because the height is not a valid inline style supported by flutter_html. Read here. To support padding in the design I suggest try removing removing height, changing it to some bigger value or using line-height.
You are using background which is again not a supported inline style as per docs here. Try changing it to background-color.
Let me know if are you still facing any issue.
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
Hopefully this should be short and sweet, I am making a website and i want two 40x40 images placed next to each other, the problem is that their seems to be a rogue margin or padding that is being applied to it. I have tried to remove it but with no luck.
Image:http://i.minus.com/jblfTtkLGRaE74.png
As you can see i have firebug open and it shows that there is no styles being applied to the images to cause the blank space inbetween the images to happen. Also the images are not childs of a div. and i have used a CSS Reset.
If you need anymore information please ask.
Thank you.
It's because images are inline elements. Options to remove the gap include adding float: left to your images or removing all whitespace between your images in the HTML.
If you're using firefox and you're certain that all the space taking values have been zeroed then it's probably the font size of of the white space, remove any whitespace or spaces between the 2 images, you can also try setting the font-size of the parent element to 0.
Interesting, without looking at any of the code / the reset that you claim to be using. Here is how I would quickly put two images right next to each other using CSS.
img {
float: left;
margin: 0;
padding: 0;
border: 0;
}
Sometimes you have go back and dig through your code a little bit and do a little rewriting. Best of luck!
You can use the CSS
word-spacing:-1em;
on the parent container to remove these spaces between images.
Have you tried using a table and placing each image within?
The main borders on the page tend to be wierd but I've realised the table method tends to allow for more refinement. Best part is it wont show up on the page.
I've got an example mht file here that will help demonstrate my issue; if you are using FF then this addon will help you view the mht file. You will prob need to download the file and view it locally since github doesn't provide the right mime type for the file.
Basically my issue is this that I have a div which is 32px in height surrounding another div which is 29px in height, and I have no idea why the former is 32px tall.. It should be 29px tall afaict.. I don't want to set height:29px tho because if you resize the window so that the nav items take two lines then the height shouldn't be 29px for either div.
So what is wrong here?
make the following changes-
(-) to make your ul and wrapper div bottoms to align change class #navigationSecondary ul.base
to have a display:table; instead of display:inline-block;
(-) to remove the 3px of blue at the bottom change class #navigationSecondary to have padding:0; as sugested by Marcel.
the use of display: inline-block; on the ul.base is the cause.
when you use that it formats an element like it were inline (it only formats the actual content of the element like a block), so ul.base will have the usual 2-3px top and bottom "padding" that a normal inline element has. It's not really padding it's the leading vertical spacing i.e. it's what gives lines enough space to provide for the ascenders and descenders of letters like g, h, p, etc.
the use of it here is to make it seem like your ul is containing the floated child list elements. To make an element contain it's floated children there are other ways to do this, one way is, on ul.base
remove: display: inline-block
add: overflow: hidden;
[UPDATED] re the tabs.. sorry I didn't see them before I started
Here's the "float everything" solution to containing child floats as it applies to your code, with some other suggestions too
.menuContainer all it needs is position:relative; and the border-right rule
.navigationSecondary float it left with a width of 100%; (you can remove z-index it's not doing anything)
.wrapper float it left with a width of 100%, remove the height
ul.base doesn't actually need anything but remove the display-inline-block.. it's not containing the child lists but there's no effect involved, if you want to you can float it left with a 100% width too
[UPDATE 2]
I just copied this to a plain HTML document and I think that just changing the DOCTYPE to an HTML4 transitional one solves the problems with no changes to the code ?? (why that should change the display be I don't quite know! - but the use of "target=_parent" is "not allowed" in Strict Doctypes so that'll be why it's not validating)
I'll put it in JSBIN so others can try it out on various browsers
I changed it to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
jsbin (with original HTML5 doctype) is here http://jsbin.comhttp://jsbin.com/agihe5/2/ - shows gap
jsbin with changed Doctype - but no changes to CSS code - with flash video to show dropdowns are working is here : http://jsbin.com/inare6/2 - no gap!
jsbin with no changes to Doctype, suggested changes to code and the flash insert to show z-index working is here: http://jsbin.com/iriya4
with the latter, code changes are detailed in the source, they have moved to the bottom of the snapshot CSS
I've tested the changed Doctype version as working in IE7, IE8, FF3.6.15, Safari4 (Win) and Chrome
Providing a test case which requires me to use Firefox and download an extension to view it is highly annoying.
I just did it anyway (purely because of the bounty), and the only change you need to make to your test case is:
On #navigationSecondary ul.base, add vertical-align: top.
The extra height is gone.
Here's a demo based on #clairesuzy's demo titled "jsbin (with original HTML5 doctype)".
(The only change was adding the aforementioned CSS rule):
http://jsbin.com/agihe5/3
The other answers may work (I didn't test them), but (providing I've understood the issue properly), this is by far the easiest fix.
Apparently #navigationSecondary has padding:0 0 3px; set in unnamed-1.css on line 2.
Everything inside ul.base has a height of 24px. Itself has a padding of 2px. So it's height is 26px. It's parent div.wrapper has a height of 29px, 3px extra. It's not caused by the 3px padding of div#navigationSecondary. Nothing is contributing the extra 3px so I'm suspecting a float issue. Anyway I managed to fix it by floating 2 divs.
Add float: left; width: 100%; to div.wrapper and div#navigationSecondary.
Remove display: inline-block; from ul.base.
Floating div.wrapper and div#navigationSecondary collapses them to their nearest floated child element, in this case li.base, and removes the extra 3px. 100% width brings back the stretch.
Hope this helps.
<body style="zoom:0.99; -moz-transform: scale(0.99); -moz-transform-origin: 0 0;">
adjust accordingly, and change hight and width around
Of course. This is simple. A very elementary element positioning issue.
inline-block default vertical-positioning
ul.base is an inline-block. which means that it has spacing calculated like a block, but positioned like an inline-element.
The default positioning of inline-element is to align on the baseline of text. However, text goes below the baseline for letters such as g, j, q etc. This is called "descenders".
The height of a box is always from the top of the font to the bottom of the descenders.
The wrapper takes on the height of its children. Which means that the inline-block ul.base, positioned on the baseline.
Your font at that particular size happens to have a 3-pixel descender. Voila. Your mysterious 3-pixel gap is merely the text's descenders. And your inline-block element is positioned on the baseline (i.e. on top of that 3 pixels).
Tests to confirm that this is right
Change font size. You'll see that 3-pixel changes. Change font size to small enough and it'll reduce to a 1px descender. Your so-called "gap" will shrink.
Change ul.base to something other than an inline-block (of course you have to add something to clear the floats inside). It will no longer have the 3 pixels at the bottom because a non-inline element is not positioned on the baseline.
Position ul.base on the absolute bottom instead of the default (baseline). That 3-pixel gap disappears. Use this CSS rule: vertical-align:bottom
Morale of the story
You always have to be careful with baseline positioning whenever you use inline-block display style.
Off topic
Handling font descenders is especially frustrating with Asian languages. As you know, CJK languages do not have characters that go below the baseline. However, they are typically placed on the baseline (so that they can inter-mix with other European languages, which have descenders). However, when one places a block of text with a background containing only Asian characters, the text will look like it is moved to the top, with an ugly empty gap on the bottom (the descender).
I have a <a> element as inline block with a fixed width. I would like to show the <a> boxes next to each other, two boxes per row (exactly like in the first example). BUT if each box element is in a new line in the source code (second example), the boxes gain an invisible margin, which you can see if you have a look at the example with e.g. the Chrome dev tools. The width and padding of the parent wrapper, and the margin of each box is exactly calculated, so that the added invisible margin pushes the second box down into the next row.
I could just use the code of the first example (all the elements without line breaks directly behind each other), but I would like to know how can I remove this invisible margin so that the two boxes again fit next to each other in the wrapper div (like in the first example), even if each <a> element is in a new line in the source code.
Examples:
1.) Without line break in code (the layout I want to have): http://jsfiddle.net/mLa93/2/
2.) With line break in code (added line breaks after <a> element changes layout): http://jsfiddle.net/mLa93/3/
As fcalderan suggested white-space:nowrap on the parent should work. See http://jsfiddle.net/kkpKg/ for an example. If it doesn't, then you must be doing something different or wrong.
Ok, now I get it :-)
The best solution is to leave out the line breaks, however if you don't want that, the next best would be to comment them out:
<div id="wrap">
box 1<!--
-->box 2<!--
-->box 3
</div>
If that isn't a possibility the only thing that I can think of (and is supported by current browsers) is to set the line-height font-size in #wrap to zero and back to original size in the links:
#wrap {
font-size: 0;
}
#wrap a {
font-size: 14px;
}
Chris Coyier posted a good article about this problem:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I didn't realize this question was from a year ago!
Since you've spent so long trying to figure this out, I did some researching and found a similar question. I've adjusted your code here
solution
and it should work now.I placed 5 blocks because of the float case you mentioned before
EDIT: the problem was your margins. You have a 10px padding and 10px margins. If you had made your div 230px (3x10px + 2x100px) you would have gotten the same effect as the first fiddle.
try to use white-space:nowrap on parent element (the container of your links) and probably white-space: normal on links