CSS - Problems In Ie6 With Margin-left

Greetings!
Please, take a look at http://147.32.113.143/biotest/Sourc...SectionId=10000.
Almost everything is ok, except one thing: in left menu (TOC), margin-left is not applied on <a> elements in <li> (menu items - red bordered) in IE 6.0. In FF, everything is OK, but what's much more interesting, in IE 5.5 it works too. So the only problematic browser stays IE 6.0.
Could anybody tell me please why this happens? So far, margin-rules worked well for me, even in IE.

P.S.: The discussed rule is in Web_Toc.css

Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me...

I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem....

check it out..
http://centralfloridacomputerrepair.com/test.php

the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page.

the css is here
http://centralfloridacomputerrepair.com/style.css
(what you are looking at is div#sidetext)

and the css/xhtml validates
http://validator.w3.org/check?verbo...ir.com/test.php
http://jigsaw.w3.org/css-validator/...ir.com/test.php

I just can't figure it out...
I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either...
it gets to the right place horizontally.. but not vertically...

I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way.

any ideas?

edit: I've been here a whole year... and this is my first post. HA.

No worries, made an obvious error.
Please delete this =)

( sorry for waste of moderators time )

The following script has been validated and is working fine (not in IE/Win):

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

a { text-decoration: none; }
a:link { color: #0000ff; }
a:visited { color: #33cc00; }
t{line-height:36px;}

#wrap {
width:613px;
left:50%;
margin-left:-336px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:650px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size:13px;
text-align:left;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:66% 540px;
background-image:url(smalljester.jpg);
height:750px;
overflow:auto;
z-index:2;
}

I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.]

You can view the site I'm working on here and the style sheet here . The #left and #right divs inside the container are set up so that a 15px margin should exist all the way around the outside as well as between the two divs. This is the white space that you can see.

From what I can tell, it displays correctly in Firefox, Opera and IE7, but not in IE6 or below. In IE6, which I test in using VirtualPC, the left-margin of the #left div seems to double and become 30px wide. This pushes the #right div all the way out to the edge of the container, though you can't see this happening because the background of #right is transparent.

I have spent the last hour looking at my css trying to figure out why IE6 is doubling the width of this margin, but I'm completely baffled. I'm convinced there's something obvious I'm missing because I'm a bit of a css amateur. Can anyone help?

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear)

The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left.

I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem?

I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px.

This is my input field code on my form:
Code:

<input type="text" class="field" name="title" size="45" maxlength="200"/>

On my stylesheets I placed this:
Code:

input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}

Doesn't work??

I can't figure out why.

Hi to all

I am pasting here the code where i have problem

[ code ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;


}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>

[/code]
Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

Hi to all

I am pasting here the code where i have problem


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;


}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>


Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

Hello,

I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll.

I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail.

I am stuck. Any ideas on how to negate the pussing of a margin?

Hello,

I don't understand how to fix this right margin problem in IE 6. Of course, the code renders correctly in FF Mac/Win but I can't get the margin right to correctly display as 30px in IE 6. If you can help me out I would appreciate it.

Code:

#altnavcontainer
{
	margin: 68px 30px 0px 0px;
	padding: 0;
	width: 264;
	float: right;
	/*border: 1px solid red;*/
}


	<div id="altnavcontainer">
		<a href="info.php?pt=info" onmouseover="document.info.src=info_on.src" onmouseout="document.info.src=info_off.src"><img name="info" src="images/info_off.png" alt="Info Off" /></a>
		<a href="bio.php?pt=bio" onmouseover="document.bio.src=bio_on.src" onmouseout="document.bio.src=bio_off.src"><img name="bio" src="images/bio_off.png" alt="Bio Off" /></a>
		<a href="work.php?pt=work" onmouseover="document.work.src=work_on.src" onmouseout="document.work.src=work_off.src"><img name="work" src="images/work_off.png" alt="Work Off" /></a>
		<a href="index.php" onmouseover="document.home.src=home_on.src" onmouseout="document.home.src=home_off.src"><img name="home" src="images/home_off.png" alt="Home Off" /></a>
	</div>

Thanks,

Jason

yui.lastsong.net/projecthealth

I'm having problems getting the above page to show up correctly in IE6. My headers have a negative left margin and, for some reason, paragraphs below these headers seem also to be displaying this negative margin. It doesn't happen for all paragraphs, and I haven't been able to discern any pattern. The following page is an example of this: yui.lastsong.net/projecthealth/?page=team-staff

Additionally, this page is misaligned, despite using essentially the same coding from my other pages (with the exception of the content): yui.lastsong.net/projecthealth/?page=impact-families

Any ideas on how to fix this?

First things first, both my HTML and CSS validate.

I'm very VERY green with CSS, but because other people don't seem to think so I'm making a website.

My trouble is with IE. The website is perfect in Firefox. I have this div:
css Code:
Original - css Code div.main { background-color: white; margin-left: auto; margin-right: auto; width: 35em; border-width: .1em; border-color: #aa505f; border-style: solid; text-align: left; } .alignment { text-align: center }

  

  


   div.main {


   background-color: white;


   margin-left: auto;


   margin-right: auto;


   width: 35em;


   border-width: .1em;


   border-color: #aa505f;


   border-style: solid;


   text-align: left;


 }


 .alignment {


   text-align: center


 } 

And this address stuff:
CSS Code:
Original - CSS Code address { background-color: #FFFFFF; margin-right: 5em; width: 15em; border-width: .1em; border-color: #aa505f; border-style: solid; float: right; line-height: 1em }

  

 address {  


   background-color: #FFFFFF;


   margin-right: 5em;


   width: 15em;


   border-width: .1em;


   border-color: #aa505f;


   border-style: solid;


   float: right;


   line-height: 1em


 } 

HTML:
HTML Code:
Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html>

  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL">
<html>
<head>
<title>
Le Sac Magique
</title>
<link href="lsmcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<address>
Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a>
</address>
<div class="alignment">
<div class="main">
This is some text!
</div>
</div>
</body>
</html>

In Firefox, it shows as it should a centered box with a white background and maroon border and a right-aligned box of the same description besides its italics. However, in IE the box that should be centered is pushed to the left a bit. It is as if the box is aligned left and has a left margin.

I am aware that IE does not support margin:auto, but I have tried as you can see to fix it by using text-align:center and a parent div to no avail. Something tells me that my floated box is the source of this trouble, but I would not know where to start. Can anyone help me?

Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with.

Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px; 
}

body {
background: #FFF;
margin:0px;
padding:0px; 
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
} 
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px; 
} 
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left; 
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
} 
#productSlogan h3 span {
display:none;
} 
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}

#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}

#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>