Thoughts on Image Dimensions in CSS

[danshields]

Ok so I work on an application that uses the same markup for multiple sites. So of course all the buttons that are images have the same widths, heights and filenames for each site. Each site has their own CSS file image directories and what not. The problem is this limits the designer as to how customized they can create the buttons for our site that is in the markup in image tags. With each site having its own custom look and feel we really want to be able to use different sized buttons or text on buttons depending on the site.

Yes it would be better to style a background for a button and use html text on top for all our buttons but I don’t have the ability to force this. I thought about doing image replacement and just having text inside an a tag but I don’t think any of the current image replacement methods are to my liking because of the whole images off and css on, because some of the buttons are pretty important and would just be wrong if a person was viewing the site without images and I really don’t want to have an empty extra tag inside all of my a tags.

So that leaves us with what is a better do an image replacement and extra markup or to just specify the image dimensions in the CSS and leave the image in the code. This would mean the file names would have to stay the same though for all sites. I thought of just doing this before but I guess the downside from leaving out the width and height in the image tag is the quirkyness when loading the page and I don’t think specifying the width and height in the css helps that at all. I might be wrong and this really isn’t a factor anymore but I am sure we still want to not have the images acting all crazy on a slow connection.

I mean I guess if I am using image replacement for my main navigation on some sites then I am already messing it up for most people with Images turned off. I just haven’t read to many articles on people’s opinions about using image replacement for button images. Most of the talk is on headers or if it is a button then people are talking about how to create the most flexible button with text placed on top with html.

[Author]

Posts