0

Just a short question...

I have a span container which is correctly set in FF with following options:

<span id="qmmenue" style="left: 0px; top: 2852px; color: #777777; line-height: 12px; font-family: Calibri; font-size: 12px; display: inline-block; filter: progid:DXImageTransform.Microsoft.Shadow(color="#0000ff", Direction=0, Strength=3) progid:DXImageTransform.Microsoft.Shadow(color="#0000ff", Direction=45, Strength=3) progid:DXImageTransform.Microsoft.Shadow(color="#0000ff", Direction=135, Strength=3); position: absolute; zoom: 1; max-width: 500px; background-color: white;" jQuery17207240081996974917="9">

In this span, there is an image and two p elements.

My problem is that in Firefox the box is only at the minimal width. Internet Explorer shows the box in about 80% of the screen, and most of it is empty.

Here a screenshot of FF and IE:

http://s16.postimage.org/i2ak9xj1x/firefox.png http://s16.postimage.org/fmdc9tqd1/internetexplorer.png

Any ideas about that?

It should be consitent at minimal width for InternetExplorer , but if possible cross-browser ;-)

// edit : i tested it in IE9 , it have to work for >IE8 it seems to be no issue of block or inline-block. same result in both versions

Smoki
  • 551
  • 2
  • 9
  • 28
  • This question is of avearge length :P – Diodeus - James MacFarlane May 30 '12 at 14:34
  • 1
    Hard to analyze without fiddle. But check your headers : http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly – Denys Séguret May 30 '12 at 14:34
  • What's your question? We can see that the width is inconsistent from your screenshots, which is helpful. Do you want the span to be consistent with IE, or FF, or something else? – Surreal Dreams May 30 '12 at 14:43
  • If you want to have consistent results, remove all MS specific things like `progid:DXImageTransform.Microsoft.Shadow`. – Denys Séguret May 30 '12 at 14:46
  • yeah not possible because i have no other way to implement a glowing shadow in IE8 ^^ – Smoki May 30 '12 at 14:47
  • A `span` should not be used here, since it is to hold inline elements, both `

    ` and ` ` are not inline elements. You should be using `

    `
     – Ryan B May 30 '12 at 14:50

2 Answers2

0

Which version of IE are you testing. You need to set a conditional style for IE to display:block (inline-block is not supported by older IE versions)

http://www.quirksmode.org/css/display.html

ckaufman
  • 1,487
  • 9
  • 15
  • Oh if forgotten to tell, im sorry. It HAVE to work for IE8 but im actually testing with IE9... i have tested it btw with : == with display:block; no reaction, same result :( – Smoki May 30 '12 at 14:40
  • oh yeah,... its the doctype..... a pitty i cant edit the header because its an output of MS Word :( , but thanks a lot. on top fixed it ^^°° – Smoki May 30 '12 at 14:50
  • Ok, that's frequently the problem. I posted my comment about the headers as answer. – Denys Séguret May 30 '12 at 14:52
0

When something works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Be careful that it won't make it magically all compatible with IE8.

And seriously... using Word to produce directly served HTML is not a viable long term solution...

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • yeah i know thats no over the top solution, but its a given document and i have to use it like that. in my company thats a standard of publishing manuals in that way (pdf+html). so, no way :-/ i just tried to improve the results ;-) (f.e. in using js (jquery) to generate menues, etc ) – Smoki May 30 '12 at 16:15