ASP.NET & Chrome/Mozilla/IE

nspyrou · 26 Ιουλίου 2011

Κύριοι καλησπέρα σας,,

έχω ένα πρόβλημα σχετικά με το CSS του site που φτιάχνω σε ASP.NET & C#. (άσχετο το C# εδώ,, αλλά ας όψεται) ...

Το site είναι στημένο με master page. Ευτυχώς!! Το πρόβλημά μου είναι ο Chrome ... Σε Mozilla & IE το header και το footer των σελίδων μου είναι normal και στα πλαίσια που θα έπρεπε αφού έχω ορίσει τα σχετικά margins, widths & heights όπως κάτωθι:

>
.page
{
   width: 960px;
   background-color: #fff;
   margin: 20px auto 0px auto;
   border: 1px solid #496077;
}

.header
{
   position: relative;
   margin: 0px;
   padding: 0px;
   width: 100%;
   height:300px;
}

.footer
{
   color: #4e5766;
   padding: 8px 0px 0px 0px;
   margin: 0px auto;
   text-align: right;
   font-size: x-small;
   line-height: normal;
   height:20px;
}

Στον IE & Mozilla όλα είναι καλά!! Όταν έρχεται η ώρα του Chrome,, το header και το footer (2 divs με class="header" & class="footer") παίρνουν ένα τρελό ύψος,, και άσχετο με τα 300px που έχω ορίσει στο CSS μου.

τα Divs τα έχω ορίσει ως εξής:

>
   <div id="MainDiv" class="page">
       <div class="header">
           <asp:Image runat="server" ImageUrl="~/graphix/hdImg.jpg" Width="100%" Height="100%" />
       </div>
<!-- κάποια άλλα ενδιάμεσα πράγματα -->
       <div class="footer">
          MyCompany™ © Copyright® 2011, All rights reserved.
       </div>
   </div>

Γνωρίζετε πως μπορώ να αποφύγω το stretching που κάνει ο Chrome? Υποθέτω πως το ίδιο πρέπει να γίνεται και στον Safari,, γιατί από κινητό που το είδα,, έπαθα εγκεφαλικό!!

Σας ευχαριστώ εκ των προτέρων ..!

_tasos · 26 Ιουλίου 2011

Δοκίμασε τα developer tools που έχει ο Chrome (όπως και κάθε browser) και προσπάθησε να απενεργοποιήσεις κάθε φορά ένα από τα css rules που έχεις γράψει. Λογικά κάποιος από αυτούς δημιουργεί το conflict.

Επίσης, θα μπορούσες να χρησιμοποιήσεις κάποια reset css stylesheets τα οποία "αρχικοποιούν" κάποια βασικά properties όπως margin και padding. Έτσι π.χ. δεν θα χρειάζεται να δίνεις σε κάθε κλάση σου margin:0px; padding:0px; και θα γράφεις πιο απλό και καθαρό css.

cyclo · 26 Ιουλίου 2011

φίλε μου θέλεις να στείλεις html/css κώδικα της σελίδας μπας και βγάλουμε καμια άκρη;

γιατί είναι 1 λεπτό δουλειά και όπως το περιγράφεις με aspx κώδικα είναι δύσκολο.

στείλε καθαρά html /css όπως τον βλέπει ο browser.

(ctrl+u)

συνήθως, εαν ο chrome/safari το βγάζει λάθος, μάλλον ειναι invalid css rule, και απλά οι άλλοι το παρακάμπτουν.

δεν ειναι πάντα έτσι βέβαια.

όπως και να χει, στείλε html όχι aspx.

nspyrou · 27 Ιουλίου 2011

Καλημέρα σας,

κατάφερα τελικά να κάνω resolve το θέμα, (μετά από αρκετό παίδεμα) ...

αυτό που μου είχε κάνει εντύπωση ήταν το CSS, γιατί εφόσων είχα ορίσει τα όρια στατικά στα 300px height το banner του header της σελίδας συνέχιζε να φτάνει σε όλο το ύψος της.

αυτό που είχα κάνει (και δουλεύει στο Mozilla & IE) είναι οτι μέσα στο <div> του header είχα ορίσει το image με ύψος 100%. Αυτό φαίνεται οτι δεν κάνει inherit το ύψος του container <div> στον Chrome(?!) με αποτέλεσμα το 100% να το αντιστοιχίζει στο συνολικό ύψος της σελίδας.

Αλλη εξήγηση δεν μπορώ να δώσω. Μόλις το είδα και άλλαξα το ύψος καρφωτά σε 300px, έπαιξε κανονικά όπως αναμενόταν. Το ίδιο φαίνεται να ισχύει και στον Safari.

Ενδεικτικά κάνω post την αλλαγή:

πριν ήταν έτσι το header. To <image> εχει height="100%":

>
<div id="MainDiv" class="page"> 
       <div class="header"> 
           <asp:Image runat="server" ImageUrl="~/graphix/hdImg.jpg" Width="100%" Height="100%" /> 
       </div> 
<!-- κάποια άλλα ενδιάμεσα πράγματα --> 
       <div class="footer"> 
          MyCompany™ © Copyright® 2011, All rights reserved. 
       </div> 
   </div>

Ο κώδικας που όντως λειτουργεί τώρα είναι έτσι:

>
<div id="MainDiv" class="page"> 
       <div class="header"> 
           <asp:Image runat="server" ImageUrl="~/graphix/hdImg.jpg" Width="100%" Height="300px" /> 
       </div> 
<!-- κάποια άλλα ενδιάμεσα πράγματα --> 
       <div class="footer"> 
          MyCompany™ © Copyright® 2011, All rights reserved. 
       </div> 
   </div>

Σας ευχαριστώ και τους δύο για τη συμβολή σας.

cyclo · 27 Ιουλίου 2011

να ξέρεις ότι πολλά προβλήματα css και crossbrowsing λύνει το reset css, το οποίο αφαιρεί margins / paddings και άλλες διαφορές που υπάρχουν στους browsers όσον αφορά τα html elements. θεωρώ ότι απο κεί πρέπει να ξεκινήσει κανείς ώστε να έχει crossbrowsed app

parsifal · 27 Ιουλίου 2011

Περίεργο, γιατί το παρακάτω φαίνεται να μου δουλεύει κανονικά σε Chrome:

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="el">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style>
       .page {
           width: 960px;
           background-color: #fff;
           margin: 20px auto 0px auto;
           border: 1px solid #496077;
       }
       
       .header {
           position: relative;
           margin: 0px;
           padding: 0px;
           width: 100%;
           height:300px;
       }
       
       .footer {
           color: #4e5766;
           padding: 8px 0px 0px 0px;
           margin: 0px auto;
           text-align: right;
           font-size: x-small;
           line-height: normal;
           height:20px;
       }
   </style>
</head>
<body>
   <div id="MainDiv" class="page">
       <div class="header">
           <img src="http://dummyimage.com/100x100/000/fff" alt="An image!" width="100%" height="100%" />
       </div>
<!-- κάποια άλλα ενδιάμεσα πράγματα -->
       <div class="footer">
          MyCompany™ © Copyright® 2011, All rights reserved.
       </div>
   </div></body>
</html>

nspyrou · 28 Ιουλίου 2011

να ξέρεις ότι πολλά προβλήματα css και crossbrowsing λύνει το reset css, το οποίο αφαιρεί margins / paddings και άλλες διαφορές που υπάρχουν στους browsers όσον αφορά τα html elements. θεωρώ ότι απο κεί πρέπει να ξεκινήσει κανείς ώστε να έχει crossbrowsed app

Θα ήθελες σε παρακαλώ να μου δώσεις ένα ενδεικτικό παράδειγμα πάνω στο reset css ή κάποιο κατανοητό resource?!

Σ'ευχαριστώ!

Περίεργο, γιατί το παρακάτω φαίνεται να μου δουλεύει κανονικά σε Chrome:

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="el">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style>
       .page {
           width: 960px;
           background-color: #fff;
           margin: 20px auto 0px auto;
           border: 1px solid #496077;
       }
       
       .header {
           position: relative;
           margin: 0px;
           padding: 0px;
           width: 100%;
           height:300px;
       }
       
       .footer {
           color: #4e5766;
           padding: 8px 0px 0px 0px;
           margin: 0px auto;
           text-align: right;
           font-size: x-small;
           line-height: normal;
           height:20px;
       }
   </style>
</head>
<body>
   <div id="MainDiv" class="page">
       <div class="header">
           <img src="http://dummyimage.com/100x100/000/fff" alt="An image!" width="100%" height="100%" />
       </div>
<!-- κάποια άλλα ενδιάμεσα πράγματα -->
       <div class="footer">
          MyCompany™ © Copyright® 2011, All rights reserved.
       </div>
   </div></body>
</html>

Σου δουλεύει παρόλο το οτι το image είναι ορισμένο σε μορφή ποσοστού??

Γιατί η αλλαγή αυτή ουσιαστικά μου έφτιαξε το layout της σελίδας. Μόλις όρισα το ύψος του image σε 300px έστρωσε ....

parsifal · 28 Ιουλίου 2011

Σου δουλεύει παρόλο το οτι το image είναι ορισμένο σε μορφή ποσοστού??

Γιατί η αλλαγή αυτή ουσιαστικά μου έφτιαξε το layout της σελίδας. Μόλις όρισα το ύψος του image σε 300px έστρωσε ....

Δουλεύει, αλλά με τον κώδικα ακριβώς που πόσταρα. Δεν ξέρω πώς ο IIS μεταφράζει σε HTML το ASP Image directive που παρέθεσες στο αρχικό σου μήνυμα, αλλά υπέθεσα πως λογικά θα παράγεται (ή θα έπρεπε να παράγεται) κάτι αντίστοιχο με το img tag που έχω πιο πάνω. Φαντάζομαι ότι γι' αυτό και οι φίλοι που απάντησαν πιο πάνω σε παρότρυναν να δώσεις το τελικό HTML output που φτάνει στον client, ίσως εκεί να δημιουργείται το πρόβλημα...

cyclo · 29 Ιουλίου 2011

Θα ήθελες σε παρακαλώ να μου δώσεις ένα ενδεικτικό παράδειγμα πάνω στο reset css ή κάποιο κατανοητό resource?!

Σ'ευχαριστώ!

π.χ ο IE προσθέτει κάποια margins+paddings στα block elements.

ή βάζει border στα images.

ένα reset css μοιάζει κάπως έτσι:

div,p { margin:0; padding:0; }

img { border:0; }

και προσθέτεις css κανόνες προκειμένου να έχεις στους browsers όσο το δυνατόν όμοιο αποτέλεσμα.

κτλ κτλ

_tasos · 29 Ιουλίου 2011

Για reset css χρησιμοποιώ αυτό:

>
* { margin: 0; padding: 0; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn, cite, var, address { font-style: normal; }
th, b, strong { font-weight: bold; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
table {border-spacing: 0; }
caption, th, td, center { vertical-align: top; }
body { line-height: 1;}
q { quotes: "" ""; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */

Κάπου το βρήκα και το κράτησα. Αν κάνεις google τον όρο reset css θα βρεις πολλά παραδείγματα και css αρχεία.

Σύνδεση

ASP.NET & Chrome/Mozilla/IE

Προτεινόμενες αναρτήσεις

nspyrou

_tasos

cyclo

nspyrou

cyclo

parsifal

nspyrou

parsifal

cyclo

_tasos

Αρχειοθετημένο

Σύνδεση