5 replies [Last post]
JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Well, I'm redesigning my site and encountered this little inconvenience when viewing in IE. Use the attached image for reference. The page consists of 2 columns - one sidebar and one main content. The sidebar is defined by the following:

.sidebar {
   left: 10px;
   width: 140px;
   float: left;
}
The main content is defined with:
.content-container {
   background: transparent;
   border: 0px;
   padding: 0px;
   margin: 0px;
   margin-left: 150px;
}

.content {
   display: block;
   background: #FFFFFF;
   border: 1px dotted #708090; 
   padding: 10px 12px;
   text-align: justify;
}

The problem is that there's an additional of 3px padding on the content areas in which there is a sidebar content in its row (See the circled item in the attached image). BTW, this problem occurs only in IE. It is presented as it should be in Mozilla / MozFB. I have tried using position: absolute; for the sidebar, but the problem is that there is a footer that is overlapped when the content area is of lesser height than the sidebar.

I have decided to use float: left for the sidebar and this additional text padding is the problem. If I were to use position: absolute, how could I limit the footer at the end of the sidebar when the content area is of lesser height?

Any ideas on these matters would be very much appreciated. Thanx.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Float & Adjacent text in IE

Hi JaGGeR,
Have you tried floating the content-container left;.
It should help give a more consistent look.
or you could try my new CSS layout generator which is still being tested but so far give very good results.

Hope that helps

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 9 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Float & Adjacent text in IE

Hi,

Ie adds 3px padding to the content surrounding a float. It causes a lot of problems and is called the 3 pixel jog. The only way to avoid it is to specify a width on the content if at all possible.

Read about it here:

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

Also (its probably just a typing error) but it should be margin-left not left in this style:

.sidebar { 
   left: 10px; 
   width: 140px; 
   float: left; 
}

Paul

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Float & Adjacent text in IE

Tony wrote:
Hi JaGGeR,
Have you tried floating the content-container left;.
It should help give a more consistent look.

or you could try my new CSS layout generator which is still being tested but so far give very good results.

Hope that helpsAlready tried making the content-container float left and it would have been a solution if the width adjusts to the remaining display area. However, the width adjusts according to the content. If it's only 20 characters wide, the width stays at that. I tried specifying a width of 100% but it stretches to the whole width of the display. If only I could specify 100% - 140px as the width.

BTW, I tried your layout generator and it's quite good. Even made it my basis for adjusting my own CSS rules, but still I have problems as stated in the preceding paragraph.

I guess I would just have to live with this 3px jog. And I also observed this 3px IE jog when most of the texts in a certain container are italicized (still in IE only). IE really needs to make some adjustments.

Pob wrote:
Hi,

Ie adds 3px padding to the content surrounding a float. It causes a lot of problems and is called the 3 pixel jog. The only way to avoid it is to specify a width on the content if at all possible.

Read about it here:

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

Also (its probably just a typing error) but it should be margin-left not left in this style: Thanx for the info, Pob. I'm a bit relieved that it's a common problem observed in IE. I thought I was doing something wrong.

And about the left: 10px style, it's a remnant of using position: absolute. But it's still valid, it all depends on their point of reference (I think Wink). Left is not affected by any rule of which it is contained. It always counts from the leftmost part of the display area, while margin-left counts from effective leftmost part of the container. Well, this is based from my observations, and I could be wrong. Smile

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 9 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Float & Adjacent text in IE

Hi,

Quote:

Left is not affected by any rule of which it is contained. It always counts from the leftmost part of the display area, while margin-left counts from effective leftmost part of the container. Well, this is based from my observations, and I could be wrong

Yes you are wrong Smile

According to specs and quoting from Eric Meyers Programmers reference "left defines an offset of the left edge of an absolutely positioned element from the left edge of its positioned context, or the horizontal distance which a relatively placed element will be displaced."

It does not apply to floats at all.

Margin-left though, will apply to floats (and also to positioned elements).

Applying left to a float has no impact on the float and is therefore wasted space. If you add position relative to a float (needed in some cases to make floats display in buggy IE when the parent has also been positioned) while also including a value for left, then the float will no longer be a float but will be relatively positioned and the float will be lost.

I hope that all makes sense Smile

Paul

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Float & Adjacent text in IE

Ooohhhh I see.. :oops: Thanx for the clarification, Pob... Nevertheless, I decided to live with that 3px IE jog and proceeded with the development of my site. It's already uploaded and posted in the site check forums under this [url=http://www.csscreator.com/css-node/584

Check it out if you have the time. Many thanx again. Laughing out loud