6 replies [Last post]
sluxor
Offline
newbie
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Hi,

I apologies for firing one question after another and I hope
you folks do not presume I'm taking this forum as granted. I am
encountering a strange trivial issue in IE -- simply put it, I
have a plain two column design which has a "container" box
that consists of "leftnav" and the "content" column.

I have a fixed left margin, accordingly set for each column and
what I have noticed in IE only that when a text as added to the
leftnav, the context of the content column is shifted very
little to the right. The shift is minimal and wouldn't exceed
a few px; that is, it would not force the shift to go on as
the text on the leftnav is increased. The following is my css:

body { margin: 0 auto; padding: 0; font: 85%/1.3 arial, helvetica, sans-serif; color: #000; text-align: center; background-color: #ddd; }

#container {
margin: 0 auto;
width: 1000px;
text-align: left;
background-color: #fff;
border: 1px solid #000;
border-top: 0px none #000;
}

#leftnav {
float: left;
width: 160px; /* leftnav takes up about 160px */
text-align: left;
margin-left: 7px;
padding-top: 1.9em;
background-color: #fff;
}

#leftnav p {
margin-top: 0;
}

.module-header
{
border: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: larger;
line-height: normal;
font-weight: bold;
letter-spacing: .3em;
text-align: left;
}

.content {
padding-top: 2em;
padding-left: 20px;
/* content takes up whatever it's left (1000 - 185)px */
margin: 0 2em 0 185px;
border-left: 3px dotted #C5C877;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its probably the notorious,

Its probably the notorious, "3 pixel jog". Google on that. Look out for Position Is Everything, The Holly Hack. Also check the "On Having Layout" link in my signature (though you may find that too detailed at this stage).

sluxor
Offline
newbie
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Thank you Chris,I had no

Thank you Chris,

I had no idea that there is even a name associated with this bug.
Unfortunately, for some reason I cannot quite get the solution to
work with my code. According to serveral sources, the following
hack should suffice (obviously it is tailored to my style definition):



/* Hide from IE5-mac \*/

* html#leftnav {
margin-right: 7px;
}

* html.content {
height: 1%;
margin-left: 0;
}

But the strange thing is that the 3-pixel-bug disappears from the "first" usage of .content class in the html file but all other div.content usage still display their content 3px more to the left of the "first" div.content. For example, in sample below, the content in Title One, they all get displayed as expected (with NO 3-pixel-bug) but the subsequence use of div.content would result in 3px shift to the "left" with respect to the first content box. Obviously, whatever correction is being done to the first .content box is not being followed through the rest of the page. But why?



Title One


Wednesday, 1 January 2007 - 12:55 AM

Some other stuff..






Title Two


Sunday, 6 January 2007 - 5:34 AM



some context....




Any pointers on this one? I am probably over seeing something here.

Thank You

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Your style selectors aren't

Your style selectors aren't correct. You are missing a space between html and what follows it.

html#leftnav means the html element with and id of leftnav.
html.content means the html element with a class of content.

html #leftnav means the element with an id of leftnav that is descended from html.

sluxor
Offline
newbie
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

I think to some extent I got

I think to some extent I got it working. What I was initially causing
the problem was that I had a #leftnav with left:float and bunch of
contents being shifted statically to the right. What I hadn't realized
that the hacks I had tried only apply to a single container to the
floating box (leftnav in this case). So rather having that, I simply
wrapped all the contents in another class and have the hack apply
to that one class. Here's how:

.contentwrapper { padding-top: 1em; padding-left: 20px; margin: 0 2em 0 185px; height: 1%; border-left: 3px dotted #C5C877; } .content { padding-top: 1em; padding-left: 0px;

}

My html code was modified to reflect this change:



bunch of link stuff

Title One

Wednesday, 1 January 2007 - 12:55 AM

Some other stuff..

Title Two

Sunday, 6 January 2007 - 5:34 AM

some context....




The only thing that I couldn't get to work was the IE5-mac
hiding trick or the Star HTML Bug so I had to dump the height: 1%;
in my contentwrapper directly. Some of the links I found helpful:


http://positioniseverything.net/explorer/threepxtest.html
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
http://www.zoffix.com/css/ie/threepxbug.shtml

sluxor
Offline
newbie
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Thank you Chris, I had

Thank you Chris,

I had noticed that minor error a while back (after I posted my
code) and had it corrected but the problem was persisting. In my
previous comment I managed to fix the problem. Although a final
issue remains which I mentioned it in my above post. Thank you
again.

sluxor
Offline
newbie
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Alright, pheww! Got it this

Alright, pheww! Got it this time. Smile



#leftnav {
float: left;
width: 160px;
text-align: left;
margin-left: 6px;
padding-top: 1.9em;
background-color: #fff;
}

.contentwrapper {
padding-top: 1em;
padding-left: 20px;
margin: 0 2em 0 185px;
border-left: 3px dotted #C5C877;
}
.content {
padding-top: 1em;
padding-left: 0px;

}

/* Hide from IE5-mac. Only IE-win sees this. \*/

* html #leftnav {
margin-right: 7px;
}

* html .contentwrapper {
height: 1%;
margin-left: 0;
}

/* End hide from IE5/mac */


Hopefully this may help someone else.