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.
Related
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.
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.
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.