I have a CSS menu setup here:
http://pans.saebermedia.com/
The problem is, I noticed IE doesn't display the menus properly, and now I'm back to using my computer to fix it which has IE8. I'm using compatibility mode.
I've noticed two problems. On the submenu, (Say "Resource Center"), there is extra spacing between each item that when your cursor passes through it closes the menu. This sounds like the IE Whitespace bug but I used PHP to strip out the White-space. If I use float:left;clear:left; it causes the menus to be in-equal lengths in Firefox and IE.
Anybody know what's going on?
I tested my solution only on IE 7.
in elements:
li.menu-item
you have to change
display:block;
to
display:inline;
Wow, that took me a bit. You should really reduce the amount of css that you are throwing at these elements. You are overwriting a lot of cascaded values, etc. However, there are 2 primary values that IE7 is having an issue with.
The first is min-width on #main-nav > ul > li ul a. For some reason IE7 having this value on the a is making it ignore that it is display: block. It's probably something related to the parent being misinteruputed as inline-block (see #2).
Second is the display: inline-block being inherited by the lis in the .sub-menu from the li.menu-item above ul.submenu. When I remove these items IE7 starts acting appropriately.
In all cases this has nothing to do with, what you call, the "IE Whitespace Bug". inline-block elements are treated no different than inline elements when the collapes of whitespace is calculated. This is per the spec. IE does not have a bug, any browser that does not collapse whitespace to 1 single whitespace between inline and inline-block elements (without the use of bikesheding: discard) is in violation of the spec.
Related
I've set the padding of the li element to 0 but there is still about 10 pixels worth of padding. How do I shorten the amount of padding provided?
Don't want to be boring :) But in my opinion negative declaration text-intend:-5px; a kind of wrong trick. I know it does trick the browser default styles. But basically it just moves the text outside of the parent element, making something like a hanging intend.
I've tried to find those browser inherited styles, but there are none of them that would create such padding around bullets/discs.
I did some research and found out that CSS3 has special pseudo-element ::marker to address this issue. The idea is great, but unfortunately it is still not implemented in any browser :(
Mozilla has own temporary trick to better style bullets :-moz-list-bullet - https://developer.mozilla.org/en-US/docs/CSS/:-moz-list-bullet
No other vendors that either support or have implemented such hack
CSS3 also has new value for list-style-position: hanging, that may help. But it's still not well defined.
Another solution is to use pseudo-element ::before (no support in IE7)
li:before {
content:"•";
margin-right:1px;
}
After all seems there is no any interest or need to address this issue. Everybody happy with text-intend.
In fairness in the end of the day why the heck would you want to remove that space between bullet and text :)) I think that's the case they called - accidental implementation
I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.
I've prepared this demo:
https://dl.dropbox.com/u/7224702/lists-bug.html
It works fine in Firefox, Chrome and IE8 but is broken in Opera and IE9.
Oh and I don't want to use list-style-position: inside; because if some <li> is longer then one line the second line is not correctly indented.
This is a problem with lists that isn't really specified by CSS. It just says that the marker is outside the box but doesn't precisely specify where.
You could perhaps solve it with text-indent to move the first line back again.
That's the question that's been bothering me for some time as well.
First of all if we look at the spec describing the list-style-position: outside property we will see that
"CSS 2.1 does not specify the precise location of the marker box or
its position in the painting order".
This actually makes this situation not a bug, merely different implementations.
IMO Opera and IE9 make it closer to the spec - which is to put the marker... well... outside the box. In case of floats the box made by the li element is still full-width, only content is shifted inside of it.
I tried to think of alternative solutions but they still turn out to be inappropriate and cause more problems than they solve. An example of using css3 counter increment can be seen here: http://jsfiddle.net/s3sZS/3/, but visually it looks like list-style-position: inside (your indentation problems remain) and the increment itself is selectable and copyable (at least in Opera).
Actually list-style-position: inside looks like the only appropriate solution to this imo.
If you are interested in future implementations of lists - you may read the CSS Lists and Counters Module Level 3 (currently Editor's Draft).
Little later then planned but here is my final solution.
Use list-style-position: inside;.
To repair the indenting of second and folowing lines, use negative text-indent (thanks Joey!)
It is not easy to determine the right value for the negative text indent as every browser does things little differently. Knowing that we will need to use something where we can set the width of the marker manually. And that something is pseudo-element :before. (thanks skip405!)
With the :before pseudo-element and right value of the content property we can now use list-style-type: none;
Delete the list-style-position from 1. as it's useless now.
You can see working demo here:
https://dl.dropbox.com/u/7224702/lists-counters.html
The only drawback is with content: counter(list, disc); in Opera 12. The disc/circle/square values are not working as they sould, values like decimal are alright. I've already reported it as a bug so hopefully it'll be fixed in next version.
I have a div tag with a few other elements inside of it, as follows:
<div>
<h3>Text</h3>
<hr/>
<ul>
<li>Text</li>
</ul>
<hr/>
<span>Text</span>
</div>
Between each different element in the div, I have 0 padding and margins set for all of the elements (and it is reflected in the developers tools), however in all Internet Explorer browsers there is a significant space (roughly 4-6 pixels) between each element. I've tried setting the html, body padding/margins to 0, as well as pretty much every other element above it in the DOM hierarchy, however the spacing remains. I've also tried minimizing the HTML so there are no new-lines or spaces, however it does not resolve the problem.
Any suggestions what could be the problem?
I guess the issue is the hr element in IE... it's not treated like other HTML elements. There are a number of solutions out there... but I couldn't get any of them to work when you want to decrease the margins.
That being said... through trial and error I managed to get negative margins for IE only rendering to work. Can't be sure it'll work in IE<6, IE7, IE>8 (can't test).
The minimal CSS code fragment:
<style>
hr {padding:0;margin:0;height:1px;border:none;color:#000;background-color:#000;}
</style>
<!--[if lte IE 8]>
<style>hr {display:block;margin:-7px 0;}</style>
<![endif]-->
... I've limited it to IE8 and less since word on the web is things will change in IE9... we'll see once it can be tested :). Note if you want to change the colour of the line, you'll need to change values of color and background-color (depending on the browser one or the other is used: ref)
Tested and working in:
IE 8.0.6001...
IE 6.0.2900...
FF 3.6.15
Cr 10.0.648.134
(on WinXP)
The space you are seeing is not padding, margin or border. You are seeing the " " character written that exists between each tag.
Options:
1) Set all elements to display:block or display: inline-block.
2) Write all the tags one after the other, dismissing all SPACE or ENTER characters
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.