I have a large menu built from lists.
It is displaying correctly in all the modern browsers I have tried and IE8, however in IE7 the list items appear to be given large amounts of margin of varying size depending on the size of the list item (see image comparison below):
Unfortunately the debugging tools in IE7 are less than optimal and I am having a real hard time working out where the issue is coming from. The source code is a bit lengthy to post here so I have made a JSfiddle for your viewing pleasure.
View source code and working demo
Can anyone see where this mystery spacing is coming from, and how can I put it straight?
In IE7 the <ul> tags are inheriting a line-height : 1.5em, disabling it in ie7 removes the annoying spacing. Updated fiddle
This condition is the culprit
ul {
/* line-height: 1.5em; */
list-style-position: outside;
}
Additional
Ok I see what you mean about the white gap. This looks like its (surprise surprise) one of those annoying ie7 'features'. I just got round it by using a hack
ul li, ul li a {
/* Needed in ie7 to stop list items expanding vertically
*line-height:1.2em;
}
with
* html ul li a {
height:15px;
}
or
ul#map > li > a.map-item {
height:auto;
*height:15px;
}
Fiddle with no spacing in IE7
A better way would be to create an IE7 only stylesheet and declare this as standard rather than relying on a hack.
Have you tried adding CSS to reset all the styles to the same for all browsers?
By including a reset CSS file such as: http://meyerweb.com/eric/tools/css/reset/ may help with your issue.
Related
In my web page, there are some items listed like this, Item 1Item 2item 3 I am wondering, it is taking much space in IE7(I haven't checked it yet on other versions of IE browsers) whereas in FF and Chrome it is fine. I have given "list-style-type: none" in my CSS. Still cant guess why it is taking space. Please help.
Link Normalize CSS in your HTML page and your page should render the same in all major browsers.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Edit:
There can be an issue with the margin and padding, keep it to 0-
ul, li{
margin: 0;
padding: 0;
}
This one worked for me:
li { display:inline; }
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!
There's something wrong with my CSS-code for a list. Indentation of second (and further) lines of list items are not correct in IE, but okay in other browsers. See: http://jsfiddle.net/nXYee/
Any idea?
IE8 gives this result:
Chrome, Safari and FF give this result:
This occurs because you've placed the bullet inside the list item (list-style-position:inside;), and the browser controls the space between the bullet and the li content, not you. Internet Explorer assigns more space between the bullet and the content than the other browsers you mentioned.
The fact that your indented content aligns correctly in Chrome/Safari/Firefox is because those browsers all implemented the same (or similar) distance between the bullet and the li content, so a text-indent of 1em gives you a visually consistent result - but really this visual consistency is just a fluke.
(In fact, if you check closely you'll notice that Firefox is slightly out too).
If you feel it is necessary to display the bullet inside the list items, then you may find you need to use a conditional comment to feed different text-indent and padding-left values to IE (e.g. 1.5em/-1.5em) - but that will break in IE10, which doesn't support conditional comments.
Personally, I would keep the bullets outside the list items, since I think you'll find it much easier to get a consistent result.
Hmm it looks like you were overthinking a bit in terms of your css with all that list positions and negative text margin, I've simplified it to the following:
body {
font-family:verdana;
font-size:1.0em;
width:500px;
}
ul {
list-style-type:disc;
padding-left:1em;
margin-left:0px;
}
Tested it on IE8, looks normal.
http://jsfiddle.net/nXYee/1/
I'm quite certain it has something to do with your styles, specifically, this part:
li {
list-style-position:inside;
...
}
ul {
text-indent:-1em;
padding-left:1em;
...
}
When list-style-position is set to inside, it's considered part of the list item itself and when the item wraps, it will wrap to under the item marker. It is then indented due to your left padding being set - but it's not enough to get it to the right level. FF and Webkit may use some other algorithms to determine the position, or maybe 1em is just evaluates differently.
I have forked your jsfiddle and fixed the styles in it so that the list is now displayed correctly:
http://jsfiddle.net/8vxTw/3/
ul {
list-style-position: outside !important;
}
fixed it I've had similar problem
In this website: http://www.blackblot.co.il/kb/ I can't make the anchor ( tags) to show tooltips in IE.
It works in chrome and Firefox.
what makes it even harder to understand, is it not happenening in all the tags, but only these in the content section.
for example, the links on the left side are showing the titles, but the links in the content, altough has it, won't show it.
I checked for CSS manipulation, or js code, but nothing really stops it from showing the titles.
really need help here. Thanks
I checked out the source code and found out that the anchors didn't have titles. Did you try putting titles in those anchors? That should work in my opinion.
OK
I found the solution. which is not a real solution - but it something in IE was absolutely wrong.
it is clearly a bug in IE. Anyway, if someone have the same problem.
I have dicided to take off the css and see if I see the tooltips without any css. And then I saw it.
So I had to debug 500 lines of poorly written CSS. Among these 500 line there were 3 declarations that caused this bug. I found that when I use F12 (developer's tools of IE) the positioning of the element was not in it's actual position on the page. Please see image attached.
So I tried to figure out which css declaration causing this. For some reason 3 declaration of 3 div's padding had to be removed in order for this to work.
the CSS lines are as follow, the commented code is the bad guy:
ul,ol,dl,p,h1,h2,h3,h4,h5,h6{margin-top:10px; margin-bottom:10px; /* padding-top:0; padding-bottom:0; */}
div.post,div.page{display:block; margin:0 0 0px 0; border-bottom:solid 1px #eee; /* padding:20px */}
div.post-bodycopy p{margin:1em 0; /* padding:0; */ display:block; font-size: 13px;}
Normally I'm able to fix my HTML errors by myself since it's not that complicated, but this time, I'm having a hard one.
I decided to change my navigation on my website and most of it works well & most browsers displays it correctly.
Where my problem is tho, is that I have a 5-6px margin I cannot find where is coming from. The link & image showing my problem will be below.
My second problem is that IE7 shows a huge margin, and again, I cant spot where it's coming from.
The webpage URL is: Deaglegame.net & below here is the image:
I'm leaving for work in a couple hours, so if I dont reply it's not because I dont wanna reply, I'll check this thread as soon as possible, but any help is greatly appreciated!
Thanks to anyone willing to help!
The IE7 Issue is due to compatibility view. This will be forced on you by default if you are visiting the page through an intranet address. You can get around this issue by dropping the bottom padding and setting the height to 175px: for the main div. This also seems to fix the margin issue when running compatibility view.
You menu item list is somehow causing the margin issue outside of compatibility view, I would suggest when running IE to hit F12 and that should open Developer tools, that is how I found these settings that needed to be adjusted.
#Mmerrell's fix for div#main should sort one half of the issue. Next comes #Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.
/* deaglegame.css (line 48) */
#navigate li:hover a span,
#navigate li.hover a span,
#navigate li.active a span {
/* removed padding: 12px 0 0; */
}
/* deaglegame.css (line 30) */
#navigate li a span {
cursor: pointer;
float: left;
height: 38px;
line-height: 2.5;
/* removed padding: 12px 0 0; */
position: relative;
}
Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.
You may want to consider using YUI CSS reset in the future (or perhaps even integrating it now), http://developer.yahoo.com/yui/3/cssreset/ . I've found it helps me considerably when designing cross-browser compatible sites, and has almost eliminated weird margin or padding errors I come across.
Check the image below, which might solve your first problem. Try to specify a lesser value for the padding there. Consider using a tool like firebug to resolve this kind of issues.