внешняя проблема CSS - PullRequest
Новая
       7

внешняя проблема CSS

1 голос
/ 22 января 2010

Хорошо, время для моего тупого вопроса дня.

У меня есть внешний файл CSS, который в основном назначает фоновое изображение для кнопки.

Код Css: 

input.keypad
{
    cursor: pointer;
    display: block;
    min-width: 64px;
    width: 64px; 
    height: 64px;
    margin: 0;
    border: 0;
    background: url(images/btn1.jpg) no-repeat center top;
}

HTML-код: 

<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">

Моя дилемма в том, что при первой загрузке страницы она работает на 100%, но когда я обновляю ее, кажется, что она игнорирует ширину и высоту, заданные в файле css. Изображение находится на заднем плане, но обрезано из-за этого.

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

Ответы [ 3 ]

5 голосов
/ 22 января 2010

Используйте Firebug , чтобы найти причину.Это поможет вам увидеть, какие свойства CSS применяются к элементу и т. Д.

Вы выбираете элемент и видите все его свойства CSS.alt text
(источник: getfirebug.com )

Вы должны узнать, что есть много полезных инструментовтам, которые могут помочь вам решить многие из ваших проблем :) Особенно Firebug.Это обязательный инструмент.

0 голосов
/ 25 января 2010

Во-первых, я хотел бы поблагодарить Балона за то, что он указал мне правильное направление.

После использования предложенной им надстройки браузера и просмотра html-источника я заметил, что мой тег <link, указывающий на внешний файл css, помещается в <body html, что я нахожу очень странным. Просмотрев мой html-код, я увидел, что мой тег <link был заражен тегом <head>, но был ниже тега <script, который после замены тегов теперь работает на 100%.

Вот пример того, что я пытаюсь донести:

Код перед (сломан): 

<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">

Код после (исправлено): 

<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
0 голосов
/ 22 января 2010

Вот несколько предложений ...

Во-первых, обновляйте все страницы с помощью Ctrl + F5 в Firefox, чтобы каждый раз перезаписывать кеш браузера.

Во-вторых, убедитесь, что у кнопки нет родительского элемента где-то в CSS, переопределяющего его, например, "form.myForm input {...}".

В-третьих, вместо объявления фона кнопки в CSS, переместите это объявление в свой HTML-код следующим образом: 

<input type="image" class="keypad" src="images/btn1.jpg"/>

... сохраняя объявления размеров в CSS такими, какие они есть сейчас.

Посмотрите, могут ли некоторые из них помочь.

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

Нет похожих вопросов

...