CSS列重叠到处都是IE和Firefox 3

I have a problem with my website and how it appears in some browsers:

我的网站有问题以及它在某些浏览器中的显示方式:

http://www.karentiede.com

In Firefox 2.0 and many other browsers, the "content" column overflows to the left and appears on top of the decorative border, making some of the content unreadable.

在Firefox 2.0和许多其他浏览器中,“内容”列溢出到左侧并出现在装饰边框的顶部,使得某些内容不可读。

One Q&A in here suggested that making all the pages HTML 4.01 Strict DOCTYPE might help make all browsers work the same, but that question was the reverse-worked in Firefox and didn't work in IE. Is there another/different fix I should try?

这里的一个问答表明,制作所有页面HTML 4.01 Strict DOCTYPE可能有助于使所有浏览器的工作方式相同,但这个问题在Firefox中反向工作并且在IE中不起作用。我应该尝试另外/不同的修复吗?

From the CSS:

来自CSS:

.column2 {
    float: right;
width: 80%;
}

From any of the pages that act up:

从任何行动的页面:

<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">

When I check the site in http://www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer.

当我在http://www.browsershots.org中检查网站时,在许多浏览器的初始显示中它看起来很糟糕。我有一三个(可能是Firefox)读者告诉我他们看不到文本,我怀疑他们可能是比我作为CSS编写者更复杂的用户。

4 个解决方案

#1

I took a look at the page and the problem only appears when you re-size the page.

我看了一下页面,只有在重新调整页面大小时才会出现问题。

The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.

问题是你的正确div为80%,所以当屏幕变小并且比率发生变化时,80%会重叠到你的左背景中。

Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.

请查看http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/,了解如何设置“静态流体”布局。

#2

The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.

之所以发生这种情况,是因为图像(左侧浮动)不是整个页面的高度。因此,当页面不够宽以容纳图像和文本彼此相邻时,文本会中断到下一个可用的空格。

Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:

尝试将两个元素浮动到左侧,并将等于“装饰”列宽度的左边距应用于column2:

.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }

You'll need a clearing div below both elements:

你需要在两个元素下面都有一个清算div:

<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>

#3

The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):

正如savageguy所指出的,问题肯定是比率。如果您想要的是具有可变宽度右(主)列的固定宽度左列,那么您可以使用它(未经测试但应该工作):

#col1_schedule_toc {
    width: 175px;
    float: left;
}

.column2 {
    float: right;
    width: 100%;
}

EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.

编辑:顺便说一句,我注意到(至少在我看到的页面上)你还没有在打开右边之前关闭左栏,所以从技术上讲,右栏位于左侧,这将导致我建议修复的问题。因此,您还需要移动col 1的结束div,使其高于col 2的开始div。

EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:

编辑2:另外,正如计划B所指出的,你还需要在两个元素下面都有一个清除div来防止父(容器)div崩溃:

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}

#4

In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.

除了savageguy的正确建议之外,您在页面中的图像(您的图片等)在左侧是固定宽度。这就是为什么当浏览器重新调整大小时,80%突然变得过宽。

On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.

在第2列,设置图像宽度的左边距+所需的分隔量(例如,160应该可以工作,但你可以使用它),然后使column2的宽度100%(剩余宽度) )应该防止你的重叠。

[Edit: Plan B also offers a very robust solution.)

[编辑:Plan B也提供了非常强大的解决方案。)

#1