I do not know how common this problem is for other users, but for me, it's pretty common and I have no real idea why it is happening.
But let me explain the symptoms. :)
When ever I do a layout using css and divs I many times end up with some place where margin just stops working as it should. It could be that it adds space to the left and right but usually not top and down.
Other times a margin on top of a div results in an unwanted space further down on the page.
Anyone with experience of this problem? And what am I probably doing wrong?
All divs are of course properly closed, so it isn't that obvious. And I know, I know, it's super hard to answer width no real example. I'm just throwing out a rope gere and hoping for a savior. Thanks!
I think the problem is with float and margin together. margin will not apply for example if you have a div with float:right and another div without float after it ! no margin between these two elements will be applied. unless you set a float for second element too !
but remember in these situations, margin applied for contents of both elements. not for borders. content will align correctly but borders not!
this is a common problem that we can call it as a BROWSER BUG!
If you have eny specific problem let us to know.
if u can post some code..it will be helpful. see these sites and try to see where ur going wrong..
http://www.w3.org/TR/CSS21/box.html
http://www.w3schools.com/css/css_boxmodel.asp
Related
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
Let's just start with saying I understand the box model. Throughout my short time as a developer, I've tried to stick very closely to semantic html and use responsive design practices. I recently got a job at a new company as Jr. Developer, and my Sr. is religiously against padding. Like he doesn't want it used in any case whatsoever. He wants me to use set heights and widths on everything, and if I need to simulate padding, I have to add a child div using margins. For example:
<div class="caption" style="padding: 5px;">
Caption
</div>
Would need to become
<div class="caption">
<div class="captionContainer" style="margin:5px;">
Caption
</div>
</div>
I've tried to figure out why this would be, and how I could possibly explain why I think that's bad, but it doesn't work. It just seems so wrong to me. He's said that it's because padding stretches the width of an element, to which I responded with box-sizing:border-box.
I have to do what he says, but sometimes we talk about it, and he does seem somewhat receptive to my suggestions, but I don't think I'm saying the right things. Is it actually better? If it's not, why?
This question may get closed for being kinda discussion-y but this has been driving me crazy, and I don't know where else to turn.
Thanks in advance!
It's anything but better. There is no sense in trying to add padding to a box using other methods when a CSS property made for this exact purpose, padding, has existed since pretty much forever.
Anyway, one counter-example I can think of is the fact that adjoining vertical margins can collapse.
There are several ways to cancel margin collapse (heck, giving an element padding is one!), but these methods aren't designed for preventing margin collapse as much as they do so as a side effect, and there is no simple "off switch" for collapsing.
Authors who don't understand the nature and the purpose of collapsing will find themselves having a world of trouble dealing with it. If you're going to use margins to simulate padding you may be in for a hard time. It's not worth it.
Your given markup is a prime example of when margin collapse can happen unexpectedly and cause headaches: if there are no other styles on your .caption element (like borders or padding), the margins of .captionContainer will combine with those of .caption, resulting in something like this happening. In the same vein, it's a great counter-example of when trying to simulate padding using margins ends up backfiring.
Compared to the potential issues caused by margin collapse, I honestly find your suggestion of using box-sizing: border-box a good case against using margins to simulate padding, while preserving the exact widths that you need because it's designed to solve that problem. Browser support is fairly decent too (IE8+), so unless you're designing for really old browsers, it should be OK to use it.
There are several other potential pitfalls of using margins to do things that padding was clearly made to do, but margin collapse is one of the biggest issues you'll face.
Explain him this way:
Margin is on the outside of block elements while padding is on the inside.
Use margin to separate the block from things outside it, and padding to move the contents away from the edges of the block.
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7..
Thanks in advanced!
The code was a bit long for here so see the link for what i am after..
http://www.mmageardirect.com.au/tmp/index.htm
Not so easy but check this out: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Try using vertical-align: middle and a set of divs with display:table, table-row, table-cell.