HTML / CSS: работает в FF, но не в Chrome или IE - PullRequest
Новая
       15

HTML / CSS: работает в FF, но не в Chrome или IE

0 голосов
/ 14 марта 2012

Я боролся с этим большую часть дня и не могу найти решение, с чем я работаю.Я изменял некоторые страницы .asp, чтобы они отражали новую страницу, которую мы добавляли на сайт, и после добавления в меню я решил изменить выравнивание текста.Я удалил padding-left: 140px CSS и заменил его на text-align: center;

. Это привело к тому, что навигационное меню стало не совсем подходящим (pic2).Я изменил файл CSS обратно на оригинальный, однако, в IE и Chrome он по-прежнему отображается странно, но в Firefox он работает нормально.Вот код, обрезанный до того, что я считаю уместным.Я могу выложить все это при необходимости. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">

<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->

<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
    <!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
        <ul>                                        
            <li><a class="current">Home</a></li>
            <li><a href="/why.asp">Why CompanyProduct?</a></li>
            <li><a href="/features/index.asp">Features</a></li>
            <li><a href="/services.asp">Services</a></li>
            <li><a href="/pricing.asp">Pricing</a></li>
            <li><a href="/resources.asp">Resources</a></li>
      <li><a href="/helpx/faqx.asp">FAQ</a></li>
            <li><a href="/contact/index.asp">Contact Us</a></li>
        </ul>
    </div>

</div>    

<div class="green_box">
     <div class="clock"></div>
    <div class="text_content">
    <h1><a href="/features/index.asp">Power of<br>
    stuff</a></h1>

    </div>

    <!--begin div for right nav w rollovers, listing top 5 features-->

        <!--#include virtual="/_ssi/div_right_nav.asp" -->

    <!--end div for right nav w rollovers, listing top 5 features-->

И остальное: 

body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}


#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none; 
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}

Как это должно выглядеть (выглядит так в FF): pic1 http://itsza.ch/pic1.png

Как это выглядит в настоящее время (в IE и Chrome): pic2 http://itsza.ch/pic2.png

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Используйте это как основу для верхнего меню, li - это блоки, поэтому вам не нужно делать их встроенными.

CSS: 

#menu ul li {
  list-style:none; 
  float:left;
}

.clear {
  clear:both;
}

HTML: 

<div id="menu">
  <ul>
    <li><a href="...">...</a>
  </ul>
  <div class="clear"></div>
</div>

У вас также есть куча избыточных правил, попробуйте удалить их, чтобы их было легче поддерживать и читать.Например, следующее правило 

#menu ul li a.current {
  height:32px;
  width: auto;
  float:left;
  text-decoration:none;
  color: #fff;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 25px;
  background-image: url(images/menu_arrow.gif);
  background-repeat: no-repeat;
  background-position: left;
}

эквивалентно этому 

#menu ul li a.current {
  background:url(images/menu_arrow.gif) left no-repeat;
}

Это потому, что вы просто переделали правила, которые уже существуют в #menu ul li

1 голос
/ 14 марта 2012

Для меню на основе списка:

  • Пропусти свой LI, а не свой A -tag
  • Используйте display:block на вашем A -tag
  • Не забудьте очистить свои поплавки.

Смотрите мой урок: Я люблю списки

...