CSS problems

it seems as though in IE the #top and #menu are 3px too small for the width of your container. adding up your numbers I wonder if the problem lays there.

your imgs are 168px and 582px, with border of 1px+1px, which equals 752px (your stated width was only 750px)...

furthermore, I just noticed in your css you repeat your max-width twice......

#content 
{ 
	margin-left: 168px; 
	max-width: 36em; <===========first time 
	background-color: #FFFFFF; 
	padding-top: 2.7em; 
	padding-right: 1em; 
	padding-bottom: 1em; 
	padding-left: 1.8em; 
	max-width: 46.5em; <===========second time 
	min-height: 418px; 
	margin-top: 0px; 
	margin-right: 0px; 
	margin-bottom: 0px; 
	color: #000000; 
}

also you could do a lot of this in short hand, such as:

padding: 2.7em 1em 1em 1.8em;

there's a helpful article in the HOW TO section on shorthand.

sorry, I know I haven't specifically answered your question, but hopefully it's something to be thinking about until either you solve it or someone else can provide something more useful.

good luck!

larmyia

hi larmyia

thanks so much for pointing those things out to me.

I have been looking at this site for the last 2 weeks and are starting to go a little blind.

As you can probably tell I'm very new to CSS, I definately will read more about shorthand

I made adjustments to the #container, made it 747px, it fixed the problem although I still don't understand why I had to subtract 3px

You are being very helpful and I really aprreciate you taking the time to reply!

still having problems with my CSS

I can't seem to balance my layout

Could someone else help me out here!

We are so close

what do you mean by balance your layout?? can you be more explicit?

looking on ie there still seems to be a prob with the blue strip. if no one else pops up will have a look at it later. got to feed my daughter now.

larmyia

Hi

Are you aware of the IE bug that adds a 3px right margin to floated divs?

You must feed IE a negative -3px right margin to stop this.

myfloateddiv{
foo:bar;
}
* html myfloateddiv{
margin-right:-3px;
}

With the * html start, only IE sees this.

Worth a try.

Trevor

any idea why it would only affect one float??

larmyia

Hi

It only hurts where it pushes up against another div to the right, or a fixed edge of a div. Often, there is 3px of room, so no hassle. If you ever get a floated div that sits to the right of another and in IE it jumps down, suspect this bug. Similarly, fit one div inside another of the same width, and the floated forces the outer one to expand outwards.

Trevor

oh I see Trevor. thanks very much

larmyia

Hi Trevor

Thanks for reporting the IE bug

How do I implement this fix into my CSS?

as Trevor said......

myfloateddiv{
foo:bar;
}
* html myfloateddiv{
margin-right:-3px;
}

With the * html start, only IE sees this.

still no fix guys

I tried shorthanding the code and tried all the possibilities but the problem does not want to go away

* html #leftnav{margin-right:-3px}
* html #container{margin-right:-3px}
* html .floatleft{margin-right:-3px}
* html .floatright{margin-right:-3px}]
* html .floatrightmenu{margin-right:-3px}
* html .floatrightmenu2{margin-right:-3px}
* html .floatright2{margin-right:-3px}
* html .floatright3{margin-right:-3px}
* html .floattop{margin-right:-3px}
* html .floattop2{margin-right:-3px}
* html .hr{margin-right:-3px}
* html .hr2{margin-right:-3px}
* html hr{margin-right:-3px}
* html #content {margin-left:168px;height:auto}

I may be getting the wrong end of the stick but don't you just need to apply it to #top......???

larmyia

hi larmyia

I fixed the problem I was having with my CSS with a little help:

The correct code is:

<!--[if  lte IE 6]>
<style type="text/css">
#container {overflow-x: hidden;}
* html #leftnav{margin-right:-3px}
</style>
<![endif]-->

Thank you for trying to help me!

ok. guess you haven't uploaded it yet.

glad to hear it's sorted

larmyia

I ended changing the file name

It's http://www.employsa.com.au/latestnews.html

THANKS SO MUCH FOR THE HELP!!!