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.
Related
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/
I have two <div>s inside a parent <div>. Both the inner ones are styled with no padding, border or margin and as width:50%; display:inline-block;. The outer <div> also has no padding, etc. Firebug shows the outer <div> to be of 1240px width, and each inner one to be 620px. So why do they appear one below the other and not side-by-side? If i lower their width to 618px, it works. Huh?
display:inline-block is inconvenient in the way that it takes in consideration mark-up whitespace when drawing the elements, AFAIK. Try setting font-size:0 to the parent element if it doesn't have any other text, and set the desired font-size for the child elements.
P.S., first try eliminating white-space in the mark-up between the elements, to see if that corrects the issue.
It sounds like a fairly simple solution, if you have two blocks, A and B and they are the exact same size and you are looking at them straight on and they are lined up perfectly you will only see one block.
You're trying to make something display that doesn't fit inside of the container. You've already solved your problem size the container up or the contents down mildly to fit them together.
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then
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.
I've been working on trying to fix an issue with print CSS and IE where things would disappear when printing in landscape mode.
It appears the issue is that the element I'm trying to print (a large DIV with content inside it) spans two pages when put into landscape mode. What is happening is when the element spans two pages, the first page is blank, and the second page is printing what would normally be left over from the first page.
I think it's related to contained floats:
wrapper div
floated div1
floated div2
If I set the two nested divs to float: none in the print CSS file, then IE will print them, albeit not in the layout we'd like.
Before I spend another hour on this, anyone know what, specifically, is the issue here and if there's a known workaround?
The problem for me was that I was setting display:inline-block for the main container div. This along with declaring a width is a method to make a parent div extend to contain the floats inside.
I've removed display:inline-block and used clearfix instead. Problem fixed.
It seems to be a problem with tables, but it may just be the nesting, but it is an IE bug.
http://support.microsoft.com/?kbid=257097
Still trying to work around the problem myself.