Cross browser CSS Buttons with background images

Hi All,
I have to make a button for a website in which the labels
will be DB driven, so i came up with css to make such buttons, but
the problem is i need the buttons to work in almost all browsers
(from version 5 - 7 IE, FF 1.0 -2.0, Opera 7 - 9 Netscape 6- 9,
safari and Mac IE and FF), The buttons are also designed in a
specific manner (i.e the button label will be having a break if
there are two words in it and will be aligned center to the
container. the edges of the button are curved and has a gradient
effect.)
I am not able to get the text centrally aligned also the text
goes off the container and gets hidden behind the right side image
in FireFox but in IE it manages to stretch the container but
doesn't gets aligned to the center, thats because i guess i am
specifying width to the container.
Any Help will be highly appreciated.
Thanks
Vinay

Similar Messages

Problem with aligning buttons with background image.

Dear all,
Just an introduction, I am a newbie to dreamweaver and currently hopelessly lost in solving some problems, and wish to seek your advice and help here.
I am creating a webpage with a background that shows a line across near the top of the site. I placed an image with the line as background under the page properties. I am placing buttons on that line, so when I mouse over the buttons, the part of the line above the buttons will darken, showing that the button has been selected.
The image of the buttons include the darken lines and the words. I can align the button lines with the background line when viewing the site in 100%, but on other resolutions or if I zoom in 125% or 150%, the lines are not aligned.
Here is a picture of my dreamweaver working area, where I manually adjust the buttons to align with the background line. The button lines are already not aligned here, but they look aligned on site in 100%.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic1.jpg[/IMG]
Here are how the lines look at 150%. The arrows show where the button lines are not aligned with the background image line.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic2.jpg[/IMG]
Can anyone advise how I can align the button lines with the background image line so that whichever resolution I view the lines will be aligned from side to side? Any tips and advice will be greatly appreciated, as I have been looking around DW for a day now and cannot find out how to fix this.
Thank you!!

Dear Murray, thank you for offering to help, much appreciated.
Here are my codes. I did not write any of the codes though, I just use the design tab and built tables and insert images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Metamorfic</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body onload="MM_preloadImages('Metamorfic Site Files/Button - About 2.jpg','Metamorfic Site Files/Button - Contact 2.jpg')">
<table width="800" border="0" align="center">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td height="187"> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td width="116" height="32"> </td>
    <td width="552"> </td>
    <td width="110"> </td>
</tr>
</table>
<table width="1100" height="50" border="0" align="center">
<tr>
    <td width="1094" height="46"><table width="672" height="34" border="0" align="center">
      <tr>
        <td width="666" height="30" align="center" valign="bottom"><img src="Metamorfic Site Files/Button - About 1.jpg" width="122" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','Metamorfic Site Files/Button - About 2.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="Metamorfic Site Files/Button - Contact 1.jpg" width="110" height="28" id="Image6" onmouseover="MM_swapImage('Image6','','Metamorfic Site Files/Button - Contact 2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
      </tr>
    </table></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td height="340"> </td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td width="300" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="300" align="center" valign="middle"> </td>
</tr>
</table>
<p> </p>
</body>
</html>

FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

Figure I'll mention this here as well.
When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
Thanks,
Mark H

I tried, but could not see and problem.
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
Thank you!

Help with background image center position in firefox

See here on
firefox<<<
i dont know whats going wrong, i tried many different ways
with divs only but doesnt work...
any help appreciated...
css
/* CSS Document */
body {
background-image:url("resources.jpg");
background:url("resources.gif") no-repeat center;
.textstyle01res {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:62%;
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
.textstyle01res a {
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
<title>Feast of Marriage - Resources</title>
<style type="text/css">

</style>
</head>
<body>
<div style="width:940px; height:140px;">
</div>
<div style="padding-left:227px;" align="center">
<table width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</div>
</body>
</html>

css:
table#centerTable {
margin-left: auto;
margin-right: auto;
html:
<body>
<div style="width:940px; height:140px;"></div>
<table id="centerTable" width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</body>
Lampros_uk wrote:
>
http://www.3ddream.net/feast/resources.html<<<
> i dont know whats going wrong, i tried many different
ways with divs only but
> doesnt work...
> any help appreciated...
>
> css
> /* CSS Document */
>
>
> body {
> background-image:url("resources.jpg");
> background:url("resources.gif") no-repeat center;
> }
>
> .textstyle01res {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:62%;
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> .textstyle01res a {
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> --------------
>
> html
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
> <link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
> <title>Feast of Marriage - Resources</title>
> <style type="text/css">
> 
> </style>
> </head>
> <body>
> <div style="width:940px; height:140px;">
> </div>
>
>
> <div style="padding-left:227px;" align="center">
> <table width="200" border="0">
> <tr>
> <td><img src="res-a.jpg" border="0"
alt=""/></td>
> </tr>
> </table>
> </div>
> </body>
> </html>
>
>

Working with Background images

HI. I have a project which contains a few slides with the same background image...an image that was caught with Snagit and then merged onto the slide. I anticipate needing to replace this image with an updated one in the near future. Is there a quick and easy way of replacing that image (which contains a number of captions, highlight boxes, etc) without having to recreate the entire slide from scratch?

Hello again,
Please save the image (p.e. as a PNG) on your PC, do not copy it to the Clipboard. The workaround I described would work, but here is even a shorter way:
Open the Slide Properties (righ mouse click menu)
Use the button 'Change background image' and point to the image saved.
The background image will be replaced, you will see both of them in the Library in this case
But there will be no problem to delete the old image (right mouse click on the image in the Library)
Try it,
Lilybiri

Looking to create fully editable PDF files with background images

Hello and thank you, I create menu's and flyers for a group of restaurants. I need to make text editable PDF menus with background images. I believe Livecycle is able to do this, but would really like to hear it from someone who knows for sure. Again thank you.
Cheers,
Charlie

Yes it can. Download a free trial and try it out.

How to add a button to background image in Fireworks

Hello!
I created recently a clickable button with a rollover effect. I made it iin FW CS5 as a symbol and exported. So I have now .html file and 2 images files (2 states of my button). The button itself works fine on a live site. Now, I want to learn a technique to be able to put that button with the effect and the link in it on an image (it would be like a background for the button).
Thanks in advance!

Two things.
First, when you save from Fireworks, you get a Fireworks document .png, complete with layers, vector objects, and all the other various complex definitions Fireworks can support. Fireworks is the only program that can interpret this information. Any other program (such as a browser) can display what the document looks like, but it's probably much larger than it needs to be for the Web. For Web use, you want to export an image (.gif, .jpg, or one of the bitmap .png variations). Be careful when you export an image to a bitmap .png format that you do not use the same name as your master FW document and overwrite your FW document.
Second, DW is not a layout program. In order to create HTML files, you probably ought to learn a bit about HTML. I recommend you work through one or both of these tutorials:
http://articles.sitepoint.com/article/html-css-beginners-guide
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/
An HTML file defines blocks of content. The blocks can be stacked or can contain other blocks. The basic html file contains two blocks: the head section and the body section. The only thing in the head section that shows is the page title in the browser's address bar. Also, JavaScript code is often put in the head section. The body section contains all the visible content of your page. Within the body section, you add blocks of content that are HTML elements.
Content blocks can have properties., One of the properties is a background image. If you want to have a page background, then you need to create an image, export it from Fireworks, and then set it as the background for the body section of the page. That image is then behind all the content blocks you define within the body section: buttons, paragraphs, other images, tables, anything. Most of these other elements can also have background images defined, too.
Fireworks produces images that are defined by what's visible as well as any active slices (such as those created by buttons). When you exported your background image with a button, Fireworks gave you an HTML table (one of the many kind of content blocks) because the button defined slice regions. Fireworks can't "know" that you really wanted a background image and then the HTML to put a button in a certain location on a page. It created the images you defined (but not what you wanted).

Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

Constrain Browser to size of background image

I have my background image at 770 x 989. I inserted 1 table
cell at 100% and imported the background image into it. How do I
keep the browser from enlarging bigger than the table cell? I'm
using DW CS3 and have Firefox as my main browser. I'm on a mac
running Leopard 10.5.2
[email protected]

As an example of how you will be trying to accomplish the
impossible, open
the page in Firefox, and increase the text size in the
browser.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Walt F. Schaefer" <[email protected]> wrote in
message
news:fvlvur$aeh$[email protected]..
> If your goal is to make your text content remain fixed
to the background
> image you are chasing a will-o'-the-wisp. Best you stop
and take time to
> learn HTML & CSS and how they interact.
>
>>How do I keep the browser from
>> enlarging bigger than the table cell?
>
> You don't. Again, take time to learn how web pages work
or you will be
> chasing your tail.
>
> --
>
> Walt
>
>
> "James Bechdel" <[email protected]>
wrote in message
> news:fvle96$n39$[email protected]..
>>I have my background image at 770 x 989. I inserted 1
table cell at 100%
>>and
>> imported the background image into it. How do I keep
the browser from
>> enlarging bigger than the table cell? I'm using DW
CS3 and have Firefox
>> as my
>> main browser. I'm on a mac running Leopard 10.5.2
>> [email protected]
>>
>
>

Using tracing image, then replacing with background image

I am very new to Dreamweaver, and am trying to put together a very simple site.
I am using a tracing image for the layout table mode – and am tracing it exactly. However, when I out put it to test in my browser,
nothing lines up how it shows in my work environment.
Am i missing something "very" obvious? Thanks.

1) Don't ever use table layout mode. It's a terrible way to build web pages.
2) No matter how hard you try, you can't make stuff stick to a big background image. It's like trying to nail Jell-O to a wall.
Have a look at the following tutorials. These will get on the right track.
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Post back if you run into any trouble.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Help with background image (Not sure how to ask this..........)

I have just started to try and make my first site. I designed it in Photoshop first as I learned in many tutorials. I don't know why my background image looks like this when I scale down below 100%, but at 100% or "fit all"&"fit width" it doesn't change and I can't move it with the hand tool or scroll it. I'm sorry, I'm just learning.
Thank you.

Hello,
in addition, I tried this (page properties = translated from my German DW) too an the only difference had been this "missing end bracket".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ioneglines.com</title>
<style type="text/css">
body {
background-image: url(myImage.png);
background-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
... before you insert your image as a background image, you have to give it the dimensions, you want to see in your file. Please use try and error method.
Hans-Günter

Safest CSS code for background image rotation?

I currently use 4 different images to do rounded corner captions, and it occurred to me that I could just be using one and rotate it, if such a thing is actually possible.
Is it?
The images are actually table cell backgrounds, so it would have to be for background rotation, and it would have to be compatible will all major browsers.

if such a thing is actually possible.
That would require working with CSS transform properties and since they just like the native rounded corner property are CSS3, which is not yet consistently working in all browsers, it is not safe. Of course one might also be able to use jQuery and such, but why complicate the source code? Stick with your images.
Mylenium

ADF mobile: page with background image

Hi,
Jdev 11.1.2.3.0 + mobile extension.
I want to have a background image on my amx page and used following code:
<amx:panelPage id="pp1"
inlineStyle='background-image:url("../background-land.png"); background-repeat:no-repeat;'>
I have created this inlineStyle using the property editor where one can browse the file location --> the image location is correct.
But at runtime I do not see any background image.
Any hints what's wrong ?
regards
Peter

Hi,
Can anyone please elaborate above statement with a code snippet.
I want to set background image for all amx pages in my mobile application.
Thank you in advance.
Regards
Kanav

Blending with background image question

Hello,
I'm trying to recreate a similar graphic to this one, which was done in CorelDraw.
I've played around with blending modes (normal, multiply etc...) and overprint on the pink crosses, but can't get them to look similar (or exactly the same, which is the goal).
The closes I've gotten was putting one cross in overprint, and another one without overprint and set to 75% transparency. But that way the pink isn't as consistent as I'd like it to be.
When using blending modes or overprint the black (the shirt on the left) completely downs out the pink. It should be visible (you can see a slight grey tint where the black is, doesn't show up in the pic well) but it shouldn't overpower the pink.
What am I missing here?

Blending modes and CMYK can produce unexpected and sometimes unpleasant results, so you might try all RGB color and an RGB Transparency Blend Space and let the conversion to CMYK happen on export or output. You'll just want to make sure you don't get too far out-of-gamut—if you turn on Separation Preview you'll see the conversion to CMYK
So here my background image is RGB even though it looks like grayscale, the pink cross is an RGB color, and the blending mode is Hard Light:
Or a pink with a darker value:

Cross browser CSS Buttons with background images

Similar Messages

Maybe you are looking for