Please see http://shivimpanim.org/testsite/
It is very simple css, and my goal is to essentially duplicate Apple's menubar
Strangely- I'm getting a white gap between several of the buttons, and the last button is breaking onto the next line!
For right now, I've eliminated the dividers in the graphic to be sure that it's definitely an html/css error and not the divider I'm seeing.
Please help :)
Thanks!
I am afraid I don't see the white gaps you are talking about in Firefox 5 or IE8 (which browser are you using?). However the reason the last <li> is dropping to the next line is because your button widths are too wide for the container.
Your <ul> is 960px wide, but the sum of your individual <li> widths is 970px. So if you reduce a few of your <li> items down by a total of 10px it will all fit in.
Related
I have a list of items with some styling. Basically, I have an anchor inside the list item, and the anchor has the gray background etc, while the item itself has a gradient bottom border.
Between some items, I get a white line. I've found that it's caused by the list item it self 'shining through' the label. Why?
It looks like it doesn't happen if no anchor text wraps.
It also doesn't happen if the bottom border has an even thickness (2px, 4px, etc)
I know I can hide the effect by setting the background color on the item itself. I'm more interested in why it happens then how to solve it.
Here's a link to a codesandbox showing the effect.
It seems that you are coming across a fairly well known problem.
It arises when the system is trying to map CSS pixels into the several screen pixels that make up one CSS pixel on many modern screens.
Sometimes a screen pixel gets ‘left behind’ so causing a narrow line.
It’s a bit like a rounding error.
It can often be seen when zooming at certain levels. The fact that you see it on 1px sizing is what makes me feel this is the problem here too.
I have a hyperlink in the figure caption on my project and the link only appears to work when in mobile view / or small screen where the columns collapse. For some reason, this issue isn't replicated on JFiddle but it is when I test on a variety of browsers and devices.
I discovered that with my old code, the paragraph's area was overlapping the hyperlink's hoverable clicking space, and making it impossible to click until the image would stack above on smaller screen/mobile in the old code.
**Old HTML** JFiddle: https://jsfiddle.net/LybeppL3/7/
**So I tired a workaround**: see Current Code: https://jsfiddle.net/5c2sm9s1/1/
OR # PreemPrice.com
Specifically, I am trying now to break up a column for the picture on the right, the paragraphs of text to it's left, and when on mobile, that the picture stacks above the paragraphs of text and is centered.
However, my workaround does not look as nice/ not as responsive on mobile as my old code.
Specifically, I miss how in the "old" code, see JFiddle, it is really responsive in that the image keeps the same size, and once it's too big, it collapses over the text. In my current work-around, the photo shrinks uglily, and then stacks below instead of above the paragraphs.
Also, I miss how the image is fully centered at the top in mobile device in the old code.
I would appreciate help in getting this to work properly! Thanks!
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I am trying to make a simple 3 slide carousel to fit into a 6 space column. Every time I add the carousel, though, it comes back with a large white space at the bottom of the div. Can anyone tell me why this may be happening?
I've looked at setting a strict height on the div but then the site loses it's ability to be fully responsive when it is on mobile devices.
The site is here: http://mylomatt.mylio.com/stackoverflow.html
The blank space is directly below the image/carousel of images.
Your .carousel-inner class has bottom padding of 120px. See line 1653 of custom.css. Remove that (or make it smaller) and you should be all set.
I'm looking to build a progress bar that I will generate programmatically. I'm a css novice, at best. Here is what I have so far; using tips from this question.
Ideally, I would style the following simple HTML, but I'm open to adding more tags:
<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
<h2><span>So Far</span></h2>
</div>
Two, maybe 3 issues:
Right now the "text over line" is accomplished by making the text white, on top of the line. This ends up cutting into the green background. To avoid this, I guess I need to have the text (without a background color) and lines on either side of it?
Obviously my formatting / margins / offsets are a mess, and the top of the box borders / hr alignment is not quite right (seems like the top text needs to be shifted up a couple pixels or the container down a couple pixels, but I'm having trouble doing this).
Thoughts on a cleaner solution that gets me where I want to be?
I've created a working fiddle for you. http://jsfiddle.net/avrahamcool/QpWqd/46/
the main trick is to differ the white background and the text of the h2 elements, giving each a different z-index.
both the background and the text are above the border.
but the green background come between the white and the text.
so the layers are:
border
white background of h2 tag
green background
text
Tested on: IE10, FF, Chrome