CSS - Explorer Brings Forward Background Div

Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+.

Here is the original code that IE works fine with.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}

The last item, the hover, is what is changed.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }

This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P

Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help....

Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected.

asiabackpacker.com/ai-resource/

But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg

In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result.

Is this a known bug that anyone's aware of, and is there any solution?

(btw, the forum rules made me strip the http's out of my urls....sorry bout that)

My website, currently http://12.214.26.185 does not render correctly in IE. It renders in Mozilla and Konqueror. I am posting my css file. Any advice would be greatly appreciated.

Hi,
I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox.

http://pangeaadvisors.org/default.asp


Code:

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing {	background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }

Hi i was wondering if i could get a hand with some css i have, its working properly on firefox but its not working with explorer ( i have the ie7 patch)...

Ive included the css i think its #header3b1 causing the problem...

Code:

@charset "UTF-8";
/* CSS Document */

/* CSS Document */

body {
background-color:#F5E9D9; margin:0; color:#4D4747;
}
img {
	border:none;
}
div, h2, a, img, p {
	margin:0; padding:0;
}
.spacer {
	line-height:0; font-size:0; clear:both;
}
#frame {
width:761px;
height:895px;
background-color:#F5E9D9;
margin:auto; color:#4D4747;
}

#container1 {
width:751px;
height:142px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:#F5E9D9; color:#4D4747;
}

#header1 {
width:185px;
height:142px;
background-color:#551001;
float:left; color:#4D4747;
}

#header2 {
width:280px;
height:102px;
float:left;
padding-left:24px;
padding-top:40px;
}

#header3 {
width:262px;
height:142px;
float:right;
}

#header3a {
width:240px;
height:43px;
background-color:#F5E9D9;
float:right;
padding-top:67px;
padding-right:22px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780;
}

.nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780; background-color:inherit;
font-weight:normal;
text-decoration:none;
}

.nav:hover{
	color:#6D2517; background-color:inherit;
}

#header3b {
width:262px;
height:32px;
}

#header3b1 {
float: left;
width:185px;
height:350px;
background-color:#551001;
display: block;
}

#header3b2 {
width:50px;
height:32px;
background-repeat:no-repeat;
background-position:top right;
}

#container2 {
width:751px;
height:195px;
padding-left:5px;
padding-right:5px;
}

#container2a {
width:489px;
height:195px;
float:left;
}

#container2b {
width:260px;
height:193px;
border:1px solid #F2DBBA;
float:right;
}

#container2b1 {
width:220px;
height:Auto;
margin:auto;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

.container2b2 {
width:200px;
height:22px;
padding-left:20px;
margin:auto;
}

.links {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#551001; background-color:inherit;
font-weight:bold;
text-decoration:none;
}

.links:hover {
	color:#C15740;background-color:inherit;
}

#container3 {
width:751px;
height:350px;
padding-left:5px;
padding-right:5px;
}

#container3a {
width:151px;
height:498px;
background-color:#551001;
float:left; color:#4D4747;
padding-left:34px;
}

.container3a1 {
width:121px;
height:24px;
border-top:1px solid #AA8880;
padding-left:22px;
padding-top:7px;
}

#container3b {
width:304px;
height:495px;
float:left;
margin:0 0 12px;
overflow: hidden;
}
#container3bb {
width:550px;
height:495px;
float:left;
margin:0 0 12px;
}

#container3b1 {
width:240px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4747;
font-weight:normal;
text-decoration:none;
margin:16px 32px 0px 32px;
text-align:justify;
line-height:14px; background-color:inherit;
}
#container3b1 h2 {
	height:33px; text-indent:-2000px;
	background:url(images/welcome.gif) 0 10px no-repeat;
}

.container3b2 {
width:240px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
font-weight:normal;
text-decoration:none;
margin:0px 0px 0px 32px;
text-align:right;
background-color:inherit;
}
.container3b2:hover {
color:#830202; background-color:inherit;
}

#container3b3 {
width:227px;
height:28px;
padding-left:13px;
padding-top:9px;
margin:0px 32px 0px 32px;
text-indent:-2000px;
}

#container3b4 {
width:238px;
height:202px;
margin:0px 32px 0px 32px;
background-repeat:no-repeat;
background-position:top right;
}

#container3b4a {
width:100px;
height:176px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:14px;
padding-left:10px;
padding-top:15px;
}

.brown {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#7E1A02; background-color:inherit;
	text-decoration:none;
	font-weight:normal;
}
.brown:hover {
color:#3B0B00; background-color:inherit;
text-decoration:underline;
}

#container3c {
width:262px;
height:490px;
float:left;
margin:0 0 12px;
}

.container3c1 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:7px;
padding-left:9px;
margin-top:22px;
}
.container3c1 h2 {
	background:url(images/specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
.container3c11 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:4px;
padding-left:9px;
margin-top:22px;
}
.container3c11 h2 {
	background:url(images/gallery_side.gif) 0 0 no-repeat; text-indent:-2000px;
}
.special {
	margin-top:55px;
}
.special h2 {
	background:url(images/some_specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
#container3c2 {
width:233px;
height:350px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(images/special.jpg);
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c22 {
width:233px;
height:170px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#F2DBBA;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c2a {
width:104px;
height:350px;
float:right;
padding-right:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
line-height:12px;
}

#container3c2a1 {
width:80px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
text-align:justify;
float:right;
padding-left:24px;
}

.container3c2a2 {
width:188px; color:#4D4747;
height:179px;
background-color:#F5E9D9;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
padding-left:25px;
padding-right:25px;
padding-top:22px;
}

.img {
width:99px;
height:86px;
float:left;
}
.img1 {
width:99px;
height:79px;
float:left;
}

.text {
width:80px;
height:78px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
line-height:12px;
float:right;
text-align:justify;
}

.dummy  {
clear:both;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
text-align:right;
}

a:hover {
color:#B25B46; background-color:inherit;
text-decoration:underline;
text-align:right;
}

.blank {
width:186px;
height:86px;

}

#container4 {
width:751px;
padding-left:5px;
padding-right:5px;
background-color:#F5E9D9; color:#4D4747;
margin:0px 0px 0 0px;
}

#container4a {
width:489px;
height:22px;
background-color:#E0E0E0; color:#4D4747;
float:left;
padding-top:10px;
}

#container4b {
width:262px;
height:22px;
background-color:#551001;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
padding-top:10px;
}
#container4 p {
	text-align:center; clear:both; padding:15px 0;
	font:12px/18px Arial, Helvetica, sans-serif;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
}

any ideas, thanks

Hey people.

i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he
http://tagsoup.com/cookbook/css/fixed/

here is the website so far, try opening it in both IE and another brouser too see the difference.
http://people.brunel.ac.uk/~dt08ajm/playgroundtest/

any ideas on how i can fix it? i can post the code if needed.

thanks in advance.

Hi All;

I generated this page :

www.lilahd.com/bevi

In webgen and cannot view it correctly on IE . Please view the page in IE and then in Firefox . Why does that happen .

i have a div on a page that i want to be centered. i am using in css as
Code:

margin: 0 auto

that works fine and is centered in firefox, but is left aligned in internet explorer.
how to accompalish it in iexplorer ??

I am learning css and as many people do, have used code given gratefully by someone else,

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;

	}
	
ul li {
	position: relative;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #000;
	margin-bottom: 0px;	
	}
	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	float: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #6290B2
	margin-bottom: 0px;
	}
	
ul li a {
	display: block;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #6290B2;
	background: #FFF;
	padding: 5px;
	border: 1px solid #ccc;
	margin-bottom: 0px;
	}
	
li:hover ul, li.over ul { 
	display: block;
	}

www.indigochilli.co.uk/eheating

now im sure it works fine(with no spaces between the boxes) for all using firefox or something similar, however I need it to work for exmplorer, which it doesnt, because it is a drop down(well sideways) menu, (which btw you cant see because your not logged in) the spaces mess up the functionability of it. Now I have messed around with heights, margins alsorts but explorer isnt cooprtating, is this a problem explorer often has?

Any idea why in IE the images and form elements in the middle row of this table are 50% opacity, but none of the text is?
The IE CSS: http://ezdispatch.org/css/ezd_ie.css
The other CSS: http://ezdispatch.org/css/ezd.css

As a note, The IE version of this page (see a larger version he http://ezdispatch.org/view_orders.php ) is already hacked beyond belief (ok, it's not THAT bad...but it's not cool either). Basically, to do the partially see-through background I used a .png with 50% alpha transparency (.grey & .important classes). The problem is that IE doesn't do PNG alpha transparency without their proprietary filters applied. Once I figured that out, it still didn't work. Turns out you can't attach the filtered png background to the tr...you must attach to the tds. So I did. Then I found out that the filtered background image stops propogation of clicks. You can fix the clicks that go to links by making the bg image 1x1...no problem. But, the table rows need to get clicks because they expand when clicked. To do that I added a clear 1x1 gif as the background image over the top of the filtered background image. For some reason that takes the click, and passes it through...even though there is still a filtered image.

The reason for wanting opacity for the whole row (as you would see viewing the bigger page in Firefox) is either for rows that are "done" or rows that are "deleted" (rather than the ugly line-through).

If you are confused...join the club. If you can find a solution, you are my hero.

Hi everyone! I'm pulling my hair out on this one. I must confess I'm a bit green when it comes to css, but I've been playing around with this page and was finally able to get it looking the way I want in IE. If you look at it in Firefox or Netscape, the container doesn't expand at the bottom, and the links just spill out. Any ideas on how I can get this to expand like it does in IE?

http://www.gotop100.com/test.html

Thanks!

Hi guys,

On the following page http://www.thekhans.me.uk/origami.php Internet Explorer only displays the image below the content on the right hand side;



This glitch is only apparent in IE, Firefox and Opera render the page correctly, like below:



Any work arounds?

Hello,

I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<style>

			html {

				min-width: 750px;
			}

			body {

				margin: 0;
				padding: 10px 0px;
				background: #ff0000;
			}

			div#wrap {

				width: 750px;
				margin: 0 auto 10px auto;
				padding: 0;
				text-align: left;
				background: #ffffff;
				border: 1px solid #d1c7ac;
			}

			div#innerwrap {

				width: 720px;
				margin: 0 15px;
				padding: 8px 0;
				border: 1px sold #ff0000;
			}

			#body {
				padding-top: 10px;

			}


			#left {

				display: inline;
				width:510px;
				height:510px;
			}

			#box {

				border: 1px solid #d1c7ac;
				float: left;
				color: #000000;
				font-size: 8pt;
				overflow: hidden;
				width:250px;
				height:220px;
			}

			#right {
				height:510px;
				text-align: center;
				border: 1px solid #d1c7ac;
			}

		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="innerwrap">
				<div id="body">
					<div id="left">
						<div id="box" class="top-left">
							Box 1.
						</div>
						<div id="box" class="top-right">
							Box 2
						</div>
						<div id="box" class="middle-left">
							Box 3
						</div>
						<div id="box" class="middle-left">
							Box 4
						</div>
					</div>
					<div id="right">
						This is the right text
					</div>
					<br>
					last line
				</div>
			</div>
		</div>
	</body>
</html>

Is there maybe a hack I can do to internet explorer so that this element will be solved?

or my css is completly wrong, and I need to change it?

Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css.

thanks for any sugestions,

regards,
sim085

Let me guide you to a page I just wrote on this subject. http://www.freewebs.com/desertowl/textblink