For the following sample ordered list markup and CSS, IE7 is rendering the numbers alongside the bottom of the list item, whereas FF, Safari and Chrome are behaving as desired, with the numbers aligned alongside the top of the list item.
http://bit.ly/aCq5F5
Does anybody have any suggestions as to how to get IE7 to render with the same results? (Other versions of IE haven't been tested yet.)
Add
vertical-align: top;
to the li
Try removing the height you're setting on DIV.list-item-contents.
If its spacing you're after, try adding margin-bottom to them.
Related
I'm having a problem with my website: here. The div #header doesn't show in ie7.
For various reasons, the site's been in development for 18 months and at some point previously, it must have had the same issue and I fixed it, hence the empty div with the ie7 hack comment. However, I've obviously changed something that's affected it, but can't work out what's happening.
The only thing I can remember changing is the order of some of the floats.
The fixed positioning was a red herring. It was because the #top div had a z-index of 1, which for some reason put it above the #header div with a z-index of 999. Removing z-index from the #top div has solved it. Seems like ie7 has issues with z-index.
I have an element that is set to display none on page load. When you select a number from a select list the element is shown with jQuery. This works fine in all browsers except in IE7.
In IE7 everything is laid out correctly if I disable JavaScript. However with js turned on (and then the element shown via the select list) the legend appears in the wrong place. If with the developer tools I change the width of the fieldset and change it back to the original value, then it displays correctly.
So it seems like its some sort of rendering issue for hidden elements in IE7. If I add this CSS it messes my site but it fixed this particular issue.
* {
position: relative !important;
}
Adding a class which is hidden with css rather than adding display none as an inline style fixed this.
I'm having a display problem with an absolute positioned div in IE6 + IE7
I'm trying to display a drop down menu. this drop down menu is positioned absolute.
now as soon as there's another element below this menu that has position: relative, the absolute positioned drop down menu is displayed behind it.
this only happens in IE7 and 6 as mentioned above.
any ideas on how to fix this?
The css property z-index is there to let you define what object should be displayed "on top". Define z-indexes for all elements in quest (only drop-down should also work I think).
EDIT (based on provided code):
The element to give the z-index property to is "the topmost element with a position attribute that the overlapped div is not part of. In terms of your sample, give the z-index to menu_container or add it to header and give header position: relative (I like the latter option better because it is less likely to break with future changes of your html).
As for an explanation why this is so, in IE6 and IE7 things work as follows: currently absolute_div is above everything inside menu_container, but menu_container is below relative_div, so absolute_div is too. The reason that header doesn't participate in this story is that if no position attribute is given, what is displayed in front and what is in the back is calculated differently.
I am discovering css and I found a problem I can't fix.
My logo has a different position in IE7 than in other browsers like IE8, FF and chrome.
This is IE7:
http://www.prestashop.com/?ACT=29&fid=9&aid=16515_Awto8qE0tmhdhVFv8yWF&board_id=1
While IE8 and others show it correct, between the black and grey borders.
The css code:
#logo {
float:left;
margin-top:-45px;
margin-left:20px;
How can I fix this?
Different browsers have different default values for page elements. You should set all the elements to a base value. the best way to do this is using a CSS reset.
"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Check this tutorial out:
http://meyerweb.com/eric/tools/css/reset/
All the best.
I am trying to call one div on click of select element. there are 4 select elements two in each row. When that div is called it goes behind the succesive select element. This issue is specific to IE7. It works fine with IE8 and firefox3.
please can anybody help...
Thanks,
You can read the following link for a detailed info
How the Z-index Attribute Works for HTML Elements
There are two work around for this.
The first is to hide the select element when the div appears. This might not be a good solution.
The other better solutions is to place an iframe at the same position as that of the div.
The iFrame must be added at the end of the page so that it appears in front of all other windowed controls (the windowed controls are stacked in the order in which they appear on the page). That takes care of covering any SELECT that may be in our way.
You can have a look at the code in the page
Bug Fix: SELECT box displayed through Dynamic DIV in Internet Explorer