CSS - Get Rid Of Internet Explorer Div Auto-gap/margin :(

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; }

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 ??

Good Evening Folks,

I would like to discuss Transparent PNG files and Internet Explorer.

I like to use 24-bit PNG files with transparency in my web work.
I like to overlay transparent backgrounds onto images with text
formatted over the top.

I like to use transparent PNG's as backgrounds for buttons, text and boxes
all over the place, I even like using them to mask out images.

I am very keen on using 24-Bit transparent PNG files in web design.

The only thing that really stops me or at least puts me off using them
is compatability problems with IE6 and below. IE7 doesn't seem to have
any problems with them.

I have found away to make 24-Bit transparent PNG files work in IE6,
It requires using a proprietary IE filter called AlphaImageLoader
I am still experimenting with it, but It seems to work OK utilising a few @import hacks.

But I can't make this filter work in IE5.5 or IE5, although Micro$oft's
doccumentation says I should be able to make it work in 5.5. Anyway I
could always use @import hacks to make IE5 browsers use GIF images
instead or maybe even JPGs.

Now to me this is a lot of mucking around, I accept that a lot of people still use IE6 but how many people are still using IE5.5 and IE5?
Does anyone have any other theories or ideas on how to go about this?

So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page.

It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though.

Can someone have a look at it for me ?

Thanks in advance ... :-)

http://www.EnglishTeachingKorea.com

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

Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated.

Site: www dot 21healthconsult dot com

CSS:

Code:

    /* Generic Selectors */ 

   div.wrapper {
   height: 100%;
   width: 950px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   }

    body { 

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 14px; 

    color: #000000;

    background-color: #FFFFFF; 

    } 

    p { 

    width: 100%; 
    text-align: left;

    }

    h1 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 18px; 

    font-weight: bold; 

    color: #000000; 

    } 

	
    h2 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 14px;

    font-weight: none; 

    color: #000000; 

    border-bottom: 1px solid #E0E0E0; 

    } 



 
    /**************** Pseudo classes ****************/ 

    :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: none; 

    } 


  li {

      list-style-type: disc; 

      line-height: 150%; 

      } 


    li :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    
	:visited { 

    color: #0066FF;

    text-decoration: none; 

    font-weight: none; 

    } 


    li :visited { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    :hover {

    color: #0066FF;

    padding-bottom: 5px; 

    font-weight: none;

    text-decoration: underline; 

    } 

    li :hover { 

    display: block; 

    color: rgb(0, 96, 255); 

    padding-bottom: 5px; 

    font-weight: bold; 

    border-bottom-width: 1px; 

    border-bottom-style: solid; 

    border-bottom-color: #C6EC8C; 

    } 


   :active { 

    color: #0066FF; 

    font-weight: none; 

}
   
   


    /************************* ID's *************************/ 


    #header {

    position: absolute;

    width: 900px;

    height: 50px;

    margin: 0;

    margin-top: 15px;

    padding: 0 0 50px 50px; /*top right bottom left*/

    text-align: left;

    }

    #t_navigation { 

    position: absolute;

    z-index: 10; 

    width: 900px; 

    height: 50px; 

    margin: 0; 

    margin-top: 48px; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    font-weight: normal; 

    font-size: 11;

    text-align: left;

    } 

    #search_frame {

    position: absolute;

    z-index: 10; 

    margin: 0; 

    margin-top: 15px; 

    padding: 0 0 0 300px; /*top right bottom left*/

    width: 600px;

    }

#search_box {
background-color: #F0F0F0; 
width: 600px;
height: 28px;
}

#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0; 
font-color: #000000;
}

#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}

    #l_navigation { 

    position: absolute;

    z-index: 10; 

    width: 210px; 

    height: 600px; 

    margin: 0; 

    margin-top: 80px; 

    padding: 0 0 50px 50px; /*top right bottom left*/

    border-right: 1px solid #E0E0E0; 

    font-weight: normal; 

    text-align: left;

    } 

   
    #centerDoc { 

    position: absolute; 

    z-index: 15; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    margin-top: 80px; 
    
    width: 900px;

    text-align: left;

    }

OK basically this css code is causing problems in IE.5 OS/9 on the mac

I was wondering if the Windows version caused the same problems when rendering these css buttons:


#elButton a {
color: white;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-align:center;
text-decoration: none;
border:3px outset #99ccff;
background-color: #3399ff;
display: block;
margin: 1px;
width: auto;
height: 2.5 em;
padding: 3px 5px 0;
}

#elButton a:hover {
background-color: #D43D2A;
color:#ffffff;
padding-left:5px;
border:3px inset #ffffff;
}

==============================================
html code:

<DIV id="elButton">
<DIV><A href="#" onclick="img(1)">Next</A></DIV>
<DIV><A href="#" onclick="img(-1)">Prev</A></DIV>
</DIV>

THANKS GUYS !!

Hi,

I would really appreciate some help sorting out an error that seems to only crop up on IE.

http://www.formulation.org.uk/redesign

Is fine on mac browsers (Safari/Camino/Firefox etc.). and fine on windows firefox.

the problem appears to be with content wrap. It covers a majority of the banner and navigation bar background. I did manage to fix this with fixed positioning - however this caused adverse effects to the footer.

Thanks in advance,

Tom

I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine.

Please check it he
ucables.com/search/iphone

css style used is he
ucables.com/account/styles/ucables.css

Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem

THank you in advance

Are there any good links that might show what type of styles IE will render on a list element? I'm having some trouble getting a navigation bar working properly. I'm only doing hovers on links, so the hover problem should not affect me, but I can't get any styles to apply other than "list-style." Even font size or color styles will not show up.

I have my website look exactly how I want it on Firefox and Safari. I checked it on IE 7 and it looks all out of wack! My design is a 3 column design with a column on the left that has a menu, the middle column has my content so far, and the right column is reserved for banners and links. The problem with IE is the left and right column meet and overlap in the middle of the page. How can I fix this without messing it up for the other browsers? my site is at www. highartculture .com. Thank you very much.

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

CAn anyone tell my why in firefox this code showes borders on all sides but in ie it only shows left and right borders?
Code:

<style type="text/css">	 
 		
 a:link
 {
 text-decoration:none;
 color:#000000;
 background:white;
 font-weight : bold;
 display:inline;
 border-color:#000000;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 
 }
 
 a:active
 {
 text-decoration:none;
 color:FFFFFF;
 background:background-color:#FFFFFF;
 font-weight:bold;
 display:inline;
 border-color:#FFFF00;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 }
 
 a:visited 
 {
 text-decoration:none;
 color:#0000FF;
 font-weight:bold;
 display:inline;
 border-color:#000000;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
  }
 
 a:hover
 {
 text-decoration:none;
 color:FFFFFF;
 font-weight:bold;
 background:background-color:#FFFFFF;
 display:inline;
 border-color:#FFFF00;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 	  
 }
 
 .navigationBorder
 {
 width:600px;
  }
 
 </style>
 <div class="navigationBorder">
 <a href="http://www.2dwebdesign.com/index.html">Home</a>
 
 <a href="http://www.2dwebdesign.com/design.html/">Design</a>
 
 <a href="http://www.2dwebdesign.com/build.html/">Build</a>
 
 <a href="http://www.2dwebdesign.com/publish.html/">Publish</a>
 
 <a href="http://www.2dwebdesign.com/promote.html/">Promote</a>
 </div>
 
 
 

I have a div #footer at the bottom of a page.

All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer:
http://www.jobsinkent.com/v5c/home/index.php

If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!!