Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 21st, 2007, 04:23 AM
Registered User
 
Join Date: Jun 2007
Location: Harrogate, , United Kingdom.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Background image problems in IE7

I've been trying to search for a fix to this problem and I'm rapidly thinking I might have to quit!!

I'm creating a website for a client that has a contact form included. The Client wants the form to be a little more than just the standard form elements so I have made the elements transparent and placed background images behind them. This is working successfully in IE6, Firefox, Netscape and partially (except for a boundary box when the element has focus) in Safari. But IE7 is still causing problems.

Heres the CSS for the textfield element.

.textfield {
    font:1.1em Verdana, Arial, Helvetica, sans-serif;
    color:#333;
    margin:3px;
    height:20px;
    border:solid 0 #fff;
    padding: 3px 8px;
    background: transparent url("Graphics/textfield_bg.gif") no-repeat fixed;
    width:200px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:187px;
}
fieldset>input.textfield {
    background: transparent url("Graphics/textfield_bg.gif") no-repeat;
}

IE6 etc Reads the first option and sure enough the background is in place, the other browsers read the Fieldset>input.textfield and this also works fine.... however... IE7 now also reads the Fieldset>input.textfield and shows the backgrounds behind the elements.

In FF etc when you enter text into the text box the background stays fixed in place when the text overflows the box.

In IE7 the background scrolls off the the left as you overflow the textbox.

If I add fixed to the Fieldset>input.textfield the backgrounds get fixed to the top left of the browser window and thus don't show.

If anyone can give me an idea how to hack this I would greatly appreciate it!! Otherwise I think boring form elements will be the order of the day for IE7, which seems a bit of a let down!

Regards

Peter Mc





Similar Threads
Thread Thread Starter Forum Replies Last Post
Background image in IE7 Samurai CSS Cascading Style Sheets 0 May 21st, 2008 10:46 PM
IE7 keeps loading an image toshi HTML Code Clinic 1 May 13th, 2008 10:02 AM
Image preview not working in IE7.Please help subhasps8 ASP.NET 2.0 Professional 0 October 3rd, 2007 12:35 AM
XSLT rendering problems in IE7 for Vista tripecac XSLT 17 July 4th, 2007 10:07 AM
background image problems Seraphim Beshoner CSS Cascading Style Sheets 3 April 11th, 2005 09:14 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.