Div в HTML 5 не будет отображаться из файла CSS3 - PullRequest
2 голосов
/ 11 октября 2011

Я создаю веб-страницу, используя HTML 5 и внешнюю таблицу стилей CSS3.

Я создал div для отображения прямоугольника с закругленными углами. Он отображается нормально, когда код CSS CSS находится в HTML-документе. Но как только я перенесу его в таблицу стилей css3, окно исчезнет. Я искал ответ в течение нескольких часов и не могу понять, что не так.

Вот мой HTML-код ...

<style type="text/css"> 
div
{
    border:8px solid #000000;
    padding:10px 10px; 
    background:#ffffff;
    width:500px;
    margin: auto;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>

</head>
<body>

<div><h1>WELCOME TO THE WEBSITE</h1></div>

Но как только я переместу эту часть

div
{
    border:8px solid #000000;
    padding:10px 10px; 
    background:#ffffff;
    width:500px;
    margin: auto;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

перейдите к моему файлу CSS и удалите из HTML-файла.

Поле div исчезает. Все остальные элементы, определенные в файле CSS, отображаются правильно, поэтому я знаю, что файл связан. Я просто не знаю, почему этот div не будет отображаться.

спасибо за ответ. Полный код CSS:

body
{
background-image:url(roses.png);
background-repeat:repeat top;
background-colour:#ffffff;
background-attachment:scroll;
}

h1
{
text-shadow: 2px 2px 2px #efefef;
}

div
{
border:8px solid #000000;
padding:10px 10px; 
background:#ffffff;
width:500px;
margin: auto;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

#para1
{
text-align:center;
color:red;
}

Ответы [ 3 ]

1 голос
/ 11 октября 2011

Учитывая все, что вы сказали в вопросе, мне кажется, что браузер кэширует старую версию таблицы стилей.

Проверьте Firebug, чтобы увидеть, что он думает, в таблице стилей.

Попробуйте загрузить URL-адрес таблицы стилей непосредственно в собственное окно браузера, обновите его при необходимости и убедитесь, что новый код установлен.

Единственная другая возможность, о которой я могу думать, это то, что в конце кода вашей таблицы стилей есть какая-то ошибка, которая не позволяет браузеру анализировать стили после него.

Это возможно, но я не могу проверить это, не увидев весь ваш код CSS.

0 голосов
/ 12 октября 2011

Я дал отдельным именам divs, и теперь кажется, что все работает нормально из файла css. Счастливые дни:)

0 голосов
/ 11 октября 2011

Не видя вашего полного кода, я не могу быть уверен, но я бы изменил в вашем CSS порядок двух строк, относящихся к вашей закругленной границе.

У вас всегда должна быть директива border-radius после любых специфичных для поставщика. Другими словами, строка -moz-border-radius:25px должна стоять на первом месте.

Почему это работает в одном сценарии, а не в другом, я не совсем уверен, но есть причуды ... В каком браузере вы просматриваете?

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