1px διαφορά στον Firefox μόνο

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

1px διαφορά στον Firefox μόνο

Δημοσίευση από mat_ » 05 Μάιος 2009 18:57

Χαίρεται, θα ήθελα τη βοήθειά σας μιας και δεν παλεύεται άλλο αυτό το θέμα, αυτή τη φορά ο ενοχλητικός browser δεν είναι ο IE αλλά ο Firefox!

Με τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style type="text/css">
* &#123;
	padding&#58;0;
	margin&#58;0;
&#125;
body &#123;
	font-family&#58; Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size&#58; 11px;
	color&#58; #000;
&#125;
img &#123;
	border&#58;0;
&#125;
#top &#123;
	color&#58;#000;
	font-size&#58;11px;
&#125;
#top input &#123;
	font-size&#58;10px;
	color&#58;#369;
&#125;
.input-text &#123;
	border-top&#58;1px solid #cacbcc;
	border-left&#58;1px solid #cacbcc;
	border-bottom&#58;1px solid #cacbcc;
	border-right&#58;0px;
	height&#58;17px;
&#125;
.input-image &#123;
	position&#58;relative;top&#58;6px;
&#125;
</style>
<body>
<div id="top">Search <input type="text" class="input-text" /><input class="input-image" type="image" src="http&#58;//img2.imageshack.us/img2/9281/buttonsearch.jpg" /></div>
</body>
</html>
Στον Chrome, Opera, Safari και Internet Explorer(με .input-image { top:4px; } ) έχω το παρακάτω αποτέλεσμα:

Εικόνα

ενώ στο firefox το βελάκι φαίνεται ένα pixel πιο πάνω.
Γιατί; Έχω δοκιμάσει τα πάντα!
Ευχαριστώ

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

1px διαφορά στον Firefox μόνο

Δημοσίευση από ThyClub » 05 Μάιος 2009 19:04

Εγώ με ΙΕ 6 το βλέπω 2 pixels κάτω

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

1px διαφορά στον Firefox μόνο

Δημοσίευση από ThyClub » 05 Μάιος 2009 19:20

Λύση:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style type="text/css">
body &#123;
   font-family&#58; Trebuchet MS, Arial, Helvetica, sans-serif;
   font-size&#58; 11px;
   color&#58; #000;
   padding&#58;0;
   margin&#58;0;
&#125;
img &#123;
   border&#58;0;
&#125;
#top &#123;
   color&#58;#000;
   font-size&#58;11px;
&#125;
#top input &#123;
   font-size&#58;10px;
   color&#58;#369;
&#125;
.input-text &#123;
   border-top&#58;1px solid #cacbcc;
   border-left&#58;1px solid #cacbcc;
   border-bottom&#58;1px solid #cacbcc;
   border-right&#58;none;
   height&#58;15px;
&#125;
.input-image &#123;
   top&#58;6px;
   position&#58;relative;
&#125;
</style>
<!--&#91;if IE&#93;>
<style>
.input-image &#123;
   top&#58;4px;
   position&#58;relative;
&#125;
</style>
<!&#91;endif&#93;-->

<body>
<div id="top">Search <input type="text" class="input-text" /><input class="input-image" type="image" src="http&#58;//img2.imageshack.us/img2/9281/buttonsearch.jpg" /></div>
</body>
</html> 

mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

1px διαφορά στον Firefox μόνο

Δημοσίευση από mat_ » 05 Μάιος 2009 20:26

Ευχαριστώ για τις απαντήσεις, στον Firefox το βλέπετε σωστό;

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

1px διαφορά στον Firefox μόνο

Δημοσίευση από ThyClub » 05 Μάιος 2009 20:32

Με τον τρόπο που σου έδωσα το βλέπω σωστά σε IE 6 FF 2.x Opera & Chrome

mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

1px διαφορά στον Firefox μόνο

Δημοσίευση από mat_ » 05 Μάιος 2009 21:18

Έχεις δίκιο! Νόμιζα πως έβαλες μόνο το hack για το IE αλλά άλλαξες και το height σε 15 και δουλεύει άψογα τώρα. Thanks :)

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

1px διαφορά στον Firefox μόνο

Δημοσίευση από ThyClub » 05 Μάιος 2009 22:22

Όχι μόνο. Άλλαξα κι αυτό:

Κώδικας: Επιλογή όλων

* &#123;
   padding&#58;0;
   margin&#58;0;
&#125;
body &#123;
   font-family&#58; Trebuchet MS, Arial, Helvetica, sans-serif;
   font-size&#58; 11px;
   color&#58; #000;
&#125; 
σε αυτό:

Κώδικας: Επιλογή όλων

body &#123;
   font-family&#58; Trebuchet MS, Arial, Helvetica, sans-serif;
   font-size&#58; 11px;
   color&#58; #000;
   padding&#58;0;
   margin&#58;0;
&#125; 

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης