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!!
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
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!
CSS problems
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
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
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
CSS problems
any idea why it would only affect one float??
larmyia
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
CSS problems
oh I see Trevor. thanks very much
larmyia
CSS problems
Hi Trevor
Thanks for reporting the IE bug
How do I implement this fix into my CSS?
CSS problems
as Trevor said......
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.
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}
CSS problems
I may be getting the wrong end of the stick but don't you just need to apply it to #top......???
larmyia
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!
CSS problems
ok. guess you haven't uploaded it yet.
glad to hear it's sorted
larmyia
CSS problems
I ended changing the file name
It's http://www.employsa.com.au/latestnews.html
THANKS SO MUCH FOR THE HELP!!!