Πρόβλημα με align και IE

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 30 Ιουν 2009 03:30

Καλημέρα

Έχω ένα προμπλεματάκι..
Σε τούτο: www.oasisdesign.gr/fresh έχω βάλει να είναι centered δίνοντας:

margin-left: auto ;
margin-right: auto ;

Σε Firefox, Chrome, Safari, Opera παίζει εκτός από τον γ$#@#$ο τον ΙΕδάκο.

Καμιά βοήθεια, κανείς :think: :reading:

Ευχαριστώ πολύ!!!!!!
;]

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με align και IE

Δημοσίευση από fafos » 30 Ιουν 2009 03:54

dokimase to sketo: margin: auto ;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 30 Ιουν 2009 03:58

Τίποταα :-?
Τώρα που το βλέπω, έχει και το footer πρόβλημα :evil:



Το footer δεν έχει πρόβλημα, με margin:0 μου βγαίνει και στους άλλους στα αριστερά
;]

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με align και IE

Δημοσίευση από fafos » 30 Ιουν 2009 04:01

an to valeis kai sto body?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 30 Ιουν 2009 04:02

fafos έγραψε:an to valeis kai sto body?
Τίποτες
;]

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από manolism » 30 Ιουν 2009 10:45

Για πάρε εδώ

index.html

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

<!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>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div id="header">
<div id="headerer">
<h1>Oasisdesign </h1>
</div>
<div id="menu">
<h2><a href="df" title="main">Main</a> <a href="index.html">About.Us</a> <a href="df">Services</a> <a href="df">Our Team</a><a href="df">Portfolio</a><a href="df">Contact.Us</a></h2>
</div>
</div>
<div id="validates">  
<a href="http&#58;//www.oasisdesign.gr/callmeback" title="Callme" > <img src="phone.png" border="no" title="Call Me Back Feature" alt="callmeback" /> </a>&nbsp;
<a href="http&#58;//www.oasisdesign.gr/callmeback" title="Make a new order!" > <img src="buy.png" alt="Order" border="no" title="Call Me Back Feature" /> </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="http&#58;//www.oasisdesign.gr/callmeback" title="Login To Users' Locked Area"> <img src="login.png" alt="Call" border="no" title="Call Me Back Feature" /> </a>  
</div>
<div id="text"><div id="title"><h2>Services</h2></div><div id="choice"> <a href="">Webdesign</a><a href="s">Webdevelopment</a><a href="s">Webhosting</a><a href="s">Virtual PBXes Installation and Support</a><a href="s">CSS</a><a href="s">SEO</a></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa mi, aliquam at aliquet ut, eleifend vitae dui. Aenean venenatis pretium hendrerit. Aliquam sem nisl, convallis eu gravida sed, pretium accumsan dui. Pellentesque consequat neque et justo luctus vel faucibus neque venenatis. Phasellus nec tellus eget neque molestie hendrerit. Aenean tempor laoreet justo ac bibendum. Phasellus eu luctus ante. Duis nec eleifend odio. Etiam ac elit justo, in vulputate sapien. Vivamus erat elit, molestie a facilisis sed, vestibulum sit amet arcu. Suspendisse vulputate lobortis enim, nec dictum nibh tempor ut. Integer dapibus, erat quis bibendum accumsan, enim turpis blandit elit, quis mollis turpis dolor quis neque. Proin sed sapien quam, vel accumsan massa.
 
Etiam lobortis augue vitae velit sodales suscipit vel at magna. Maecenas et molestie velit. Cras non massa at turpis malesuada fermentum. Maecenas est felis, rhoncus nec posuere in, mattis et lorem. Etiam dictum pharetra arcu non pretium. <h1><a href="#">First Titles</a></h1>Suspendisse pharetra eros id justo dictum id molestie ipsum sagittis. Mauris bibendum vehicula purus, sit amet blandit augue mattis dignissim. Integer sem nibh, pellentesque mattis dictum in, porttitor nec ligula. Aliquam a feugiat lacus. Praesent volutpat sagittis ligula ut malesuada. Phasellus facilisis hendrerit hendrerit. Aliquam sodales placerat orci, nec pulvinar neque sollicitudin quis. Proin dictum tellus id justo sagittis egestas. Integer sit amet ipsum adipiscing orci viverra elementum. Phasellus ornare auctor massa sed pellentesque. Aliquam erat volutpat.
 
Aliquam auctor, elit ut condimentum fringilla, lorem augue aliquam orci, ut imperdiet eros sapien consequat magna. <h1><a href="#">Title me</a> </h1>Vivamus nec nibh nisi, vulputate facilisis risus. Fusce consectetur sodales eros non tempor. Nulla facilisi. Pellentesque nec est ut arcu semper malesuada quis et erat. Quisque vitae nibh nulla. Vivamus lobortis, urna malesuada aliquam hendrerit, ante libero vulputate turpis, ut adipiscing massa orci in mi. Morbi ac velit neque. Quisque tortor mi, hendrerit a molestie a, posuere nec nisl. Maecenas ante urna, gravida ac varius ut, dignissim in nisl. Nullam at mauris dui, quis tempus nunc. Donec vestibulum lorem quis leo gravida eu porta dui laoreet. 
<h1>Important!&#58;<a href="#">This is a title</a></h1>Etiam lobortis augue vitae velit sodales suscipit vel at magna. Maecenas et molestie velit. Cras non massa at turpis malesuada fermentum. Maecenas est felis, rhoncus nec posuere in, mattis et lorem. Etiam dictum pharetra arcu non pretium. Suspendisse pharetra eros id justo dictum id molestie ipsum sagittis. Mauris bibendum vehicula purus, sit amet blandit augue mattis dignissim. <h1><a href="#">Titlicious</a> </h1>Integer sem nibh, pellentesque mattis dictum in, porttitor nec ligula. Aliquam a feugiat lacus. Praesent volutpat sagittis ligula ut malesuada. Phasellus facilisis hendrerit hendrerit. Aliquam sodales placerat orci, nec pulvinar neque sollicitudin quis. Proin dictum tellus id justo sagittis egestas. Integer sit amet ipsum adipiscing orci viverra elementum. Phasellus ornare auctor massa sed pellentesque. Aliquam erat volutpat.
Etiam lobortis augue vitae velit sodales suscipit vel at magna. Maecenas et molestie velit. <h1> Announcement&#58;<a href="#">Another</a> </h1> Cras non massa at turpis malesuada fermentum. Maecenas est felis, rhoncus nec posuere in, mattis et lorem. Etiam dictum pharetra arcu non pretium. Suspendisse pharetra eros id justo dictum id molestie ipsum sagittis. Mauris bibendum vehicula purus, sit amet blandit augue mattis dignissim. Integer sem nibh, pellentesque mattis dictum in, porttitor nec ligula. Aliquam a feugiat lacus. Praesent volutpat sagittis ligula ut malesuada. Phasellus facilisis hendrerit hendrerit. Aliquam sodales placerat orci, nec pulvinar neque sollicitudin quis. Proin dictum tellus id justo sagittis egestas. Integer sit amet ipsum adipiscing orci viverra elementum. Phasellus ornare auctor massa sed pellentesque. Aliquam erat volutpat.</div>
</div>

<div id="footer">
<div id="footercont">
<div id="image"><img src="application-256x256.png" alt="App"/><h2>Info Gateway&#58; +30 2130338866</h2><h2>Support&#58; +30 2122134357</h2><h2>Fax&#58; +30 2130338866 &#40;Ext. 255&#41;</h2></div>
<div id="ftitle"><h2><a href="asdf">Created &amp; Designed by Oasisdesign.gr</a></h2></div>
<div id="pages"><h3><a href="df" title="main">Main</a> <a href="df">About.Us</a> <a href="df">Services</a> <a href="df">Our Team</a><a href="df">Portfolio</a><a href="df">Contact.Us</a></h3></div>
<div id="img">
<a href="" title="View Our Page's Visit Statistics"> <img src="chart_line.png" alt="View Our Page's Visit Statistics" border="no"" /></a> &nbsp;
<a href="" title="Check Your Order's Status"><img src="cart.png" alt="Check Status" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp;
<a href="" title="Leave us a feedback"><img src="emoticon_grin.png" alt="Feedback" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp;
<a href="" title="Start Free E-Support Live Chat Season"><img src="computer.png" alt="E-support" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp;
<a href="" title="View Our Contact Cetails"><img src="book.png" alt="Contact Info" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp;
<a href="" title="Request A Free Presentation CD"><img src="dvd.png" alt="Free DvD" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp;
<a href="" title="View Our Portfolio"><img src="briefcase.png" alt="Portfolio" title="View Our Page's Visit Statistics" border="no" /></a> &nbsp; </div>
</div>

</div>
</body>
</html>
 
index.css

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

#main&#123;
width&#58;884px;
height&#58;auto;
margin&#58;0 auto;
&#125;
#header h1&#58;hover &#123;
	width&#58; 186px; 
	height&#58; 48px;
	display&#58; block;
	color&#58;#FFFFFF;
	margin-top&#58;-8px;
	background-color&#58; #606060;
padding-top&#58;60px;
padding-left&#58;15px;
border&#58;none;

&#125;
#header h1 &#123;
width&#58; 186px; height&#58; 48px;
background-color&#58; #292929;
padding-top&#58;60px;
padding-left&#58;15px;
margin-top&#58;-8px;
display&#58; block;
color&#58; #FFFFFF;
&#125;
.trit h1&#123;
padding-bottom&#58;13px;
color&#58;#333333;

&#125;

#header&#123;
width&#58;884px;
height&#58;108px;
&#125;
#headerer&#123;
width&#58; 184px;
height&#58; 68px;
float&#58;left;
&#125;
#menu&#123;
width&#58;580px;
margin-left&#58;100px;
height&#58;78px;

float&#58;right;
&#125;

#menu h2 a&#58;link, #menu h2 a&#58;visited&#123;
text-decoration&#58;none;
margin-right&#58;10px;
padding&#58;8px;
color&#58;#42B3E3;

font-size&#58;14px;
&#125;

#menu h2 a&#58;hover&#123;
text-decoration&#58;none;
margin-right&#58;10px;
padding&#58;8px;
color&#58;#0E3075;
background-color&#58;#E8E8E8;

font-size&#58;14px;
&#125;



#bar&#123;
width&#58;884px;
height&#58;35px;
padding-right&#58;30px;
padding-left&#58; 1px;
padding-top&#58;5px;

background-color&#58;#E8E8E8;&#125;

#bar h2&#123;
font-size&#58;20px;
color&#58;#181818;&#125;

#bar h2 a&#58;link&#123;
font-size&#58;20px;
color&#58;#B0B0B0;
text-decoration&#58;none;
&#125;

#text&#123;
width&#58;864px;
height&#58;auto;
padding-right&#58;10px;
padding-left&#58;10px;
padding-top&#58;1px;
margin-top&#58;15px;
padding-bottom&#58;5px;
background-color&#58;#F8F8F8;
text-align&#58;justify;
&#125;

#title&#123;
width&#58;884px;
height&#58;50px;
margin-top&#58;20px;

&#125;
#title h2&#123;
font-size&#58;36px;
text-decoration&#58;underline;

color&#58;#0E3075;
&#125;


#text&#123;

font-family&#58;"Tahoma";
font-size&#58;14px;
color&#58;#808080;
margin-top&#58;40px;
line-height&#58;24px;
&#125;

#text h1 a&#58;link, #text h1 a&#58;active, #text h1 a&#58;visited &#123;
font-size&#58;18px;
color&#58;#42B3E3;
padding&#58;5px;
text-decoration&#58;none;
&#125;
#text h1 a&#58;hover&#123;
background-color&#58;#0E3075;&#125;
#choice&#123;
width&#58;884px;

height&#58;50px;
margin-top&#58;20px;&#125;

#text h1&#123;
color&#58;808080;
font-size&#58;20px;
&#125;
#choice a&#58;link, #choice a&#58;visited, #choice a&#58;active&#123;
background-color&#58;#E0E0E0;
border&#58; 1px solid #E0E0E0;
padding&#58;5px;
font-family&#58;"Tahoma";
font-size&#58;10px;
color&#58;#202020;
margin-right&#58;8px;&#125;
#choice a&#58;hover&#123;
background-color&#58;#E0E0E0;
border&#58; 1px solid #42B3E3;
padding&#58;5px;
color&#58;#202020;
font-size&#58;10px;&#125;

#validates&#123;
width&#58;884px;
padding-top&#58;65px;
height&#58;280px;
&#125;
div#qTip &#123;
padding&#58; 3px;
height&#58;15px;
border&#58; 1px solid #666;
display&#58; none;
background&#58;#F5F7FE;
color&#58;#666666;
font&#58; 10px Tahoma;
position&#58; absolute;
&#125;
#footer&#123;
width&#58;100%;
height&#58;450px;
display&#58;block;
margin-top&#58;40px;
background-color&#58;#202020;&#125;

#footercont&#123;
width&#58;870px;
margin-left&#58; auto ;
margin-right&#58; auto ;
height&#58;290px;
padding-left&#58;30px;
padding-right&#58;30px;
padding-top&#58;1px;
padding-bottom&#58;30px;
background-color&#58;#202020;&#125;
#copyright&#123;
color&#58;#686868;
font-size&#58;16px;
padding-top&#58;60px;

width&#58;870px;
height&#58;30px;&#125;

#pages&#123;
color&#58;#F8F8F8;
font-size&#58;16px;
padding-top&#58;5px;
float&#58;left;
width&#58;500px;
height&#58;30px;&#125;

#pages h3 a&#58;hover&#123;
color&#58;#303030;
padding-top&#58;5px;
padding-bottom&#58;10px;
padding-left&#58;5px;
margin-right&#58;5px;
padding-right&#58;5px;
background-color&#58;#D8D8D8;
font-size&#58;16px;
text-decoration&#58;none;&#125;

#pages h3 a&#58;link,#pages h3 a&#58;visited, #pages h3 a&#58;active&#123;
color&#58;#707070;
padding-top&#58;5px;
padding-bottom&#58;10px;
padding-left&#58;5px;
padding-right&#58;5px;
margin-right&#58;5px;

font-size&#58;16px;
text-decoration&#58;none;&#125;

#general&#123;
color&#58;#909090;
font-size&#58;20px;
margin-top&#58;145px;
padding-top&#58;5px;
float&#58;left;
width&#58;850px;
height&#58;30px;&#125;

#cert&#123;
color&#58;#909090;
font-size&#58;20px;
margin-top&#58;490px;
padding-top&#58;5px;
display&#58;block;
position&#58;absolute;
width&#58;100%;
text-align&#58;center;
background-color&#58;#E8E8E8;
height&#58;40px;
&#125;

#img&#123;
color&#58;#909090;
font-size&#58;20px;
margin-top&#58;300px;
padding-top&#58;5px;
float&#58;left;
width&#58;500px;
height&#58;30px;&#125;



#image h2&#123;
color&#58;#D8D8D8;
text-align&#58;center;
font-size&#58;16px;
&#125;

#general h3 a&#58;hover&#123;
background-color&#58;#42B3E3;
padding-top&#58;3px;
padding-bottom&#58;6px;
padding-left&#58;3px;
margin-right&#58;5px;
padding-right&#58;3px;

font-size&#58;16px;
text-decoration&#58;none;&#125;

#general h3 a&#58;link,#general h3 a&#58;visited, #general h3 a&#58;active&#123;
color&#58;#303030;
padding-top&#58;3px;
padding-bottom&#58;6px;
padding-left&#58;3px;
line-height&#58;30pt;
padding-right&#58;3px;
margin-right&#58;5px;

font-size&#58;16px;
text-decoration&#58;none;&#125;


#ftitle&#123;
width&#58;500px;
height&#58;50px;
float&#58;left;
margin-top&#58;30px;

background-color&#58;#202020;&#125;

#ftitle h2 a&#58;link, #ftitle h2 a&#58;visited, #ftitle h2 a&#58;active&#123;
color&#58;#B8B8B8;
padding-top&#58;3px;
padding-bottom&#58;10px;
padding-right&#58;3px;
padding-left&#58;3px;
border&#58;1px dotted #B8B8B8;

font-size&#58;27px;
text-decoration&#58;none;&#125;

#image&#123;
float&#58;right;
width&#58;253px;
padding-left&#58;7px;
background-color&#58;#383838;
padding-top&#58;70px;
height&#58;379px;
&#125;
#ftitle h2 a&#58;hover&#123;
color&#58;#F8F8F8;
border&#58;1px solid #F8F8F8;
font-size&#58;27px;&#125;
Έχω ξηλώσει ότι script είχε μέσα

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 30 Ιουν 2009 14:02

lunarmedia έγραψε:Για πάρε εδώ:
.....

Ευχαριστώ πολύ, αλλά χωρίς cufon δεν παίζει να κάνω το site, γιατί όμως; Τι πρόβλημα μπορεί να προκαλεί;


Edit: WTF? Έκανα copy τα αρχεία που μου έδωσες και σιγά σιγά εβαζα τα scriptακια (cufon και ένα άλλο) και συνέχιζε να είναι centered!

Σ'ευχαριστώ πολύ :D
;]

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 01 Ιούλ 2009 01:49

Πάλι δεν παίζει,
χωρίς scripts χωρίς τίποτα :evil: :evil: :evil: :evil:
;]

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Πρόβλημα με align και IE

Δημοσίευση από patriot » 02 Ιούλ 2009 04:23

Και ούτε θα παίξει ποτέ μιας και μλάμε για ΙΕ 6!! :hammer: :kaloe: :lol: :P
Μην στεναχωριέσαι όμως. Υπάρχουν λύσεις. Ή βάζεις αυτό:
Css code:

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

#center &#123;text-align&#58;center;&#125;
#all-other-content &#123;text-align&#58;left&#125;
Html code

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

<div id="center">
<div id="all-other-content">

bla, bla, bla, content

</div>
</div>
ή αυτό:

Css code:

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

margin&#58;auto
Html code (μπαίνει στην κορυφή της σελίδας ΠΡΙΝ από το "html"):

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
Το DOCTYPE αυτό, είναι αυτό ακριβώς που λέει το όνομα του. Τι "TYPE" θα είναι το "DOCument" αυτό. Ή θα είναι παλιό (ΙΕ6, deprecate html tags, quirks mode) ή θα είναι καινούργιο (DOCTYPE strict, ή (X)HTML, margin:auto) ή κάτι το ανάμεσα. Μια προσπάθεια δηλαδή να συνδιάσεις αυτά τα δύο (Transitional DOCTYPE)

Δες εδώ μια λίστα των DOCTYPE αν θες, και φύλαξε το url. Θα σου είναι χρήσιμο.

EDIT//
Δες και αυτό: Site και IE problem
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Πρόβλημα με align και IE

Δημοσίευση από Andreas_O » 09 Ιούλ 2009 02:06

Ευχαριστώ για την απάντηση , τώρα το είδα!

Θα το δοκιμάσω..

Αλλά..μιλάμε για IE7 :-?

EDIT: Δεν παίζει.. Αν θέλετε να δείτε κώδικα κλπ. , πείτε μου να σας στείλω με ένα zip τα αρχεία!

EDIT2: WoW. Βάζοντας <center></center> και στο "container" text-align:left έφτιαξε! Το footer συνεχίζει να έχει ένα πρόβλημα, αλλά νο πρόμπλεμ! Θα δω τι θα κάνω για το menu, στο οποίο ο IE τον λαμβάνει...
;]

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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