6 replies [Last post]
Rynert
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

I can't figure out (despite reading more than one 'explanation') how to resolve the 3 pixel jog issue.

www.oakleybarn.co.uk

Any pointers would be most welcome.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 pixel jog - driving me nuts!

Haven't looked into this deeply (I don't have IE here at home), but did you try this:?

* html #left {margin-right: -3px;}

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

3 pixel jog - driving me nuts!

Did you read here?

http://www.positioniseverything.net/explorer/threepxtest.html

Something roughly like this should work

#left {
  float: left;
  width: 150px;
  }
 
content {
  margin-left: 160px;
  }
 
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #left {
  margin-right: 10px;
  }
 
* html content {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

Rynert
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 pixel jog - driving me nuts!

Hi, yes and yes. Which is why it is driving me nuts. I must be missing something obvious (or it may just be a lackof understanding!)

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

3 pixel jog - driving me nuts!

Err something like this is much more LIKELY to work - missed off the #'s on the content

Replace your current #left and # content with this and it fixes it for me here locally

#left {
	float: left;
	width: 150px;
	padding-left: 5px;
	padding-right: 5px;	
	padding-top: 8px;
  }
 
#content {
	margin-left: 160px;
	padding-right:15px;
	padding-left: 15px;
	text-align: 	justify;
	padding-top: 14px;
	font-size: 	100%;
	border-left:1px solid #9ED8A1;
	border-bottom: 1px solid #FFFFFF;

  }
 
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #left {
  margin-right: 10px;
  }
 
* html #content {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 14 years 6 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

3 pixel jog - driving me nuts!

briski,

This still doesn't seem to address the three extra pixels. Yes...it fixes the gap in the content div, but it still adds 3px between the left and content divs.

I'm having a MAJOR issue with this right now and I'm going to address this in another thread (b/c of another problem involved with it.)

Am I off base here?

Rynert
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 pixel jog - driving me nuts!

Thanks briski Laughing out loud

That works now, but more importantly it make sense!

I was struggling to marry an adbstract example to my code, by you putting it together it all becomes clear Smile