I have an IE7 CSS issue. I have setup a demo in jsfiddle, but basically I have a tabbed menu setup with rounded corners on the tabs (no rounded corners shown in jsfiddle). The rounded corners are floated left and right.
Everything works great in FF and Chrome, but in IE7 the floated elements are causing the tabs to consume the entire width. I have tried numerous things, overflow: hidden, position, display, etc... but I just can't work it out!
Any help appreciated.
http://jsfiddle.net/EszSr/1/
I would just set the corner elements to display: absolute; and the containers to position: relative if needed. That should work.
Simple demo on jsFiddle: http://jsfiddle.net/ZSpjk/1/
Something that I'd try (don't have access to IE7 atm.) is, to give the tabs a width (only for IE, e.g. through a conditional comment). It could be a smaller width than you actually need, IE will "widen" it as needed for the content.
Related
I have set up some divs for my layout, a main div and a menu div.
They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.
For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:
http://jsfiddle.net/kR7rs/2/
It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.
Removing the margin from main seems to fix it:
http://jsfiddle.net/kR7rs/3/
What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.
Kind of seems like a bug.
(Don't have FF right now to test it and see if it breaks it for FF.)
Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.
I created a horizontal scrolling page with a lot of images positioned next to each other. The images have to be positioned inline to align them vertically centered. Also they must not exceed and have to adapt to the viewport. To achieve the responsive effect I wrote a little JS-script that forces the browser to repaint the inline elements, which normally would only happen after reload.
Here is a fiddle.
My problem is: I want the .container to horizontally wrap all containing elements with no gaps between the images. Unfortunately almost every browser behaves different. To make it more visual I colored the .container in grey and gave the wrapping ul a green border.
In Firefox, Opera and modern IE all images are wrapped perfectly if I add float: left; to the .container. However this has no effect in Chrome and Safari: The wrapping ends with the width of the viewport.
Do you have a solution how to achieve the same effect in Webkit browsers?
Additionally, if I decrease the height of the viewport, gaps appear next to some of the images (but not in Safari ...). Those gaps look like a padding within the list elements, all different in size. If I remove the horizontal scrollbar with overflow: hidden; the gaps disappear in Chrome, but not in Firefox. In IE the gaps are even wider.
In HTML I already removed all white-space characters.
What's the cause of those gaps and how can I remove them in every browser?
Thanks for your help!
I'm running into some positioning inconsistencies between browsers. I'm trying to position a submit button so that it hovers over the lower corner of the textarea.
In Chrome, Safari, and other browsers this works just like it should:
However, in Firefox, I get this:
Is there a different method for positioning that element, or have I left something out of my CSS?
Here is the link to the HTMl and the CSS: http://www.tylonius.com/clients/X10/GalleryDisplay.html
Position that submit button absolutely.
position: absolute;
bottom: 0;
right: 0;
Make sure it's parent element's position is set to relative.
I just dropped that screenshot into photoshop and measured the bottom padding of the containing element. In the top image it's 11px high. In the bottom image it is 13px. I'm guessing that's your problem, but without seeing your code it's impossible to say for sure. Try looking at the CSS of the surrounding elements. I don't think the <input> elements are your problem.
EDIT
Now that I can see your code I'm certain this answer is correct. The problem is the length of the surrounding box. What you need to do is take the styling from #gallery-commentform and apply it to a div containing the form. then absolutely position the textarea adn the submit relative to the bottom left hand corner. that way no matter how browsers render the height/padding/yaddayadda it will always be the same distance from the bottom of the form.
I have been dealing with a lot of issues like this recently, the first thing I would do is check padding, margin, and border. I'd bet that Firefox sets some default properties differently than the other browsers, and you need to override that. The 'computed styles' tab in inspector should be enough to figure out if that's the case.
How can I get this CSS declaration to work in IE6 please?
#mask{width:725px;height:495px;margin:0;border:0;padding:0;overflow:hidden;}
The problem is the content which is much larger than 725px and exactly 495px (much like a horizontal scrolling thingy) does not get hidden in IE6.
Edit:
1. The background images of the hidden divs shows.
2. I am also using Twin-Helix PNG Fix 2.0 Alpha.
Thank you.
This will be happening because you have relatively positioned elements inside your #mask container.
This is due to a bug where relatively positioned children are not correctly clipped and hidden for a parent element with overflow: hidden applied in Internet Explorer 6 and 7. The same problem also exists for overflow: auto and undoubtedly overflow: scroll as well.
It can be fixed by also applying position: relative to the element you are setting the overflow on.
I thought this would proably be one of the 'standard' IE6 layout bugs, but after some searching, I can't see an obvious solution to it. Here's my test case:
http://game-point.net/misc/ie6Test/
The way I want it to look is how it looks in Firefox3, Safari, Opera, and IE8. The red rectangle overlaps the green one to the top right.
In IE6, however, 2 strange things happen. First, in the top box (where I don't specify the unfloated DIVs' widths), the green DIV doesn't clear, but its width does stop short of the floated DIV. This doesn't seem right; the floated DIV should surely be out of flow. There is also a curious 3-pixel gap between the green DIV and the floated DIV.
In the 2nd box, where I do specify the unfloated DIVs' widths, the unfloated DIVs clear the floated DIV even though I haven't set the 'clear' CSS attribute. Surely they shouldn't clear at all.
IE7 is very similar, except it doesn't have that curious 3px gap to the left of the floated DIV.
1) Is this my misusing CSS somehow, and what am I doing wrong?
2) If this is an IE6/IE7 bug, is it well-known, and is there a workaround?
3 pix gap is the peek a boo bug. either put a -3px margin on that element or display inline or both.
pie.net has all your answers
OK, the problem seems to be explained rather expertly on this PositionIsEverything page. Looks like people just need to use a standards-compliant browser like IE8, Firefox, Opera, Safari, etc. if you want to use float layouts and get them to look right.