I was hoping a few gurus could check out my page and suggest fixes for two obvious problems with it under IE6:
1- The top right image is usually one pixel to the left of where it should be (annoying but non-critical)
2- The content div (fixed width on the right) aligns with the right border of the viewport rather than the body when the viewport is narrow enough that the min-width is taking effect on the body.
Thanks for any suggestions/pointers.
I'm also open to critique on the design... I tried to deviate a little from the 'normal blog style' in a few different ways, so I'm curious how folks feel about it. I would have preferred some other colour than blue, but hey, it's the winter and blue is cool.
The site is unfinished, but it's operational.The reason the min-width doesn't seem to kick in for Internet Explorer is because it doesn't support that property. Now you could place a fixed width item on the page inside #wrapper. IE-Win will stretch a box's dimensions if the contents are too wide or tall. The width and height CSS properties in IE-Win act exactly like the min-width and min-height properties. The pitfall is that IE5-Mac doesn't react that way. It supports the width and height properties according to W3 spec, but doesn't support the min-width and min-height properties.
As for that one pixel image problem... not sure. Maybe IE-Win is calculating something one pixel too wide and stretching the box that contains it, or calculating the width one pixel too narrow. Shrinking and expanding the window by a little bit proved that the problem is precisely that. Because % widths are used, whole pixels must be rounded up to or down to.
Grab the bottom corner of the window and expand and contract the window. You'll see that gap appear, disappear, and reappear.Originally posted by toicontien
The reason the min-width doesn't seem to kick in for Internet Explorer is because it doesn't support that property. Now you could place a fixed width item on the page inside #wrapper. IE-Win will stretch a box's dimensions if the contents are too wide or tall. The width and height CSS properties in IE-Win act exactly like the min-width and min-height properties. The pitfall is that IE5-Mac doesn't react that way. It supports the width and height properties according to W3 spec, but doesn't support the min-width and min-height properties.
But the background image is still placed correctly as if the body is being limited in shrinkage...
Main header aside, the structure of the body is as follows
<wrapper>
<content -- float:right, width:fixed>
</content>
<leftpane -- margin-right: =width of content>
</leftcontent>
</wrapper>
But even when I put like a <div style="width: 770px"></div> inside the wrapper somewhere, it doesn't seem to affect the placement of the float... The wrapper definitely expands, verified with a border, but the stuff inside behaves as if it hadn't done anything.
1- The top right image is usually one pixel to the left of where it should be (annoying but non-critical)
2- The content div (fixed width on the right) aligns with the right border of the viewport rather than the body when the viewport is narrow enough that the min-width is taking effect on the body.
Thanks for any suggestions/pointers.
I'm also open to critique on the design... I tried to deviate a little from the 'normal blog style' in a few different ways, so I'm curious how folks feel about it. I would have preferred some other colour than blue, but hey, it's the winter and blue is cool.
The site is unfinished, but it's operational.The reason the min-width doesn't seem to kick in for Internet Explorer is because it doesn't support that property. Now you could place a fixed width item on the page inside #wrapper. IE-Win will stretch a box's dimensions if the contents are too wide or tall. The width and height CSS properties in IE-Win act exactly like the min-width and min-height properties. The pitfall is that IE5-Mac doesn't react that way. It supports the width and height properties according to W3 spec, but doesn't support the min-width and min-height properties.
As for that one pixel image problem... not sure. Maybe IE-Win is calculating something one pixel too wide and stretching the box that contains it, or calculating the width one pixel too narrow. Shrinking and expanding the window by a little bit proved that the problem is precisely that. Because % widths are used, whole pixels must be rounded up to or down to.
Grab the bottom corner of the window and expand and contract the window. You'll see that gap appear, disappear, and reappear.Originally posted by toicontien
The reason the min-width doesn't seem to kick in for Internet Explorer is because it doesn't support that property. Now you could place a fixed width item on the page inside #wrapper. IE-Win will stretch a box's dimensions if the contents are too wide or tall. The width and height CSS properties in IE-Win act exactly like the min-width and min-height properties. The pitfall is that IE5-Mac doesn't react that way. It supports the width and height properties according to W3 spec, but doesn't support the min-width and min-height properties.
But the background image is still placed correctly as if the body is being limited in shrinkage...
Main header aside, the structure of the body is as follows
<wrapper>
<content -- float:right, width:fixed>
</content>
<leftpane -- margin-right: =width of content>
</leftcontent>
</wrapper>
But even when I put like a <div style="width: 770px"></div> inside the wrapper somewhere, it doesn't seem to affect the placement of the float... The wrapper definitely expands, verified with a border, but the stuff inside behaves as if it hadn't done anything.