I read few articles on float used with nested divs but I'm unsure as to where the real culprit is...
The following is the html I'm using ..It works everywhere but in IE7.
The fiddle link is http://jsfiddle.net/7NynC/8/
Hope some html souls to make this life easier.
IE7 is sort of screwy in that respect. If you want your right-floated elements to stay on the same line, you'll need to place them higher in the markup, i.e. before the element to which it's supposed to appear adjacent. (fiddle)
I assume your problem is that the toolbar to the right is dropping down a line (I didn't check IE7). Just switch their position in the code (put the right-floated element first) and it should fix it.
Related
I have a problem with extra spacing after floated elements in Internet Explorer <= 9.
It is the only browser that renders this page with some extra spacing after the HEADER, if some floating is present within (If I remove floating - spacing goes away as well)
I know that I could use overflow: hidden and yes, it solves the problem, but in this particular case I cannot use it, because I have a drop-down menu in the header. Otherwise, I would have used it already.
I tried using this "clearfix" solution: http://nicolasgallagher.com/micro-clearfix-hack/, but it didn't work.
Is there any simple solution without dirty hacks that would fix the issue ?
Fiddle: http://jsfiddle.net/kkg8z/
P.S I'm only interested in supporting IE9 as the lowest version. Everything less can just go to hell
P.P.S
For those, who didn't notice any difference.
Turns out that since #content has display: table attribute, #header should also have one, according to IE :)
Crazy stuff.
I'm having trouble getting my head around an absolutely positioned :before element. I'm after a big quote mark to sit behind a testimonial. I used a :before element as it is a font and is therefore scalable for retina displays, saves an extra http request for the image (I don't have any other images I could make a sprite with) and it also affords me more flexibility of position (a background image would need padding on the left of the element, which would mean playing about with my grid and losing uniformity across other pages I'm using the CSS on).
Hope that makes sense! The problem I'm encountering is that the :before element is covering the text above it. Not much of an issue if it's just text (although still an issue), but there's a link there that isn't completely clickable…
Here's a jsFiddle of my issue:
http://jsfiddle.net/tempertemper/KzQZQ/
I'd assume as the :before is on the li element it would sit behind the blockquote and cites but it doesn't look like that's the case.
I've tried z-index and can't seem to get it all working properly. I've also tried changing the blockquote and cite's position value but no joy.
Thanks for taking a look :)
I did notice the problem in Chrome as well. By just adding a background to the :before you can actually see what is happening (a trick i often use), or you could try the 3D view in Firefox. Your suspicion was right, the brace is actualy lying on top of the link. This makes sence as the DOM is rendered before the css is apllied. Adding a z-index did solve the problem though. I updated your fiddle: http://jsfiddle.net/KzQZQ/1
This should solve it. Strange that this did not work for you, but perhaps you where doing something wrong... Let us know if you have any more issues with this.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).
on this site, http://dncminneapolis2012.com/new2 the content (where it says Minneapolis 2012 Democratic National Convention) is hidden beneath another div in IE7.
Can anyone tell me how to fix this?
Everything works great in Chrome, Firefox, and Safari
I don't have IE7 atm and this is just a tip not an answer, but there's a bug in which if you have an absolutely positioned element that has floated siblings, the AP element gets completely hidden.
I notice you have a ton of floats/AP'd elements so that may be the case.
Things to do when debugging:
remove all elements that aren't vital
use overflow:hidden to make sure elements arent being overly expanded and float drop occurs
apply zoom:1; all over the place through say, *{ zoom:1 } to trigger hasLayout.
I might take a look at this in the morning when I have IE7 available # work
Looks to be the <div class="main_content_wrapper">, as far as the IE developer toolbar can tell. The mysterious transluscent overlay randomly disppears as you click around in the DOM the toolbar displays, so not sure why it's there. Possibly something borking on the jquery fade-in routine?
Since they were in separate main divs (not nested under one main div), I had to rearrange my html to get the content to be in front of the container.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.