Forum Moderators: not2easy
I posted this in the HTML section, but tedster suggested I post it here.
Here is the code (I think).
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;
}
Thanks,
Craig
1. Your sidebar is floated.
2. Your page does not have a full and valid doctype [w3.org].
If this is the case, adding a doctype from the link above would sort out the problem in IE6, as it forces IE into standards mode where it uses the same box model that FF uses.
Post back wth more code and let us know whether the two assumptions above are true. If so, we can provide a more detailed explanation of what is happening and how to fix it.
cEM
Thanks for the replies -- I like your Socratic methodology.
Is this what you were looking for?
#sidebar {
width:220px;
float:right;
}
Now, I learned that the sidebar does float, as cEM stated.
Much farther down the page...
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
Regarding the doctype, here is what I have in my page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I had a few more questions, but a Google search using the www.webmasterworld.com and the search terms proved that my questions were asked and answered -- often many times over.
Thanks again,
Craig
b. Float and related <div>(s) coded in the wrong order. (The float would come first, followed by the main <div>.
With the doctype you posted, jibtrim, your IE6 browser should be functioning in standard mode, which means it's not a box model problem, but some other IE-specific issue. I think it DOES have to do with widths, as D_Blackwell suggested, based on this...
I see the sidebar momentarily, then it drops to a height just below the main text
In most cases, this would be because something adjacent to the float has been added in that is too wide to allow for both to sit within the same horizontal space. So the problem, most likely, is not in the FLOAT, but in the element which the float sits on top of.
It might be good for us to see the code for that float-adjacent element. For instance, if your layout looked like this...
html:<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>css:#container{}
#sidebar{float:right; width:200px;}
#content{margin-right:200px;}
....we would want to see the code for the #content div, as it is the element that the sidebar floats above (and sits next to, visually, on the page).
Based on what you've said so far, I suspect one of three things (although we can all see that I'm barely hitting the 50% mark on my assumptions today)...
(1) The sidebar, which is floated right, has a right margin on it somewhere in your code. This would trigger IE's Double Margin Float Bug, resulting in a sidebar too wide for the available space and causing the float to wrap.
(2) The element which sits adjacent to the float (#content in the example above) has a defined width. Defining the width on a non-floated, float-adjacent, block level element (superclafragalisticexiala-what?) causes problems in IE, as it incorrectly calculates that width out from the edge of the float, rather than from underneath the float, where normal, sane browsers do.
(3) A peice of content in either element (the float or it's adjacent non-floated sibling) which is wider than the element itself. In IE, this triggers an auto-enclosing behavior by which the element's calculated width is increased to accomodate the too-wide content. The increase in width reshuffles the calculations, and should it make things add up to more than 100% of the available space, float wrapping will ensue.
None of these things will occur in FF, so they all explain the discrepancy between browsers. Let us know if any of this fits the bill! And, of course, feel free to post the code. :)
cEM
Your #3 was the winner. I thought HTML, CSS, etc. was far too complicated to involve common sense until you suggested that something might be too wide to fit. Amazing. Well, I actually looked at my page and I had an element in the sidebar that hung out quite a bit farther to the right than the other elements (post roles, links, etc.). So, I eliminated it and everything now works just fine -- except I no longer have that information.
Again, since I have actually taken a few moments to look at the page, I notice that there certainly is a lot of white space on both right and left margins.
I looked for the code you suggested, but nothing looked familiar.
Thanks again
Craig
p.s. how are you guys replacing double-hung window sash cords?
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 6:16 pm (utc) on July 4, 2005]
p.s. how are you guys replacing double-hung window sash cords?
Lol. Don't get me started. I spent about two weeks last summer doing just that before finally giving up in disgust and having all the windows replaced with cheapo vinyl replacement windows. I can tell you HOW to replace those cords, but I simply can't convey in words the ridiculously insane amount of frustrating work involved.
Back on topic...
Your #3 was the winner.
Glad you got it figured out. Unfortunately, you've already implemented the only solution to this particular problem, i.e., not put too-wide content into a width dependent element. There is no known way to make IE's auto-enclosing behavior go away (actually, that's not entirely true, but the one way to do it is a highly limited application that also happens to be the trigger of an uncurable browser bug, so to all purposes, it can't be done), until IE starts honoring width as an immutable property, we have to step around it by watching our element and image widths.
I notice that there certainly is a lot of white space on both right and left margins.
If those left and right margins are equal, it's a safe bet that's just the result of centering. You mentioned Blogger in an earlier post. I've seen several Blogger sites before and most of them have a fixed width layout centered using auto margins. This is, in all likelihood, the cause of your wide margins.
An easy way to test is to resize your browser window. If the l/r margins shrink as you do, it's centering. If the l/r margins stay the same as the window resizes, it's something else.
cEM
Thanks again,
Craig
