tags:

views:

61

answers:

3
+1  Q: 

external CSS issue

Okay, time for my dumb question of the day.

I have an external css file that basically assign a background image to a button.

Css Code:

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 code:

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

My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.

I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?

+5  A: 

Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.

You select the element and you will see all css properties of it. alt text

You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.

Balon  2010-01-22 08:47:33
Hi BalonI did this and the css is right. The html code gets added at runtime via a .js file using "document.write(...)". Perhaps I should try using the createElement method.
Yo Momma  2010-01-25 06:47:14
A: 

Here's some suggestions...

First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.

Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".

Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:

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

... whilst keeping the size declarations in CSS as they are now.

See if some of those might help.

Tom  2010-01-22 10:41:46
A: 

Firstly I'd like to thank Balon for pointing me in the right direction.

After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.

Here is an example of what I am trying to put across:

Code Before (Broken):

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

Code After (Fixed):

<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
Yo Momma  2010-01-25 07:40:17

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?