CSS - Left-margin Doubles In Ie6 - Baffled!

Hey there
I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact.

This is happening to my "boxL" div also (but only 1px more to the left than expected)

CSS:
Code:

.bigBox {background-color:#eeeeee; width:800px; clear:both;}

.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}

.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}

HTML:
Code:

<table class="bigBox" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top">

<div class="leftCol">
<div class="boxL">Content Goes Here...</div>
</div>

<div class="rightCol">
<div class="boxR">Content Goes Here...</div>
</div>

</td></tr>
</table>

Pictures of problem:
FF:


IE6:

The 2 blue boxes are "boxL" and boxR"
The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs

See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this?


Thanks heaps

Can't figure out why. I validated with W3 and everything was fine. I want p. leftmargin to be left indented 332px. Its just a single column site, should be easy......

This is the CSS

Code:

p. leftmargin {
margin-left: 332px;
}

#content {
text-align:left;
float:right;
width: 713px;
padding: 0px 17px 20px 30px;
background-color: #B11626;
height: 1100px;
}

this is the HTML

Code:

<div id='content'>

	<p class="leftmargin">
	<h2>
	COMING SOON
	</h2>
	</p>

</div>

page can also be found he

http://www.kdpatton.com/cosmopolis/program.htm

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

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?

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.]

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

( sorry for waste of moderators time )

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.

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


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

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

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?

I have seen sites that have their content centred, but when you make the browser window smaller, their left margin gets lost. When the right hand edge of the browser window touches the right edge of the content I would like the left margin to reduce proportionally until it's all gone.

I know auto margins will do something like this, but when I tried that my content continually moved as the window is resized. I only want the left margin to reduce when the window is too small for the content.

I have looked at the sites that work like this but generally they are very complicated and as a beginner I cannot isolate which bit allows this to happen.

I have a small test page below. What would I need to add/change to make my left margin get lost when the window gets smaller.
I have a link to the same code so you can see how it looks in the browser. http://www.cv2.co.uk/margins.html

I have kept the CSS in the main file just to keep it simple.

Thanks


Code:

<html>
<head>
<style>
	#main {
		background:red;
		width:500px;
		margin-left:200px;
	}
</style>
<body>
<div id="main">This is content</div>
</body>
</head>
</html>

I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right??

Code:

  MARGIN: 0px auto;

Thanks,
FletchSOD

I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed.

Here's the deal:
On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be.

I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help.

I'm trying to do this without having to absolutely position everything.

Here's the site:
www-dot-myportlandtours-dot-com

here's the css:
www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css

Anybody have insight into this?