Neden benim HTML adet sayfada gösteren ve kırıyorlar?

4 Cevap php

Ben bir PHP sitesi, HTML, CSS, bina ve jQuery javascript sağlıklı bir doz kullanıyorum. Site benim Mac tarayıcılarda kesinlikle iyi görünüyor, ama müvekkilim PC Safari kullandığı zaman nedense, o benim HTML garip bit görüyor sayfada göstermek.

İşte bazı (küçük) ekran görüntüsü örnekler:

li

Şekil 1: Bu bir Media li elemanı oldum gerektiğini </li> etiketi sadece bir kapanış. Çok zararı, ama garip değil.

submenu

Şekil 2: İşte bu <div class='submenu'> parçası olduğunu ve div etiketi düzgün hale vermedi beri, bu div tüm içeriği CSS tarafından doğru tarz alamadım.

/ / Resim güvenlik nedenleriyle kaldırılmıştır

Şekil 3: Bu son örnek <a class='top current' href=... olması gerektiğini gösteriyor ama HTML etiketinin nedense yarısı işlendiğini ve sadece dışarı basılmış olur durur. Böylece liste menüsünde kalanı tamamen bozuldu.

İşte header.php dosyasından kendisinden kod. (Ekran görülen) ana navigasyon bölümü orada atlamak istiyorsanız yıldızlarla bir çizgiyle işaretlenmiş, daha aşağı olduğunu.

<?php
  // Setting up location variables
  if(isset($_GET['page'])) { $page = Page::find_by_slug($_GET['page']); } 
  elseif(isset($_GET['post'])) { $page = Page::find_by_id(4); }
  else { $page = Page::find_by_id(1); }
  $post = isset($_GET['post']) ? Blogpost::find_by_slug($_GET['post']) : false;
  $front = $page->id == 1 ? true : false;
  $buildblog = $page->id == 4 ? true : false;
  $eventpage = $page->id == 42 ? true : false;

  // Setting up content edit variables
  $edit = isset($_GET['edit']) ? true : false;
  $preview = isset($_GET['preview']) ? true : false;

  // Finding page slug value
  $pageslug = $page->get_slug($loggedIn);
?>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<?php 
if(!$post) {
    if($page->id != 1) {
        echo $page->title." | ";
    }
    echo $database->site_name(); 
}
elseif($post) {
    echo "BuildBlog | ".$post->title;
}
?>
</title>
<link href="<?php echo SITE_URL; ?>/styles/style.css" media="all" rel="stylesheet" />
<?php include(SITE_ROOT."/scripts/myJS.php"); ?>
</head>

<body class="
<?php 
    if($loggedIn) { echo "logged"; } else { echo "public"; } 
    if($front) { echo " front"; }
?>">
<?php $previewslug = str_replace("&edit", "", $pageslug); ?>
<?php if($edit) { echo "<form id='editPageForm' action='?page={$previewslug}&preview' method='post'>"; } ?>
<?php if($edit && !$preview) :  // Edit original ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Edit</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><input style='position: relative; z-index: 500' class='save' type="submit" name="newpreview" value="Preview" /></li>
        <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
    </ul>
</div>
<?php elseif($preview && !$edit) : // Preview your edits ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Preview</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><a class="newpreview" href="?page=<?php echo $pageslug; ?>&preview&edit">Continue Editing</a></li>
        <li class="publish"><a class="publish" href="?page=<?php echo $pageslug; ?>&publishLastPreview">Publish</a></li>
    </ul>
</div>
<?php elseif($preview && $edit) : // Return to preview and continue editing ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Edit Again</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><input style='position: relative; z-index: 500' class='save button' type="submit" name="newpreview" value="Preview" /></li>
        <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
    </ul>
</div>
<?php else : ?>
<div id="meta_nav" class="meta_nav">
    <ul class="center nolist">
        <li><a href="login.php?logout">Logout</a></li>
        <li><a href="<?php echo SITE_URL; ?>/admin">Admin</a></li>
        <li><a href="<?php 
            if($front) {
                echo "admin/?admin=frontpage";
            } elseif($event || $eventpage) {
                echo "admin/?admin=events";
            } elseif($buildblog) {
                if($post) {
                    echo "admin/editpost.php?post={$post->id}";
                } else {
                    echo "admin/?admin=blog";
                }
            } else {
                echo "?page=".$pageslug."&edit";
            }

         ?>">Edit Mode</a></li>
         <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
         <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
</div>
<?php endif; ?>
<div id="public_meta_nav" class="public_meta_nav">
<div class="center">
    <ul class="nolist">
    <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
    <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
</div>
</div>

* Main Navigation Section, as seen in screenshots above, starts here * * 

<div class="header">
<div class="center">
    <a class="front_logo" href="<?php echo SITE_URL; ?>"><?php echo $database->site_name(); ?></a>
    <ul class="nolist main_nav">
    <?php 
        $tops = Page::get_top_pages(); 
        $topcount = 1;
        foreach($tops as $top) {
            $current = $top->id == $topID ? true : false;
            $title = $top->title == "Front Page" ? "Home" : ucwords($top->title);
            $url = ($top->title == "Front Page" || !$top->get_slug($loggedIn)) ? SITE_URL : SITE_URL . "/?page=".$top->get_slug($loggedIn);
            if(isset($_GET['post']) && $top->id == 1) {
                $current = false;
            }
            if(isset($_GET['post']) && $top->id == 4) {
                $current = true;
            }

            echo "<li";
            if($topcount > 3) { echo " class='right'"; }
            echo "><a class='top";
            if($current) { echo " current"; }

            echo "' href='{$url}'>{$title}</a>";
            if($children = Page::get_children($top->id)) {
                echo "<div class='submenu'>";
                echo "<div class='corner-helper'></div>";
                foreach($children as $child) {

                    echo "<ul class='nolist level1";
                    if(!$subchildren = Page::get_children($child->id)) {
                        echo " nochildren";
                    }
                    echo "'>";
                    $title = ucwords($child->title);
                    $url = !$child->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$child->get_slug($loggedIn);
                    if($child->has_published() || $loggedIn) {
                        echo "<li><a class='title' href='{$url}'>{$title}</a>";

                        if($subchildren = Page::get_children($child->id)) {
                            echo "<ul class='nolist level2'>";
                            foreach($subchildren as $subchild) {
                                if($subchild->has_published() || $loggedIn) {
                                    $title = ucwords($subchild->title);
                                    $url = !$subchild->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$subchild->get_slug($loggedIn);
                                    echo "<li><a href='{$url}'>{$title}</a>";
                                }
                            }
                            echo "</ul>";
                        }
                        echo "</li>";
                    }
                    echo "</ul>";
                }
                echo "</div>";
            }
            echo "</li>";
            $topcount++;
        }
    ?>
    </ul>
    <div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
    <h3>Media Library</h3>
    <ul class="box nolist"></ul>
    <div class="clear"></div>
    <a href="#" class="cancel">Cancel</a>
</div>
<div class="main_content">

PC Safari tarayıcı bu gibi şeyleri kırma olurdu neden kimse herhangi bir fikrin var mı? Ben PHP ile ilgili olduğunu kabul ediyorum ama bunu neden ben çözemiyorum.

Istendiği gibi burada görev HTML Kaynağı sürümü,: (IP Bilginize gizlenmiş edilmiştir)

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Become An Advocate | Habitat for Humanity</title>
<link href="http://28.5.337.28/~habiall2/styles/style.css" media="all" rel="stylesheet" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>  
<script src='http://28.5.337.28/~habiall2/scripts/tiny_mce.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/jquery.easing.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/cufon.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/helvetica_condensed.js'></script>
<script>
    Cufon.replace('#feature_boxes .heading', { hover: true });
    Cufon.replace('#feature_boxes .button', { hover: true });
</script>

<script src='http://28.5.337.28/~habiall2/scripts/front_public.js'></script><script src='http://28.5.337.28/~habiall2/scripts/front_admin.js'></script><script src='http://28.5.337.28/~habiall2/scripts/jquery.cycle.js'></script>
<script >
$('#feature_boxes').cycle({ 
    fx:     'fade',
    timeout: 8000,
    speed: 500,
    easing: 'easeInCubic',
    pager:   '.feature_pager'
    });
</script>
</head>

<body class="
public">
            <div id="meta_nav" class="meta_nav">
    <ul class="center nolist">
        <li><a href="login.php?logout">Logout</a></li>

            <li><a href="http://28.5.337.28/~habiall2/admin">Admin</a></li>
            <li><a href="?page=what-is-advocacy&edit">Edit Mode</a></li>
            <li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
            <li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
        </ul>
        <div class="clear"></div>
    </div>

    <div id="public_meta_nav" class="public_meta_nav">
    <div class="center">
    <ul class="nolist">
    <li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
    <li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
    </div>
</div>

<div class="header">
    <div class="center">
        <a class="front_logo" href="http://28.5.337.28/~habiall2">Habitat for Humanity</a>
        <ul class="nolist main_nav">
        <li><a class='top' href='http://28.5.337.28/~habiall2'>Home</a></li>
        <li><a class='top' href='http://28.5.337.28/~habiall2/?page=about'>About</a>
            <div class='submenu'><div class='corner-helper'></div>
            <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=about-us'>About Us</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=mission-and-vision'>Mission And Vision</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=history'>History</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=staff-and-board'>Staff And Board</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=jobs-and-internships'>Jobs And Internships</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=directions'>Directions</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=annual-report'>Annual Report</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=our-stories'>Our Stories</a>
            <ul class='nolist level2'><li><a href='http://28.5.337.28/~habiall2/?page=homeowner-profiles'>Homeowner Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=volunteer-profiles'>Volunteer Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=partner-profiles'>Corporate Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=community-profiles'>Community Profiles</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=calendar'>Calendar</a></li>
        </ul>
        </div>
    </li>
    <li><a class='top current' href='http://28.5.337.28/~habiall2/?page=get-involved'>Get Involved</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=Construction'>Construction</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>
                <li><a href='http://28.5.337.28/~habiall2/?page=faith-programs'>Faith Programs</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=youth-programs'>Youth Programs</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=forms-and-info'>Forms And Info</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=AmeriCorps'>AmeriCorps</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=advocate-1'>Advocate</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=become-an-advocate'>What Is Advocacy?</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=what-is-advocacy'>Become An Advocate</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=donate-1-2'>Donate</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=one-time-donation'>One-time Donations</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=corporate-donations'>Corporate Donations</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=ReStore'>ReStore</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=vehicle-donation'>Other Ways To Donate</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=item-wishlist'>Item Wishlist</a>
            </ul>
            </li>
        </ul>
        </div>
    </li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=apply'>Apply</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=process'>Requirements</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=requirements'>Income Guidelines</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=Local-Assistance-'>Local Assistance </a></li>
        </ul>
        </div>
    </li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=blog'>BuildBlog</a></li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=media'>Media</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=presskit'>Presskit</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=media-gallery'>Media Gallery</a></li>
        </ul>
        </div>
    </li>        
</ul>
<div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
    <h3>Media Library</h3>
    <ul class="box nolist"></ul>
    <div class="clear"></div>
    <a href="#" class="cancel">Cancel</a>
</div>

4 Cevap

PHP (siz bunu yapmak yapma çalışmak sürece) tarayıcılar arasında herhangi bir farklılık üretmek asla. Bu serverside derlenmiş, böylece tarayıcı gördüğü tek şey HTML / CSS / Javascript 'oluyor.

Kesinlikle standartlar modunda tarayıcıları tarafından işlenecek uygun bir DOCTYPE geçerli HTML üretmek gerekir. Yapmadığınızda, tarayıcılar onların yeteneklerini en iyi bulmak hataları düzeltmek için çalışın. Geçerli HTML görüntülemek için tek bir standart yol (sözde) varken, olası hataların çeşitliliği sonsuz olduğundan geçersiz HTML işlemek için hiçbir kural oradayız. Kırık HTML (aka etiketi çorbası) yolu daha fazla çapraz tarayıcı farklılıklara tabidir.

Şimdi, ilk şüpheli olarak PHP dahil ettik gerçeği web teknolojilerinin nasıl çalıştığını net bir fikrim yok ve etkileşim yok olduğunu göstermektedir. Her şey yolunda (hepimiz bir yere öğrenmeye başlamak zorunda) ama PHP bir sunucu tarafı dil bilmeli. Bu HTML (ve CSS, JavaScript ya da fotoğraf) üretebilirsiniz ancak tarayıcı sadece çıktısını alırsınız. Sayfanız kötü görünüyor zaman, ilk hata ayıklama aracı olarak Tarayıcınızın Görünüm Kaynak menüsünden başvurmaktadırlar.

Update

Bu kullanabilirsiniz: http://validator.w3.org/#validate_by_input

HTML (ancak hepsi aynı kaynak olması muhtemeldir) 55 hataları tetikler. Ayrıca CSS doğrulamak için iyi bir fikirdir.

I validated your HTML, and only three things came up: You have two links with spaces in them: <li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a><li> and <li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>

ve bir yerde bir işareti yerine kullanılan & küçük, ama could soruna neden olabilir varsayalım ki. Ben de sayfa Krom veya Firefox yanlış işlemek için alamıyorum, ama sonra CSS veya JS yok. Senin Javascript fiyatları bir işler kadar gumming olduğunu mümkün mü? Tüm JS kaldırmayı deneyin ve hata hala orada olup olmadığını görmek.

Eğer doctype sonra sağ görünmelidir başlığındaki "<html>" etiketi eksik html bakıyor. Ben bu ayrıştırma hataları önlemede önemli olduğunu hayal ediyorum.

Alvaro önerilen gibi, bunu en iyi çapraz tarayıcı uyumluluğu için geçerli olduğundan emin olmak gerekir.

W3C validator kullanabilirsiniz: http://validator.w3.org/ sizin html doğrulamak için

etiketler