Navigationproblem mit IE 8

D

dominik31

Hallo ich habe nun mehrfach versucht meine seite an den neuen IE 8 anzupassen...
schaut mal bitte hier

http://www.mallorca-properties.co.uk...a-property.php

dort wird die NAvigation nicht richtig dargestellt.

Ich habe dann folgenden wie ueberall beschrieben code integrert
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

das Resultat findet Ihr dann hier http://www.mallorca-properties.co.uk...-property1.php

Nun fliegt mir die ganze Seite aus dem rahmen und bekomme es nicht zusammengestrickt auch das Schriftarten sind nun ganz anders! Muss ich das CSS auch an den IE 8 anpassen?

Hoffe das mir jemand helfen kann.

Gruss
dominik
 
In der zweiten Seite hast du die META-Angabe vor der Doctype-Deklaration notiert, womit der IE in den proprietären "Quirks Mode" schaltet.

Verschieb sie daher mal in den <head>...</head>-Bereich, wo die übrigen METAs stehen.

mfg Maik
 
Mit diesem heruntergebrochenen Code zeigt bei mir der IE8 das Navigationsmenü korrekt an:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>...</title>

<style type="text/css">
#css-navigation {width:779px;margin:0 auto;padding:0;background:#fff;font-weight:bold;line-height:normal;border-bottom:3px solid #f3a82b;}
#css-navigation ul {list-style:none;margin:0;padding:0;}
#css-navigation li {float:left;position:relative;}
#css-navigation ul li ul {display:none;position:absolute;}
#css-navigation ul li:hover ul {display:block;}
#css-navigation a {color:#fff;font-size:11px;font-weight:bold;letter-spacing:1px;padding:2px 5px;position:relative;text-align:center;text-decoration:none;}
#css-navigation .nav-submenu {background-color:#DA8601;border-color:#FFFFFF;}


.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>

</head>
<body>

<div id="css-navigation">
     <ul id="imenus0" style="width:780px" class="clearfix">
         <li style="width:165px;background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right.gif) no-repeat right top;"><a href="/mallorca-properties.html" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left.gif) no-repeat left top; padding:7px 7px 7px 0; display: block;">Mallorca Properties</a>
             <div><div style="width:160px;top:0px;left:-1px;">
                       <ul class="nav-submenu">
                           <li><a href="/mallorca-apartments.html">Mallorca Apartment</a></li>
                           <li><a href="/majorca-villa.html">Mallorca Villas</a></li>
                           <li><a href="/majorca-finca.html">Mallorca Fincas</a></li>
                           <li><a href="/mallorca-house.html">Mallorca House</a></li>
                           <li><a href="/new-developments.html">New Development</a></li>
                           <li><a href="http://www.mallorca-properties.co.uk/search/results.php?search=1&perpage=5&marknew=10&euro_numbers=1&lfield3_keyword=Sale&lfield16_keyword=standard&lfield4_keyword=&lfield5_min=&lfield5_max=&lfield2_keyword=&sort_order=4,123,reverse">New Properties</a></li>
                           <li><a href="/search/results.php?search=1&amp;perpage=5&amp;sort_order=5,123,forward&amp;marknew=10&amp;euro_numbers=1&amp;search=1&amp;lfield19_keyword=yes&amp;lfield16_keyword=standard&amp;lfield3_keyword=Sale">Waterfront Dream</a></li>
                           <li><a href="/mallorca-properties.html">Area select guide</a></li>
                       </ul>
             </div></div>
         </li>
         <li style="width:126px; background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right.gif) no-repeat right top;"><a href="/Majorca-information.html" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left.gif) no-repeat left top; padding:7px 7px 7px 0; display: block;">Majorca Facts</a>
             <div><div style="width:160px;left:-1px;">
                       <ul class="nav-submenu">
                           <li><a href="/Majorca-information.html">Majorca Information</a></li>
                           <li><a href="/majorca-summer.php">In the Summer</a></li>
                           <li><a href="/Lawyers-in-mallorca.php">Lawyer in Mallorca</a></li>
                           <li><a href="/buy-a-property-in-majorca.php">Majorca FAQs Page</a></li>
                           <li><a href="/mortgage-in-spain.php">Spanish Mortgage</a></li>
                           <li><a href="/mallorca-property.html">Buying Process</a></li>
                        </ul>
             </div></div>
         </li>
         <li style="width:124px; background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right.gif) no-repeat right top;"><a href="/cala-dor.php" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left.gif) no-repeat left top; padding:7px 7px 7px 0; display: block;">Top Locations</a>
             <div><div style="width:160px;left:-1px;">
                       <ul class="nav-submenu">
                           <li><a href="/cala-dor.php">Cala d'Or</a></li>
                           <li><a href="/portopetro-properties.php">Porto Petro</a></li>
                           <li><a href="/palma-de-mallorca.php">Palma de Mallorca </a></li>
                           <li><a href="/puerto-pollensa.php">Puerto Pollensa </a></li>
                           <li><a href="/andratx-properties.php">Puerto Andratx </a></li>
                           <li><a href="/santa-ponsa.php">Santa Ponsa </a></li>
                       </ul>
             </div></div>
         </li>
         <li style="width:95px; background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right.gif) no-repeat right top;"><a href="/client-area/index3.php" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left.gif) no-repeat left top; padding:7px 7px 7px 0; display: block;">Client Area</a></li>
         <li style="width:105px; background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right.gif) no-repeat right top;"><a href="/porto-petro-inmobiliaria.php" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left.gif) no-repeat left top; padding:7px 7px 7px 0; display: block;">About us</a>
             <div><div style="width:180px;left:-1px;">
                       <ul class="nav-submenu">
                           <li><a href="/mallorca-real-estate-marketing.php">Client Feedback</a></li>
                           <li><a href="/properties-in-mallorca.php">We Sell your Property</a></li>
                           <li><a href="/inmobiliaria-porto-petro.php">About us</a></li>
                       </ul>
             </div></div>
         </li>
         <li style="width:165px; background:url(http://www.mallorca-properties.co.uk/images/interface/tab-right-orange.gif) no-repeat right top;"><a href="/contact.php" style="background: url(http://www.mallorca-properties.co.uk/images/interface/tab-left-orange.gif) no-repeat left top; padding:7px 0; display: block;">Contact us</a></li>
     </ul>
</div>

<div id="container">
     <h1>Your content starts here</h1>
</div>

</body>
</html>


Sobald aber die beiden Javascripts http://www.mallorca-properties.co.uk/js/general.js und http://www.mallorca-properties.co.uk/js/imenus-dynamic.js ins Spiel kommen, ist es vorbei mit der Herrlichkeit.

mfg Maik
 
hallo maik,

super schau mal ich habe es nun eingetragen so wie du es geschrieben hast und es geht...aber noch alles verschoben? Weisst du was ich machen muss?

Ausserdem habe ich die
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
rausgenommen...Diese Begriffe bewirken nix, komisch!

Danke fer deine hilfe

gruss
dominik
 
Du hast da den vollständigen Code meiner Testseite eingefügt. An dieser Stelle des Markups hat aber ein HTML-Grundgerüst nichts verloren.

Ein paar Zeilen davor (am Ende von #header) finden sich zudem auch noch die beiden schliessenden </body></html>-Tags, die dort ebenfalls zu entfernen sind.

mfg Maik
 
mmmhhhh entweder ist es zu spät oder ich kapiere es nicht :-(

Koenntest du mir nochmal den richtige code hier integrieren
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück