Learn VBA & Macros in 1 Week!

CSS - Translucent Background Problems In Ie

Full Excel VBA Course - Beginner to Expert

Translucent Background Problems In Ie	View Content

ok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas?

Full Excel VBA Course - Beginner to Expert

Translucent Background + Solid Background On Cells Inside

Similar Tutorials

View Content

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

Ie Doesn't Like Translucent Png's, Is There A Way To Do It With Css?

Similar Tutorials

View Content

Once again my developement is stalled with the interactions of my website with the multitude of browsers...

Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong.

Internet Explorer, on the other hand, is a different beast entirely.

Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through.

So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE.

I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ).

Regards,

Translucent Tables

Similar Tutorials

View Content

I am attempting to build an online community, using phpBB 2.0.10 as its core. Two of the problems I have been running into seems as if I should be able to handle them easily, but they have been driving me up the wall.

[Part I]Fixed Background Images (non-CSS)
I was looking for a way to include a large background image and not have it be repeated; I finally found (just a few days ago) a script that would cause the text, tables, images, and other page elements to scroll over a fixed background image. So it seems that problem has been solved, although I submit it for your critique because I have met mixed responses to the first code

Code:

<body bgproperties="fixed">

which I was told only works on IE. I then stumbled across a second:

Code:

<style>
body {background-attachment:fixed}
</style>

The above code is supposed to support Netscape/Mozilla browsers as well.

[Part Two]Table Transparency (possible CSS???)
This is simple; I am looking for a means to adjust the alpha of my tables to give them a translucent appearance. This cannot be faked due to the fixed background and scrolling page elements!

I can't seem to find any documentation on the subject. But I need a partial transparency on my tables so that the background image is somewhat visible through them as they scroll.

Translucent Div On Top Of Image When On Hover?

Similar Tutorials

View Content

Hi there,

I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right?

Any ideas?

New To Css And Having Some Background Problems

Similar Tutorials

View Content

I have recently (as in yesterday) installed Fireworks and Dreamweaver and I have been turning a png into a webpage and I have spent so much time getting the page to how it is now, my problem is that when I add a paragraph <p> into the html so that I can add some text, the default css background stays but does cover the entire page any more.

I could be wrong and this could be a html issue (which as I am posting this seems more apparent) but if I remove the <p> the page displays perfectly although obviously no place to add text.

I tried grouping them into different <div> and assigning them different ids and trying multiple different css functions to get it working,assigning the background in css but this provided the exact same result so any help would be appreciated (I think this could be more html related so after looking at my files if it is feel free to move it).

You will see when you open the html file that there is a white gap under the main buttons but if u remove the <p> from the html it disappears.

XHTML 1.0 Transitional complaint
CSS level 2.1 Valid

Ok, I cant post a link to my files so below is the best I can do
or torquesro.info/Full.rar (if this is against the rules, sorry and feel free to remove it)

Css Background Problems

Similar Tutorials

View Content

hi im just learning css and im trying some things out and i ran into a problem i cant solve. my background is 4 images that overlap and it looks fine when i load it on the browser.
but if i try to add my banner image i cant see the banner but my "background" is still there.

can i set a specific order of the pictures some how because i think the background pictures overlap my banner image.

heres the code minus the banner image. let me know if theres a code to put the images in the front or the back or whichever order i want.

<html>

<head>

<title>Weblinks Webdesign</title>

<style type="text/css">
#background {
position:fixed;
left:3px;
top:3px;
width:717px;
height:720px;
background-image:url(images/background.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background1 {
position:fixed;
left:400px;
top:3px;
width:717px;
height:720px;
background-image:url(images/background1.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background2 {
position:fixed;
left:400px;
top:300px;
width:717px;
height:720px;
background-image:url(images/background2.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background3 {
position:fixed;
left:3px;
top:300px;
width:717px;
height:720px;
background-image:url(images/background3.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

</style>

</head>

<div id="background2"></div>
<div id="background"></div>
<div id="background1"></div>
<div id="background3"></div>

<P style="position:absolute;
top:-30px;
left:225px;
padding: 5px 5px 5px 5px;
font-size: xx-large;
color: white;">Welcome to Weblinks Webdesign</P>

<p STYLE="position:absolute;
top:150px;
left:225px;
font-size: medium;
color: black;">Weblinks is currently under construction</p>

</body

</html>

Background Url Problems

Similar Tutorials

View Content

I'm trying to set the background-image as follows-

background-image: url("http://ezi-trading.com/test/welcome.gif");

This works fine inside the browser, but the background image does not display when the HTML is embedded within an HTML email.

Any ideas please. The full listing is below.

Thanks
Matthew

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#banner{ background-image: url("http://ezi-trading.com/test/welcome.gif"); background-position:center; height:100px; width:700px; background-repeat:no-repeat; position:relative;  background-color:#CCCCCC; }
-->
</style>

</head>

<body>
<div id="banner">
</div>
</body>
</html>

Css Background Image Problems

Similar Tutorials

View Content

- EDIT -

I feel stupid because the images are named content_02.jpg not content02.jpg

Sorry - I knew I wasn't crazy

I've encountered a seriously odd css difficulty. Where as two nearly identical tags being called upon in the same manner... one will work and the other will not.

This is my Stylesheet

Code:

td.bgimg1 {
background-image: url('images/content02.jpg');
}

td.bgimg2 {
background-image: url('images/content06.jpg');
}

td.bgimg3 {
background-image: url('images/index_17.jpg');
}

td.bgimg4 {
background-image: url('images/index_18.jpg');
}

td.upbgimg1 {
background-image: url('../images/content02.jpg');
}

td.upbgimg2 {
background-image: url('../images/content06.jpg');
}

td.upbgimg3 {
background-image: url('../images/index_17.jpg');
}

td.upbgimg4 {
background-image: url('../images/index_18.jpg');
}

td.upbgimg5 {
background-image: url('../images/comic_01.jpg');
}

A:link
{
	FONT-FAMILY: Verdana, tahoma, Arial;
	COLOR: #284966;
	TEXT-DECORATION: underline;
}
 A:visited 
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    color : #284966;
    text-decoration : underline;	
}
A:active
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #284966;
    TEXT-DECORATION: underline;
}
A:hover
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #FF8C00;
    TEXT-DECORATION: underline;
}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	margin-bottom:0
}
table{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}

This is the code where they are called upon...

Code:

<td width="16" class="upbgimg3"></td>

This one works

Code:

<td width="16" class="upbgimg4"><div align="right"></div></td>

As does this..

---

But the following don't work.

Code:

<td class="upbgimg2">&nbsp;</td>

Code:

<td class="upbgimg1" valign="bottom"><div align="center">- Text -</div></td>

I am linking to my style sheet as follows.

Code:

<link href="../textstyle.css" rel="stylesheet" type="text/css">

Any ideas?

Problems With Y-repeat Background

Similar Tutorials

View Content

Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason.

here is my css code:

html, body
{
margin: 0px;
padding: 0px;
background-color: #000000;
}

/**************************/
/**************************/
/**********LAYOUT**********/
/**************************/
/**************************/
div#container
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 963px;
height: 100%;
border-style: solid;
border-color: #CC9900;
border-width: 2px;
}

/*****HEADER*****/
div#header
{
background-color: Teal;
width: 963px;
height: 175px;
}

/****************/
/*****MIDDLE*****/
/****************/
div#middle
{
width: 963px;
float: left;
background-image: url('../images/left.png');
background-repeat: repeat;
}

/*****LEFT BOX*****/
div#leftbox
{
background-image: url('../images/left.png');
background-repeat: repeat-y;
height: auto;
width: 213px;
float: left;
}

div#links
{
width: 213px;
height: 375px;
float: left;
background-image: url('../images/links.png');
}

/*****MIDDLE BOX*****/
div#centerbox
{
background-image: url('../images/body.png');
background-repeat: repeat-y;
width: 535px;
float: left;
border-left: solid 1px #CC9900;
border-right: solid 1px #CC9900;
}

div#title
{
width: 535px;
height: 40px;
border-bottom-style: solid;
border-bottom-color: #CC9900;
border-bottom-width: 1px;
margin-top: 0px;
}

div#list
{
width: 535px;
height: auto;
background-image: url('../images/left.png');
background-repeat: repeat-y;

}

/*****RIGHT BOX*****/
div#rightbox
{
background-image: url('../images/left.png');
width: 213px;
background-repeat: repeat-y;
float: right;
}

div#news /*This is the title text for the news box*/
{
width: 213px;
height: 25px;
margin: auto;
}

div#newsbox /*This is the news box div*/
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

div#events
{
width: 213px;
height: 25px;
margin: auto;
}

div#eventsbox
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

/****************/
/*****FOOTER*****/
/****************/
div#footer
{
background: #333333;
width: 963px;
height: 55px;
clear: both;
background-image: url('../images/footer.jpg');
}

/*****CONTACTS*****/
div#phone
{
float: left;
width: 213px;
height: 55px;
text-align: left;

}

div#address
{
float: left;
width: 535px;
height: 55px;
text-align: center;
}

div#e-mail
{
float: left;
width: 213px;
height: 55px;
text-align: right;
}

/*****FLASH DIVS*****/
div#flashcontent
{
width: 963px;
height: 175px;
}

/********************/
/*****PROPERTIES*****/
/********************/

/*****DIVS*****/
div.event1
{
background-image: url('../images/event_1.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 37.5px;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;

}

div.event2
{
background-image: url('../images/event_2.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 20px;
margin-right: 37.5px;
margin-top: auto;
margin-bottom: auto;
}

div.list
{
width: 535px;

}

div.listtext
{
width: 435px;
}

div.sublisttext
{
width: 335px;
}

/*****LISTS*****/
ul
{
text-decoration: none;
margin-top: auto;
margin-bottom: auto;
margin-left: -10px;
width: 213px;
}

li {
list-style-image: url('../images/diamond_bullet_white.png');
width: 213px;
height: 31.25px;
margin: auto;
line-height: 31.25px;
}

/*****ANCHORS*****/
a
{
text-decoration: none;
color: #000000;
width: 213px;
height: 31.25px;
margin: auto;
}

a.e-mail /*This is issued to any anchors for e-mail, addresses*/
{
color: #000000;
font-weight: bold;
}

a:active
{
color: Red;
text-decoration: none;
list-style: none;
}

a.contacts
{
margin: none;
color: #FFFFFF;
}

/***PARAGRAPHS***/

p#contactinfo
{
color: #FFFFFF;
font-size: 11.5px;
height: 55px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
}

p.title
{
color: #000000;
font-size: 30px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
height: 40px;
}

p.body
{
width: 500px;
margin: auto;
}

p.boxtitle
{
font-size: 20px;
text-align: left;
margin-left: 7px;
margin-top: auto;
margin-bottom: auto;
}

p.subheader
{
width: 500px;
font-size: 14px;
text-align: left;
font-weight: bold;
margin: auto;
}

Problems With Background Image

Similar Tutorials

View Content

for some reason my background image is NOT showing up--
i have tried everything that i can think of --

i do have an IMAGE directory on server-- and the image is in the directory --

i am sure it is something stupid that i am not seeing or doing
but sure would appreciate a little help--

thanks in advance for help-- i so appreciate it

here are links to site and code

PAGE

CSS

Background Style In Css, Big Problems In Ie

Similar Tutorials

View Content

take a look at www.bosszine.be, looks fine isn't it
sidebar no problems at all both in IE and FF

now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF

but is that so? try to capture the sidebar images from IE
it won't work

don't take notice at the flash infobox, that's a work in a progress

furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar)

there's clearly a rendering problem in IE with my background images in the css

how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-)

any suggestions are greatly appreciated

Css Float And Background Problems

Similar Tutorials

View Content

Thanks for viewing my post. Here is the site I am working with:

http://www.flattrackillustrated.com/dev/

I am having two problems:

1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point?

2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen?

Thanks!

Css Link And Background Problems

Similar Tutorials

View Content

I'm setting up my first CSS page and am having a problem I do not understand.

I set up my CSS page "test.css" like this:<STYLE TYPE="text/css">

BODY {background-color: #C4C4C4}
H1 {font-family: serif; font-style: italic; font-weight: 900; font-size: xx-large; color : #CC3300}
H2 {font-family: Fantasy; font-style: normal; font-weight: 700; font-size: large; color : #666699}
P {font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: x-small; color : #993366}
B {background-color: #FFFFFF; font-size: medium}

</STYLE>

If I copy this code directly into my <HEAD> section, it all works as expected, but when I replace this with a <LINK REL="test.css"> statement, the background and bold styles do not work while all the rest work the same.

Any ideas???

Joel

Background Image Problems

Similar Tutorials

View Content

I have a problem that I just cannot figure out.

Scenario
I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions.

Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide.

Now I can acheive this fine by placing the second image in the css style sheet for my page container.

But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window.

How can I stop this so that it is the actual lenght of the window with teh scroll.

A link to the page where if you scroll it cuts off the lilac colour:
http://www.acklamflooringservices.co.uk/development/index.html

The css code for my html/body and page div.
Code:

html { height:100% }

body 
{
	margin: 0px;
	background-color: #CCCCFF;
	background-image: url(inc/grnd.gif);
	background-repeat: repeat-x;
	height: 100%
}

#PageDiv {
	position:relative;
	width: 940px;
	margin:0px auto;
	background-image: url(inc/grnd2.gif);
	background-repeat: repeat-x;
	height: 100%
	}

Background Layout Problems In Ie6

Similar Tutorials

View Content

Hi everyone,
Please take a look at this site:
http://174.122.106.156/~johanna/php

The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered.

Can anyone tell me what's wrong and why?

Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code.

How do you guys find and fix IE6-specific layout issues?

Thanks.

Css, Link Background Image, Problems

Similar Tutorials

View Content

ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com

Ie Height Problems With Background-image

Similar Tutorials

View Content

Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated.

--Sean

HTML:
<p id="dot"></p>

CSS:
#dot {
position:relative;
left: 0px;
top: 0px;
width:200px;
height:6px;
background-image: url(dot.jpg);
background-repeat: repeat-x;
line-height:0pt;
margin: 0px;
}

Background Image Problems With Internet Exploder

Similar Tutorials

View Content

If infinite monkeys, with infinite time, can write Shakespeare, IE's CSS support = 5 monkeys, 15 minutes.

I have a div with a background image, repeat-y. Both IE and Firefox put the background image in place, both repeat correctly.

The problem is, IE puts the background image on top of the text!!!

Background images don't get z-indexes, do they? Nothing is absolutely positioned, either.

MPEDrummer

[edit]
On further experimentation, it seems if the div with the BG image is position: relative, then it screws up IE's idea of what a background image implies
[/edit]

Problems With Getting Background Images And Text To Sync

Similar Tutorials

View Content

I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated.

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>



<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img#bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
} 

#content {
  position: absolute;
  top:75;
  left:180px;
  z-index: 1;
  width: 800px;
  height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
 } 
} 
#sidebar {
  position: absolute;
  top:95;
  left:1000px;
  z-index: 1;
  width: 175px;
  height: 600px;
  background-color: #FFFFFF
  } 
} 
</style> 
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]--> 
<script language="JavaScript">
 function maximizeWin() {
	if (window.screen) {
	var aw = screen.availWidth;
	var ah = screen.availHeight;
	window.moveTo(0, 0);
	window.resizeTo(1024, 768);
   }
}
</script>
<body onload="javascript:maximizeWin()">

<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />

<div id="content"> 
test

</div> 
<div id="sidebar">Sidebar test</div> 

</body>
</html>

Iframe Background Colour And Image Problems

Similar Tutorials

View Content

Dear all,

I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments.

Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads.

If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background.

Is there any way around this?

Many thanks, Mark