kolusek Napisano Październik 21, 2007 Zgłoś Share Napisano Październik 21, 2007 Zaczynam dopiero przygodę z CSS i już mam problem. Mianowicie menu które zrobiłem jest inaczej interpretowane w IE i inaczej w Firefox'ie. Kombinowałem z tym na wiele sposobów i za każdym razem jak coś zaczynało działać w jednej to przestawało w drugiej. Tak sobie myślałem, że może kolejność wstawianych znaczników ma znaczenie, ale nie wiem. Oto kod menu: <div id="MENU"> <ul style="PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none"> <li><a class="przycisk2" href="index.html">Strona główna</a> <li><a class="przycisk2" href="index.html">Moje programy</a> <li><a class="przycisk2" href="index.html">O mnie</a> <li><a class="przycisk2" href="index.html">Kontakt</a></li> <li><a href=""><div id="Przycisk">Kolejny</div></a></li> </ul> </div> A tu kod CSS .przycisk2{width:130px; text-align:left; font-weight: bold ; color:black; margin-top:1px; padding-left:4px;} background: #ffc ; border-color:#03cee4; border-style: solid ; border-width:1; } a:link{ text-decoration:none} a:visited{ text-decoration:none} a:hover{ background:#fff19f} p { text-align:left; text-indent: 25px} #Przycisk{width:130px; text-align:left; color:black; border-color:#03cee4; border-style: solid ; border-width:1; background: #ffc ; font-weight: bold ; margin-top:1px; padding-left:4px; cursor:pointer;} #Przycisk:hover{background:#fff19f} Link do komentarza Udostępnij na innych stronach More sharing options...
TSr Napisano Październik 21, 2007 Zgłoś Share Napisano Październik 21, 2007 Ja bym poradził trzymać się standardu W3C, a wyświetlanie zostawić przeglądarkom. Idealnie tak samo nigdy nie będzie na każdej przeglądarce. Ubuntu.pl user #10593 Link do komentarza Udostępnij na innych stronach More sharing options...
KKKas Napisano Październik 22, 2007 Zgłoś Share Napisano Październik 22, 2007 Poszukaj na google o hackach IE (IE hacks). ҉ Link do komentarza Udostępnij na innych stronach More sharing options...
Jason Napisano Październik 22, 2007 Zgłoś Share Napisano Październik 22, 2007 Na IE 7.0 moja stronka wygląda zupełnie jak na Firefoxie Niestety dużo osób korzysta z IE bo albo nie chce im się instalować tych lepszych przeglądarek, albo są noobami Napisz w stopce, że dostosowałeś stronkę do Firefoxa i tyle To tak samo jak np. dostosowujesz stronkę do rozdzielczości 1024x768, ludziom z 800x600 pojawi się poziomy pasek przewijania BTW. mógłbyś zapodać linka do strony, albo chociaż screena, żeby ludzie mogli sobie pooglądać co nie działa. No i napisz co inaczej działa Ci... Link do komentarza Udostępnij na innych stronach More sharing options...
5corpio Napisano Październik 22, 2007 Zgłoś Share Napisano Październik 22, 2007 Pewnie jest problem ze zmianą background w Przycisk albo coś takiego dla zachowania :hover ? Kiedyś miałem z tym problem bo musialem zrobić by zmieniał się obrazek tła i na wszystkich przeglądarkach prócz IE działało normalnie jak trzeba uratował mnie kod: <attach event="ondocumentready" handler="parseStylesheets" /> <script> /** *Whatever:hover - V1.41.050927 - hover & active *------------------------------------------------------------ *(c) 2005 - Peter Nederlof *Peterned - http://www.xs4all.nl/~peterned/ *License - http://creativecommons.org/licenses/LGPL/2.1/ * *Whatever:hover is free software; you can redistribute it and/or *modify it under the terms of the GNU Lesser General Public *License as published by the Free Software Foundation; either *version 2.1 of the License, or (at your option) any later version. * *Whatever:hover is distributed in the hope that it will be useful, *but WITHOUT ANY WARRANTY; without even the implied warranty of *MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU *Lesser General Public License for more details. * *Credits and thanks to: *Arnoud Berendsen, Martin Reurings, Robert Hanson * *howto: body { behavior:url("csshover.htc"); } *------------------------------------------------------------ */ var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i, currentSheet, doc = window.document, hoverEvents = [], activators = { onhover:{on:'onmouseover', off:'onmouseout'}, onactive:{on:'onmousedown', off:'onmouseup'} } function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets[i]); } function parseStylesheet(sheet) { if(sheet.imports) { try { var imports = sheet.imports, l = imports.length; for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]); } catch(securityException){} } try { var rules = (currentSheet = sheet).rules, l = rules.length; for(var j=0; j<l; j++) parseCSSRule(rules[j]); } catch(securityException){} } function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!csshoverReg.test(select) || !style) return; var pseudo = select.replace(/[^:]+[a-z-]+).*/i, 'on$1'); var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo); var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]; var affected = select.replace(/:(hover|active).*$/, ''); var elements = getElementsBySelect(affected); if(elements.length == 0) return; currentSheet.addRule(newSelect, style); for(var i=0; i<elements.length; i++) new HoverElement(elements[i], className, activators[pseudo]); } function HoverElement(node, className, events) { if(!node.hovers) node.hovers = {}; if(node.hovers[className]) return; node.hovers[className] = true; hookHoverEvent(node, events.on, function() { node.className += ' ' + className; }); hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); }); } function hookHoverEvent(node, type, handler) { node.attachEvent(type, handler); hoverEvents[hoverEvents.length] = { node:node, type:type, handler:handler }; } function unhookHoverEvents() { for(var e,i=0; i<hoverEvents.length; i++) { e = hoverEvents[i]; e.node.detachEvent(e.type, e.handler); } } function getElementsBySelect(rule) { var parts, nodes = [doc]; parts = rule.split(' '); for(var i=0; i<parts.length; i++) { nodes = getSelectedNodes(parts[i], nodes); }return nodes; } function getSelectedNodes(select, elements) { var result, node, nodes = []; var identify = (/\#([a-z0-9_-]+)/i).exec(select); if(identify) return [doc.getElementById(identify[1])]; var classname = (/\.([a-z0-9_-]+)/i).exec(select); var tagName = select.replace(/(\.|\#|\[a-z0-9_-]+/i, ''); var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false; for(var i=0; i<elements.length; i++) { result = tagName? elements[i].all.tags(tagName):elements[i].all; for(var j=0; j<result.length; j++) { node = result[j]; if(classReg && !classReg.test(node.className)) continue; nodes[nodes.length] = node; } }return nodes; } </script> Stwórz z niego sobie plik: hover.htc i zapisz gdzie stronę. i dodanie: behavior: url('hover.htc'); Poza tym zrobienie osobnego pliku CSS dla IE użytkowników i detekcja ew. przeglądarki i odpalenie odpowiedniego stylu: <link rel="stylesheet" type="text/css" href="stylesheet.css" /> // normalny plik dla wszystkich przeglądarek <!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" href="ie.css" /><![endif]--> // ten na ewentualność dla IE Chyba to powinno pomóc. Ot taka mini-strona moja po godzinach http://www.wnetrzekuchni.pl Link do komentarza Udostępnij na innych stronach More sharing options...
kolusek Napisano Październik 23, 2007 Autor Zgłoś Share Napisano Październik 23, 2007 Przebudowałem całą stronkę i już wszystko działa. Problem był taki, że Firefox dobrze wyswietlał przyciski w znaczniku <div id="przycisk"> natomias niepoprawnie <a class="przycisk2">. IE zupełnie na odwrót: dobrze <a class="przycisk2">, źle <div id="Przycisk"> Link do komentarza Udostępnij na innych stronach More sharing options...
Polecane posty
Zarchiwizowany
Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.