http://www.mapleboutique.com/_blog/maple_blog
can someone explain what's going on here? according to this link: http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/ –I thought it made perfect sense. I had container elements with set heights causing the weird floating. But after spending an hour going through and essentially deleting any associated heights I still have the problem in IE7/windows.
You need to remove clear:right from .blog-post .post-body to fix the heading overlap with the image and remove zoom:1 from .post-body a to fix the text-wrap around the image.
The heading is also floated and cleared right but clear:right on the post-body seems to be causing IE to clear all the floats, even the heading.
The zoom:1 seems to be clearing the image's intended float by giving the image layout.
As #Webars has already said, this layout is overly floaty and should be simplified and could be done without the need for zoom hacks. However in the meantime, the IE specific styles (zoom being one of them) could be added to a seperate stylesheet and included for IE only using Conditional comments.
Related
I am currently developing a new website and have problems with IE7. First image is what it should look like. Second image is what IE7 renders (I use IETester to test older IE versions).
The first problem is with the white background which is applied with the following trick. There is a div that contains both left and right column with background-color: white; The left column has the same background as the page (and some padding-right) so that even if the right column' height is less that left's they appear to have equal height.
The second is with the list (ul) below the dummy text, which appears really messed up.
At first I thought that this would be easily solved with some "clear: both" here and there, but it didn't. I've tried lots of things but with no luck.
Any idea what I should do?
Tia,
Nikos.
Modern Browsers:
IE7:
Ok, I solved the problems mentioned, after I read some articles about hasLayout. By applying specific width or zoom: 1 (there are other ways too in the previous link) to certain divs that didn't wrap or clear properly, everything seems ok now.
I'm banging my head on this one.
I have a disturbing horizontal scrollbar that appears only when browsing my site in IE7:
http://www.regia.it
I have tried and tried to stop this from happening by using overflow:hidden on my divs but for some reason I just can't seem to find what is causing the problem.
Any help is greatly appreciated.
This does seem odd. I am assuming you don't mind if the page is not horizontally scrollable even on small screens, since you have tried to use:
body{overflow-x: hidden;}
In which case if you apply it to html rather than body it should do the trick:
html{overflow-x: hidden;}
I wouldn't really want to implement this long term, but if you are looking for a quick fix this should be ok as a temporary measure until you can work out what is going wrong. I would also put it in a conditional comment so as not to ruin the experience for the majority of people on modern browsers.
<!--[if IE 7]>
Link to alternate style sheet
OR
<style> /*CSS in here*/ </style>
<![endif]-->
EDIT : I have found the cause of the issue, so there is no need to use the above workaround. As I had suspected the issue was related to absolute and relative positioning.
You just need to remove position:relative from .grid_2 and .grid_12 and the scrollbar will disappear.
I came across this vexing issue too. I had a table in a div, and these were inside an outer div. When I removed the style to make the inner div width:100%, my 'IE7 only' scrollbar situation disappeared.
Hopefully that is somewhat helpful.
Thanks to Jonathan Amend, the css is now fixed in iebug.html below.
It's hard to really explain this problem without looking at it in IE6 or IE7, but anyway if you have a look at the following pages on IE6 & 7 you'll see next to "send me a brochure" and "I would like more information on (tick one or more boxes)" the checkboxes and their labels have been mysteriously pushed or pulled down for some reason:
http://sonic.huntinternet.com/iebug.html
I've tried altering the margins and padding on all my elements to 0 yet this has no effect on IE6&7 - meaning I think it's a bug of some kind.. however I don't really have enough experience to know what bug to even look for so any kind of pointer would be nice.
FYI I've used a guide off the sitepoint website that suggested using nested lists, but really that shouldn't make any difference. Both the xhtml and css are valid according to w3c's validator.
Thanks for your help!
John.
Add *display: inline-block; to your .enquiry-form ol li. This is a common bug with how IE 6/7 clears list items (block elements by default) onto new lines.
For this, it's being pulled down because your floated label is two lines long in copy, so the OL is aligning it's top position to the top of the second line.
A solution that comes to mind here is to make the OL floated left as well. This will, of course, require that each LI has the clearfix styles on it (styles for clearfix can be found here: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/).
EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.
See: http://bit.ly/i7ER3e
See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).
In IE7/IE8 the logo, it becomes hidden behind the pink block.
I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.
Any suggestions?
(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)
The problem is not z-index in your case
your body has some line height which is not sufficent...
line-height:180%
change this to 200 or so it works, but still that is not good approach
but just found the issue....
Try using:
z-index: -1;
for the elements that should be below the logo.
try setting position:relative; as well as the z-index.
The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.
See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.