small pixel placement web issue
el_reverend (134 points) | Fri, 2006-02-17 23:20Hi all,
I've got this little problem with placement of an element (Navigation bar background) on a small web project. I'm constructing a web site and am coloring the background of the element. Unfortunatley, it sticks out just about 1 pixel on both IE6/Win and Safari. So I decide to increase the left margin by 1px and that should do it. Well it does work in Safari, but in WIn/IE6 it has moved what looks like about 2 pixels! And showing the background.
From what I have read the margin should be the same on Win/Mac/IE/Firefox/etc. Only padding would affect the width of an element, right? Now, just for the hell of it I tried the star hack and the box-model hack to see if that would do it. But no response, as I thought. Now, why can't I get this element placed correctly? If you guys wan to have look, you can here: www.neolithmedia.com/client/dcc. The css is to be found here: www.neolithmedia.com/client/dcc/style/styles.css
I'd appreciate any input from you guys, as I am generally a print guy and could use some expertise. Please note that the images and colors are for testing purposes only.
Thanks in advance,
Sebastian
Commenting on this Forum topic is closed.
| Attachment | Size |
|---|---|
| safari_pxl.jpg | 7.22 KB |
| IE6_pxl.jpg | 3.54 KB |
A login is required to access those links.
So, here we go:
User: guest
Pass: 12guest34
And for those who want a quick look I added two pics. One for IE/6 and the other is Safari.
Thanks,
S.
Post Removed.
--designer wannabe--
I have run into this problem before, or should say run from this problem before...
What I would do:
Since it is fixed width and centered, the easiest way to do this is to make a background image that is the width of your container and contains the outer shadow on both sides. Make it repeat vertically and then place your divs on top of it.
I wish I could explain that easier... let me try:
The big issue is dealing with the outer shadow lining up. Fix this problem by not including that shadow in any of your images, and make it the body { } background with it repeating-y. It should only be 4-5px in height. Then make the rest of the elements fit into that area.
Hope that helps.
Try changing the width parameter under #nav in the navigation section of your CSS to width=699px you have it at 700 now, I did that and it seems to fix the problem for me.
You can always play around with the #navwrap margin a little (I think I had the 11px down to 10px when I was playing around as well)
But upon testing what fixed it, it seems width=699 instead of 700 did the trick in firefox and safari for me
It might seem like the header image is then out by 1 pixel but I think it's an optical illusion. I did a screen shot and blew it up in photoshop and things seem fine.
Good luck
Although crhoadhouse's suggestion did not yield satisfactory results in IE/Win, it got me to think about another idea. And after a bit of pushing the margins around I fixed the problem. Turns out IE has a bit of a float problem and doubles margins every so often. So thanks for the tips.