Προβλημα Συμβατότητας css

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

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

Απάντηση
foncastel
Δημοσιεύσεις: 20
Εγγραφή: 19 Μάιος 2006 11:53
Τοποθεσία: Πρέβεζα
Επικοινωνία:

Προβλημα Συμβατότητας css

Δημοσίευση από foncastel » 16 Ιούλ 2006 03:20

Καλησπέρα,

Έχω δημιουργήσει με html μια σελίδα που τη χρησιμοποιώ ως intro για ένα site που έχω φτιάξει. Το έχω δημιουργήσει ως εξής : έχω κάνει εισαγωγή πολλών εικόνων μικρού μεγέθους τις οποίες τις έχω στοιχίσει με css. Αυτό που παρατηρώ είναι πως στοιχίζοντας τες με βάση τον explorer δεν φαίνονται καλά στον opera και το αντίθετο. Υπάρχει λύση γι αυτό??

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Προβλημα Συμβατότητας css

Δημοσίευση από cherouvim » 16 Ιούλ 2006 10:18

Πρέπει να καταλάβεις το css box model και το οτι στον IE είναι σπασμένο (broken).

Υπάρχουν και τρόποι για να αποφύγεις τα css hacks/filters.

Δώσε μας λίγο html και css να το δούμε μαζί.

foncastel
Δημοσιεύσεις: 20
Εγγραφή: 19 Μάιος 2006 11:53
Τοποθεσία: Πρέβεζα
Επικοινωνία:

Προβλημα Συμβατότητας css

Δημοσίευση από foncastel » 17 Ιούλ 2006 01:08

πχ html code


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

<head>

<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="author" content="WNC" />

<link rel="stylesheet" type="text/css" href="zencss1.css" />

<style type="text/css">
/* stuff to hide from Netscape 4 */
@import "imgposition.css";

</style>


</head>

<body>

<div id="logo">
<img src="../zen index foto/zenlogo1.gif" alt="Logo" width="211" class="logopict" height="126"/>
<img src="../zen index foto/Zenebissis01.gif" alt="Logo Text" width="100"
class="logotext" />
</div>

<div id="picture">
<img src="../zen index foto/odeio nikopolis.jpg" title="&#206;©&#206;&#180;&#206;&#181;&#206;&#175;&#206;&#191; &#206;‘&#207;&#207;&#8225;&#206;±&#206;&#175;&#206;± &#206;&#206;&#185;&#206;&#186;&#207;&#338;&#207;€&#206;&#191;&#206;»&#206;· &#206; &#207;&#206;­&#206;²&#206;&#181;&#206;&#182;&#206;±"
width="100" class="odeiofoto" />
<img src="../zen index foto/preveza2prevni.jpg" title="Preveza At Night"
width="100" class="preveza1foto" />
<img src="../zen index foto/parthenonas.jpg" title="Parthenonas"
width="100" class="parthenonasfoto" />
<img src="../zen index foto/evia chiliadou.jpg" title="Xiliadou eyia"
width="100" class="xiliadoufoto" />
<img src="../zen index foto/tzoumerka.jpg" title="tzoumerka"
width="100" class="tzoumerkafoto" />

και τα στοιχίζω με το παρακατω CSS

@charset "utf-8";
/* author: WNC */
/* Creation date: 20/3/2006 */


body {
background-color: #49bdef;
}

.logopict {
position: absolute; top: 20px; left: 15%; width: 216px; height: 129px;
}

.logotext {
position: absolute; top: 100px; left: 30%; width: 440px; height: 49px;
}



.odeiofoto {
position: absolute; top: 250px; left: 2%; width: 130px; height: 81px;
border-style: groove; border-width: thin; border-color: White;
}

.preveza1foto {
position: absolute; top: 168px; left: 51%; width: 140px; height: 77px;
border-style: groove; border-width: thin; border-color: White;
}

.parthenonasfoto {
position: absolute; top: 250px; left: 40.60%; width: 170px; height: 100px;
border-style: groove; border-width: thin; border-color: White;
}

.xiliadoufoto {
position: absolute; top: 165px; left: 39.50%; width: 110px; height: 80px;
border-style: groove; border-width: thin; border-color: White;
}

.tzoumerkafoto {
position: absolute; top: 170px; left: 13.50%; width: 130px; height: 75px;
border-style: groove; border-width: thin; border-color: White;
}

Απάντηση

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

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

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