I need a css that work on Internet explorer

Navigation (+ submenu) with boxes

I need this part of code to work on IE.
I have a great look with firefox/Mozilla and Chrome.
I would like to have the same look in IE.

I give the style + display code

Please, look how this look on Mozilla and Firefox and Chrome.
You can provide me with a .css for Ie only... with same width and height.

Thanks

 

Why would you want to code specifically for a junk, non-standard, flakey, buggy, and virus prone browser? Use standards compliant code and forget about any browser that is non-standard.

 

I had thought multiple people had already replied to this -- myself included.

In any case, your code does have multiple issues -- table for layout, fixed width layout, extra DIV for nothing, classes for nothing, oddball ID's, and static style inlined in the markup topping the list of issues.

Much less the lack of an extra DIV around the submenu, required if you want those stacked shadows to appear / work properly.

First order of business is to gut the markup down to something a bit more sane.

	<ul id="mainMenu">
		<li><a href="obs-geostrategique-sport1.php?cat=2">ACTUALITÉS</a></li>
		<li><a href="obs-geostrategique-sport1.php?cat=5">ANALYSE</a></li>
		<li><a href="obs-geostrategique-sport1.php?cat=1" class="twoLines">PROGRAMME EUROPÉEN DE LUTTE <br />CONTRE LE TRUCAGE DE MATCHS</a></li>
		<li><a href="obs-geostrategique-sport1.php?cat=3">COMMUNIQUÉ</a></li>
		<li>
			<a href="#">THEMATIQUES</a> 
			<div><ul>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=1">Lutte contre la corruption</a></li>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=2">Evènements sportifs </a></li>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=3">Bonne gouvernance du sport</a></li>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=4">Economie du sport</a></li>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=5">Lutte contre le dopage</a></li>
				<li><a href="obs-geostrategique-sport1.php?cat=4&amp;id=7">Lutte pour l'intégrité dans le sport</a></li>
			</ul></div>
		</li>
	</ul>

Code (markup):

Only time you need a class or ID is when something is DIFFERENT or you can't target it properly via inheritance. Inlining style is just code bloat when elements are by default auto-adjusting. We get rid of all that.

Then for some menu CSS

#mainMenu {
	list-style:none;
	font:bold 100%/140% arial,helvetica,sans-serif;
}

#mainMenu li {
	position:relative;
	float:left;
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	overflow:hidden;
	margin:0 0.8em 0.8em 0;
}

#mainMenu li:hover {
	overflow:visible;
}

#mainMenu li a {
	float:left;
	padding:1.1em 0.8em;
	display:inline-block;
	text-decoration:none;
	color:#FFF;
	background:#E64;
}

#mainMenu li:hover a {
	background:#378;
}

#mainMenu li:hover li a {
	background:#E64;
}

#mainMenu li li:hover a {
	background:#378;
}

#mainMenu .twoLines {
	padding:0.4em 0.8em;
}

#mainMenu div {
	/* 
		the apo must overlap to make sure 'perfect height' errors don't
		crop up. Pain in the ass, thanks firefuxxors!
		
		Also need double-wrapper to apply shadow without cutoff issues.
	*/
	position:absolute;
	top:3.4em;
	left:0;
	padding-top:1em;
	width:20em;
}

#mainMenu ul {
	list-style:none;
}

#mainMenu>li,
#mainMenu ul {
	-webkit-box-shadow:0.4em 0.4em 0.8em #BBB;
	box-shadow:0.4em 0.4em 0.8em #BBB;
}

#mainMenu li li {
	float:none;
	display:block;
	height:auto;
	margin:0;
}

#mainMenu ul a {
	float:none;
	display:block;
	padding:0.2em 0.8em;
}

#mainMenu ul a:before {
	content:">> ";
}

Code (markup):

No shadows in IE8/earlier, OH WELL. Tested working perfect IE9 and 10, and the latest flavors each of the modern browsers. (Opera 12, Chrome, FF). Degrades gracefully as still functional/usable all the way back to IE6 if you toss PeterNed's csshover3.htc at it. (though it does get a bit ugly the older you go).

I tossed a live demo up here on my server:
http://www.cutcodedown.com/for_others/testBlanc/template.html

as with all my examples, the directory:
http://www.cutcodedown.com/for_others/testBlanc/

is wide open for easy access to the bits and pieces.

Hope this helps.

 

Thanks for all. I think I need to take some CSS course. What i want is to put all the boxes in a 730px with 4 boxes (with one line of text) that have the same size.
Thanks again. I really need CSS training