Skocz do zawartości

Zarchiwizowany

Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.

kolusek

[CSS] Różna interpretacja przez IE i Firefoxa

Polecane posty

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}

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Na IE 7.0 moja stronka wygląda zupełnie jak na Firefoxie :D

Niestety dużo osób korzysta z IE bo albo nie chce im się instalować tych lepszych przeglądarek, albo są noobami :D

Napisz w stopce, że dostosowałeś stronkę do Firefoxa i tyle :D

To tak samo jak np. dostosowujesz stronkę do rozdzielczości 1024x768, ludziom z 800x600 pojawi się poziomy pasek przewijania :D

 

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...

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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">

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

×