15 replies [Last post]
pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Hey guys

I designing a website called www.employsa.com.au/news.html

I'm having a bit of trouble with my CSS.

The problem I'm having is my the header has a vertical blue strip at the right end....the #container is getting pushed out somewhere

This is not supposed to be there, somewhere in my design the <div> is being
pushed out

Anyone know how I can fix this?

It is only a problem in IE, any help would be so much appreciated!!

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

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!

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

still having problems with my CSS

I can't seem to balance my layout Sad

Could someone else help me out here!

We are so close

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS problems

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

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

any idea why it would only affect one float??

larmyia

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS problems

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

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

oh I see Trevor. thanks very much Smile

larmyia

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

Hi Trevor

Thanks for reporting the IE bug

How do I implement this fix into my CSS?

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

as Trevor said......

ClevaTreva wrote:
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.

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

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}

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

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

larmyia

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

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! Laughing out loud

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS problems

ok. guess you haven't uploaded it yet.

glad to hear it's sorted

larmyia

pauld_82
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

CSS problems

I ended changing the file name

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

THANKS SO MUCH FOR THE HELP!!! Laughing out loud