Basically a product grid, which should be floated left.
Occasionally the last item is not floating left, why ?
Example here
http://bartels-sondermaschinenbau.de/Regale/Fachbodenregale-Lager/Stecksystem/
and here
http://bartels-sondermaschinenbau.de/Regalbau/
There is some js which is equalizing the box heights, which may be breaking things?
Somethings wrong, but i can't spot it.
It does not happen everywhere either, just to make it confusing
Example - where all ok
http://bartels-sondermaschinenbau.de/Werkstatt/Hallen-Aussenanlage/Material-Lagercontainer/
Doesn't work in FF 17.0.1 too. Add height: 201px to li without oxEqualized class.
Your code seems fine.
It looks like you have a zoom in your text, as pointed out by #lnrbob.
Press CTRL + 0 in Firefox, or follow View Menu in every browser and set zoom to 0, and retry...
Related
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I'll temporarily open this live URL, otherwise this problem will be too hard to explain:
[test URL closed]
Please open this in a browser that supports media queries and resize the browser to mobile, at around 400px of viewport width or lower:
As you can (should) see, the "Tags" option in the global navigation menu is visible, active and aligned to the right. This works correctly and is accomplished by floating it to the right:
.nav-option-active { #include inline-block; float:right; }
(note: I'm using SASS, hence the #include syntax)
So far, so good. However, as the viewport grows, more room becomes available to show the navigation options, both this active one and additional ones, as they normally should appear. With room available, they should not float. You can see how this work for the other navigation options when you resize the viewport into something larger:
See above. The global navigation options appear unfloated, as they should, however the active navigation option (which in this case is the tags link) remains floated to the right. All I want to do in larger viewports is to undo that float, so that the link will behave as an inline-block, unfloated, and appear as in the markup just like the other links. My attempt to do so is as follow:
.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; }
Note that the code is kind of desperate, it really should be a matter of setting float:none on only the .nav-option-active element.
As you can already see from the screenshot, the float is not undone, and I can't figure out why. In Firebug I see that float:none is indeed applied, and that float:right is striked through, overruled by float:none. So the CSS is definitely applied, but it has no effect. Clear:both has not effect either, although I think that isn't the right property to use. Strangely, if in Firebug I actually get rid of the float rules during runtime, the desired behavior is achieved.
I have a feeling that I'm overlooking something very basic or misunderstanding something fundamental, so how can I undo a float once set?
Your other list items are floated left. You'll need to float that one left, too.
I am using a wordpress template and everything looks fine in FireFox.
But- Surprise, Surprise - it looks wrong in Internet Explorer 8
On this page there are two issues:
http://www.thebuddhagarden.com/blog/
1) The search box (which is supposed to be to the right in the navigation menu) is pushed DOWN so that it is hidden behind the word Categories.
2) And (probably related) the navigation menu (which starts with Blog Home, Shop Our Store, etc.,) is supposed to be aligned to the LEFT. Looks great in FireFox, but it is aligned center in IE8.
No this is not a float issue.
I figured 2 issues in IE-7 its working fine in IE-8.
do the followings
1.Remove line height:18px from your h1 this will show your title which is mixing with navigation in ie7.
2.Put width:690px (or your desired, obv it should be less then 695px) on your <div id="navmenu-wrapper"> and things will be okay.
Internet Explorer doesn't like elements that are floated right following elements that are floated left. I'm not sure why this is, but for some reason it considers right floats to be new line right floats. You have two options here.
Put the box-search div above the navmenu in your code. This should not have any affect on other browsers - FF, Chrome, Safari, Opera - they will all display it as they do now. IE, however, will allow your right float to be on the same line as your left float, thus fixing the issue.
Or, give your navmenu a specific width such that it uses all but the space needed by search, and float both left.
Your problem is because of this property:
#navmenu ul {
margin:0 auto;
}
On line 656 of your styles.css stylesheet. You're trying to center a list when you want to float it to the left, so just change it margin:0 and you should be all set.
Please see this jsFiddle example for reference.
Most of us are fairly familiar with a simple technique to get CSS Colunms (2 divs side-by site) which involves floating one and pushing the other over using margin & width:auto followed by one of many clearing techniques. (Exibit A # jsFiddle Reference).
This Technique works fairly well and works nicely with all forms of clearing I know personally:
clear: both div at bottom of container
overflow: hidden for the container
Clearfix for the container
However the simple implentation of this works great when you know the width of the left element and want the right element to fill up the rest of it's container.
This technique works great in reverse too (float: right and using margin-right) with the caveat that you must put the floated (right) element first in the container for IE to render correctly. (Exibit B # jsFiddle Reference)
However, I've noticed a problem when we deal with nested clearing. (Aka Clears inside one of the colunms).
Once I put a clearing container inside the un-floated colunm (Exibit C & D) I notice some strange behavior in WebKit & Gecko browsers. The clearing element is getting caught on the outer float and clears the float from it's parent.
This does not happen when the master float is to the left. (Exibit E)
Is there a way around this, I'd like to continue using float: right on the known-width column if possible, this seems a bit strange that the one works and the other doesn't.
Also, strangely enough, this isn't a problem in IE9, (but is in IE 6-8).
For reference, this is the output of the jsFiddle as rendered by Chrome 17.0.963.46 on Windows 7 64bit:
Any Ideas?
Edit: I should note that wrapping the inner float with overflow: hidden seems to work, but it has it's own complications (such that it basically breaks anything with relative/absolute positioned components, DHTML Dropdowns. etc and isn't always a possible solution.
I could be missing something important here... but does this work?
http://jsfiddle.net/mikecruz/8Hnjg/
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.