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.
Related
My nav bar correctly links to my 'work' section, but if I click ABOUT on the nav bar, it drops down to about 300px above the 'about' h2. I feel it may have to do with positions, displays? I can get the ABOUT anchored link to correctly go to the about section if I add
#about{
margin-top: 360px
}
Although this appears to be a poor patch on a larger problem with my construction. I've tried doing a lot of different things but I keep ending up with my work, about, and contact section starting to overlap into each other which I can't understand either. The divs dont seem to be stacking properly or something. ANY help is greatly appreciated.
http://wrobbins.me is the site. Thanks.
The link takes you exactly to where the about element is, it's just that the text in the element is pushed down by the job elements in the block above.
The problem is the jobwrap element. The floating elements inside it doesn't affect its size, so it has the height zero.
Add overflow:hidden to the #jobwrap style, and it will contain its children, and the about element will start below it.
When you use floats you should "clear" its parent or block you want to be below. Now your #jobwrap block have zero height and there is the problem with #about position. Use #about{cloar:both;} as hotfix and read more about floats and clearfix.
I'm building (kinda experimental) menu which is built on classic 'ul li' base except 'a' elements are set to display:block to enable precise positioning and sizing. some transform:rotate also appears, but this does't influence following behaviour:
All browsers except webkit ones display all menu items here the same way (correctly). But webkit hides child items ('item 2a', 'item 2b', 'item 3a', ...). The links are apparently present as cursor changes while hovering over the area where they should appear, but they are not visible. Oddly enough, when I set size of these invisible elements to slightly overlap their designated space (height of their parent LI) they appear visible (here)
Do you know what's happening here?
Thanks.
Personally, I think negative margins and css rotation combined can be a bit of a pain.
If I was you I'd
Set the a.rotate links to absolute positioning, so they don't upset the flow.
Dump the negative margins
Play with it a bit
I made this example here: http://jsfiddle.net/958qQ/
The rest should be easy.
I don't like your method using margins, it's complicated. think it will better to style with positioning. absolute position for child elements
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.
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.
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.