DLU said:
That is one of the things I am trying to correct. Apparently I have to
get all three columns to add up to 100%.
There is no "apparently" about it. If you understood the box model, you
would know that, and how to avoid such problems.
I get that you're trying to learn, but you've really got to get the
fundamentals down first. Without that, you'll never get past the
problems you're having now. You'll just keep making things worse.
The problem I have at the
moment is the space just above the H2s. it extends past the area and
the right column sits on top of it causing the header to be the highth
of that column above the two main content boxes.
? Are you talking about the empty space between the bottom of the
masthead and the top of the h2? That area does not extend any farther
right than it did before. It is bound by the same containing div.main as
the 2 content columns. Whatever you perceive to be the issue is probably
not it at all.
BTW, I see no real difference between IE6 and other browsers. The layout
looks to be equally "off" in all.
It is the .wrapper that is causing the problem with IE6.
No, removing the border on .wrapper caused problems. I'll try to explain...
Before:
..wrapper { <-- container for the 3 cols below the masthead
margin: 0;
padding: 0;
border-width: 0 180px 0 0;
border-color: #CCC;
border-style: solid;
}
..main { <-- container for the 2 content cols
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
}
Now:
..wrapper {
margin: 0;
padding: 0;
border-width: 0 0 0 0; <-- right border gone
border-color: #CCC;
border-style: solid;
}
..main {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%; <-- same as before
}
The .wrapper div has no explicit width and defaults to auto, which in
this case is 100% of the available viewport width. The previous styling
with the border made the calculated div width (refer to the box model)
100% *minus* 180px
The right column was subsequently positioned with a margin-right:-180px
that put it on top of that 180px right border.
Within .wrapper there is another div container for the 2-column content
area: .main
Its width is 100% of the available space in .wrapper. After you removed
the border, this became 100% of the viewport width, leaving no place for
the right column to go except off the right side of the screen.
Does any of that make sense? If not, what specifically don't you understand?
Now I have
suggested that people stop using IE6
Good luck with that. It's not really important, anyway, because undoing
the problems you brought on yourself will clear up the IE6 issues, too.
yes I did position the right column to far to the right, I did so in
order to see where the block was coming from as I could not discern it
from the CSS.
You will find these things *way* easier using any of the Firefox tools I
mentioned. Firebug and the DOM Inspector both outline elements for you,
plus you can learn a lot just by following the DOM tree and seeing how
elements are nested.
Believe me when I say I have been reading just about
everething I can find on this.
But you either aren't comprehending, or not retaining what you do learn.
I don't know why that is, but it is your biggest obstacle at the moment.
Actually having the gray box extend to the bottom of the page is not
necessary,and the same effect can be achieved by extending the .rightbar
By "extending" do you mean adding the inline style of height:1593px?
This shows just how little you do know. The number you chose only
"works" when the conditions are the exact same as when you chose it. By
that I mean browser viewport size, font size, and any other variables
that affect the physical page dimensions. You might as well have picked
3000, or 1000, and had a chance of being "right" under some specific
conditions. Setting height like that is an ugly, newbie hack and is the
wrong way to go about it.
Well I was asking and got hammered for it.
You aren't asking the right questions, I think, or it appears that you
aren't even trying to learn from the references given you, even if you
really are. The latter is perceived as laziness on your part and does
not endear you to the regulars here. So you get hammered.
I have them but it still does not give me the information I need.
I loaded your page in Firefox/Firebug and easily found where all the
excess H2 spacing comes from. You've got a bogus inline style
height:23px for starters. Add to that a bogus <br/>, plus 1em top and
bottom padding, plus default margins added to the <p> element and you've
got a big heap of space with nothing in it. Everything you'd want to
know about the right column is there, too.
AND GET RID OF ALL YOUR INLINE STYLES!!! They only make maintenance a
PITA and debugging an even bigger PITA.
The working copy I am using has been validated, I keep it up to date.
I found three minor errors such as a misplaced </a>, an unclosed <li>,
Does that mean you are working off a different version than the one you
and a line that the program put in that identified a pic as being a
thumbnail.
I don't know what that means. What program?
None of them affected the operation of the code.
How can you say that for certain when you admit you don't know what the
code is doing? Fix the errors and post the corrected page.
