Background / No Background

[Guest mondomota]

Hi,

I'm having trouble with the middle column of one of my sites in Classic.

I've given the borders and the backgrounds 'transparent' colours (ie FFFFFF transparent) which, on my Mac in Firefox and Netscape 7 works fine and the main page image can be seen with no borders around the boxes but on different browsers the following happens:

Firefox on a Mac - Perfect

IE6 on a PC - Transparent background, solid borders

IE5 on a Mac - Solid background, solid borders

Netscape 7 on a Mac - Transparent background, transparent borders (as I want it)

Netscape 8 on a PC - As I want it

So basically, it's Internet Explorer that I'm having the problem with.

Also, I've noticed on the PC using IE6, the 'welcome' box and the 'new products' box on the home page are 'fused' together whereas on the Mac in IE5 they're nicely separated.

So my questions are, do I assume that some browsers just don't support the term 'transparent' and how do I separate those boxes?

As I'm sure you can tell, I'm a relative newbie to this web design lark and am just managing to learn a bit as I go along. Any help would be much appreciated.

For anyone who's interested this is the site I'm on about:

My Webpage

[Guest Benchmarc]

I'm afraid i cant help, but i'm interested in the transparent colour idea. Not come acros that before,

is it just a case of inserting - #FFFFFF transparent

thanks

Gary

[Guest mondomota]

I'm afraid i cant help, but i'm interested in the transparent colour idea. Not come acros that before,

is it just a case of inserting - #FFFFFF transparent

thanks

Gary

Hi Gary,

This is the code for an example box to show you what I mean:

.boxContent {

border: 1px solid #000000 transparent;

padding: 3px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

background-color: #FFFFFF transparent;

margin-bottom: 5px;

[markscarts]

Where do you get that syntax - and why are you setting colors (black and white) before "transparent"? This is unnecessary. Try simply using the word "transparent" with no hex value.

I would suggest the following experiments, as these are methods I have used many times with success, though I admit I have not done testing with IE on a mac . . .

1. Method One, "transparent" as the color value, example:

.boxContent {

border: 0px;

padding: 3px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

background-color: transparent;

margin-bottom: 5px;

}

2. Method Two, specify no colors, browser default is transparent:

.boxContent {

border: 0px;

padding: 3px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

margin-bottom: 5px;

}

Have a try and see if that works :D

[Guest mondomota]

Thanks MarksCarts,

I was just messing about to see if a 'transparent' command worked, happened to leave the hex values in place and when checked on FF it did what I wanted so I left the hex values in. Pure laziness on my part really.

Obviously leaving the hex value in causes problems with some browsers so I'll do as you suggest and do things properly.

Thanks for your help

:D