There is a mysterious gap appearing between my header and footer. I took out the main content divs while investigating so I know it is not those to blame. Here is my website:
http://classweb2.mccombs.utexas.edu/mis333k/msbcf555/TestSite/Default.aspx
I will share the stylesheet if requested, but it is long and I feel like the solution is something obvious that I have not thought of.
What I have tried:
Resetting the margins and padding
Making sure no line breaks or other divs are hiding between the real divs
Your #header element has display:inline-block applied to it. Inline-block adds visible space between elements if there is any whitespace at all - even a single space character. I'm not why you've made it an inline-block, as it seems like a standard block level element. Remove that and the space should disappear.
There are other options as well, though I think this is the simplest. For more information on the "mysterious" spaces that inline-blocks creates, see here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
This has plagued me for so long, and I've only ever found solutions that reduce the issue, rather than eliminating them. Three divs of 33% width (so technically, not even 100% combined width) look just fine on my screen, but when zoomed in, the left-most div falls to the next line. Why is this?
Mind you, this is after eliminating white space in code. I use the > selector in CSS to set the font size of the containing div (that holds the other three) to zero, which achieves the same results as the uglier, less readable solutions of putting things on one line, or using HTML comments.
I shouldn't need to provide any example code. It's an issue in any set of inline-block divs set to percentage widths inside a containing div.
It is happening just because of spaces between inline-block divs...
like Code
On above code browser counts a space between and
So add css property to parent
.parent {
font-size:0px;
}
See difference between this fiddles
Your Problem http://jsfiddle.net/BS72X/1/
Nd here solution http://jsfiddle.net/BS72X/
Hope this helps you..
I'm attempting to get this menu working in IE7. I've squashed every bug but this one.
When you hover a list item, the UL's within the drawer that pops out won't float next to one another properly. If you look at the page in Chrome, that's how I was setting up the CSS before (display inline block, etc). That didn't work either so I tried floating them left.
Floating left fixed an issue I had with extra text-indent on the left of each li, but the ul's still will not float properly.
Does anyone have any ideas?
http://playground.willpracht.net/megaMenu.html
Redo your code to remove as many of the > selectors as you can. They are making everything much harder to deal with. It's like giving everything an id, and makes overriding things longer and longer and longer.
Honestly I would have sub-divs instead of just menus, because you're making the first li's look like headers but semantically making them no different from all the other links. Actual headers with links inside make more semantic sense. For example there's a link called tools and then the rest of the sibling links are... tools.
Anyway, when floating things, look at your widths. I see a lot of elements with no widths declared at all. In IE, with floats, this is important. I would set widths (they can be in em if you want) of the sub-divs, and then widths for the floating ul children inside. Their combined widths together should not equal 100%. For example, if a div is 140px wide, don't try two floated ul's inside each with widths of 70px, even though that should fit, and will in most browsers.
I have some example mega menus if you'd like to see, but there are many already out there and I don't believe I have one with floating ul's inside the submenu.
I find myself placing a lot of divs, images and content in general with position:relative to stick to the design I'm following.
For example if I wanted to place a form closer to the top I'd put in :
.form_class{
position:relative;
bottom:150px;
}
Since the element keeps its position in the flux, I'd then have to put every other element upwards of 150px with position:relative as to keep the gap closed.
I feel like this is sloppy programming, how do real web integrators position their elements ?
Thanks in advance.
There is a potential problem with using relative positioning.
If you are using the relative positioning to circumvent a problem with a gap, the problem is still there in the background. If the gap comes from a margin for example, then the margin is still there. If you don't know where the margin comes from, you don't know if it's the same in all browsers, and you don't know if any seemingly unrelated changes in the markup might change the margin.
Also, as you mention, you are just moving the gap from the top of the element to the bottom of the element, so you have to keep adjusting all the elements that follow. With each adjustment you are potentially adding another level of insecurity, where the layout might break in another browser.
Most browsers have a developer tool, where you can inspect an element to see exactly what CSS is applied to the element, and what the margins and padding are. You can use that to find out where gaps come from, so that you can remove them at the source instead of circumventing them.
There are a lot of ways to position elements, from margins and paddings, absolute positioning, floats, parent containers, explicit widths and heights. Without seeing your markup it's hard to critic but usually there are better ways than relative positioning. If you want to post some markup try http://jsfiddle.net
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
removed
So if you look at the tabs and look at hw2, you'll notice it has a little extra spacing that overlaps the spacing on the right. That's because wrapped the div in the <li>. You will notice the others not having it. I don't understand why is it making that extra little spacing after I wrap it.
Just for the record, this is for CSS spacing which has nothing to do with the JS.
Update: I found a ghetto work around!
Is it a space (or the absence of one)?
display: inline will respect whitespace.
You are putting a block level element (div) inside an inline element (li), which is invalid. Most browsers do a reasonable job of rendering this sort of thing, but the results are unpredictable.
I would suggest using divs for the higher level menu. You could use a container div for the menu and float divs within that for the individual tabs.
I ended up just changing the css for that page.