Skocz do zawartości

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


kolusek

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}

Link do komentarza
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...

Link do komentarza
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.

Ot taka mini-strona moja po godzinach :)http://www.wnetrzekuchni.pl

Link do komentarza
Udostępnij na innych stronach

Zarchiwizowany

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

×
×
  • Utwórz nowe...