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; }
Related
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.
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
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
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.