I am designing a site for a new foundation, and I have set April 15 as my deadline for finishing it. It is ready except for editing the content and fine-tuning the design. In the fine-tuning, I am wrestling with an irksome little problem that I would like to ask someone to please help me solve. The problem is simply this: a division in the site's structure will not function as I would like for it to function unless it has a border around it. Never seen a thing so erratic before.
The problem appears to be related to how the elements interact in the layout. First, there is the html tag which holds the background image, a jpeg of a creek with some buildings on the far side and a green grove of grass created by a divisional tag (#greengrass) positioned at the bottom of the background image . div#greengrass is styled to extend downward as a content div, resting on top of it, lengthens. It is this #greengrass element that performs awkwardly unless there is a border laced around it.
Specifically, if its border is removed, it projects upward and covers the background image, even though positioned to start where the background image ends. Its upward projection, therefore, makes the entire page background green. But when it has a border, the background image of the creek shines through as bright as the sunny spring sun.
Thus, I have one question: Why does the absence or presence of the division's border affect its behavior? Here is the url to the test site for the foundation: http://postmaterial.org/tests/signin-ap.php. At top center, I've added a link that lets you toggle between the bordered and borderless div#greengrass effects. I have no clue as to the reason for the tag's behavior and would appreciate an explanation. Thanks.
To answer your question: "Why does the absence or presence of the division's border affect its behavior?" I agree with ichao (as his answer stated) that collapsing margins is the issue.
However, I think the solution is to keep only a border-top: 1px solid #009900 as it is only the top border that is needed to prevent the margin collapse. This will prevent the horizontal scroll bar from showing up.
without the border of #greengrass, the negative margin-top of its child collapses through (and pulls the entire construct out of sight, topwards), and in consequence, #greengrass is not pushed down enough by top anymore.
border prevents collapsing margins, as display:inline-block or display:table or float:left would in this case (overflow:hidden is not an option here). In old IE, any haslayout trigger like zoom:1 should do. I did not test it, though.
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'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 struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript.
When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?
By the way: Are those costum (thin) scrollbars possible in HTML for div containers?
Thx in advance
All the best
Michael
The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.
MichiMichbeck gave a good answer regarding the tabs.
For the thin scrollbar try one of the many javascript/jquery plugins that are available.
One example is: http://jscrollpane.kelvinluck.com/
You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.