IE’s Disappearing, Reappearing, Broken Borders

http://hi.baidu.com/yaoyingying/blog/item/5d8b33c770345fd5d1006033.html

_蒹葭人生_百度空间

(I just added a style to the allborder div:

style="height:100%;" , HL 20101117)

What do you do when an element's border is broken in Internet Explorer? Where half of it is there, but half of it is not; where refreshing the page might clear it up, but might not; where highlighting text inside the element might also clear it up, but then again, might not…

There's a documented bug in IE 6 called the peakaboo bug – read about that here – but I've experienced this problem in IE 7 as well.

The Problem

What I've experienced is that IE will render a page (that appeared beautifully in Mozilla browsers) with some element's border broken. IE would display only parts of the border, a little here and a little there. And if I highlighted text within that content block, it would join up all of the broken border lines so that the entire border was displayed. The image to the left highlights the right-side border of the element block; that border shouldn't be patchy.

The blurred text is part of a site map – a horizontal rule marks the sections and the entire content area has a light gray border. As you can see, the broken borders in IE only appear in positions vertically even with the content of each section of the site map. Each of those sections is a group of left-floated <ul> elements – it's a big site map!

So I suspected the problem occurred somewhere in those floats, but didn't know why.

The Solution

The root of the problem is whether or not an element "has layout." Now, "layout" is a completely made-up, IE-specific attribute not attended to in any manner by the other browsers. It's bunk. But it provides the solution to the broken borders issue. (You can read more on hasLayout here if you'd like.)

To enforce proper border behavior in IE, the floated elements need to "have layout." If validation doesn't matter, the quickest solution may be to add "zoom:1″ to the element. If validation does matter, you can give an element layout by setting "position:absolute" or assigning the "height" or "width" attributes something other than auto.

What's worked for me? Find the element that is actually causing the rendering problem by experimenting with adding a "zoom:1″ style to different elements – start with the element with the broken border, sure, but if that doesn't work try assigning "zoom:1″ to some of its child elements or neighboring elements. Once you've located the element that needs layout, you can replace "zoom:1″ with a specific height or width value – then the problem is solved and your CSS validates.

The Web Page Width Dilemma

http://www.alteredimpressions.com/Usability101/Web_Page_Width_Dilemma.php

With so many different resolutions (800x600, 1024x768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, Mobile ,etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations.

To design a page that looks good with most configurations, let's start by defining our main objective:  we must never force a user to scroll horizontally.  In other words, our page must always fit within the available screen width.  This would suggest that we have to design our page for the lowest common denominator.

So let's look at the stats

January 2010
Resolution	% of Total
1280x1024	18.2 %
1280x800	17.3 %
1440x900	10.5 %
1680x1050	10.0 %
1920x1200	4.6 %
1366x768	3.6 %
1920x1080	2.3 %
1152x864	2.1 %
1600x1200	1.4 %
1280x768	1.2 %
Other	4.8 %

Get the latest in stat at w3schools.com

Ready for our next decision

Should we design a fixed-width page, or should we specify the width of our page in percentage terms?

fixed-width: There are pros and cons for both.  The main advantage of a fixed-width page is that the layout will always remain as you intended, even when viewed at higher resolutions.  The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will instead see large, unused blocks of space around your page.

percentage terms: The advantage of establishing our page width in percentage terms, as 100%, is that the page will adjust itself to the resolution of the screen.  This is called a "liquid page design".  The main benefit of this method is that all the available screen real estate will be utilized.  The disadvantage is that the layout of your page will change, and users may find it uncomfortable to read the extremely wide sentences that will result when higher resolutions are used.

If you decide optimize your page for 1024x768, and then decide to follow the fixed-width page method, you must take into account that not all the 1024 pixels will be available (some of them will be used by the browser to display the scrollbar and other "browser chrome").  To accommodate most browsers and platforms, specify your page width at a maximum of 960 pixels. 

If you decide to specify your page at 100% width, you won't have that problem, since it will adjust automatically to the available width.  Just make sure that your page looks best at 1024x768, and that the layout doesn't change much when you view your page at 1280x1024.

 Content provided by Altered Impressions - making websites that work!

CSS 100% Height

CSS 100% Height | TutWow
September 11, 2008 in HTML/CSS, Tips

A common problem among designers is how to get a div to stretch 100% of the window's height. There are a few different techniques out there, but I came up with one that is my personal favorite, which I will share with you today.

I don't know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn't stretch. Now why wouldn't it do that? Today I will share the solution with you.

Say you have coded an HTML file like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  <title>CSS 100% Height</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>  <body> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </body> </html>

And you have a CSS file like this:

body {  margin: 0;  padding: 0; } #content {  background: #EEE;  border-left: 1px solid #000;  border-right: 1px solid #000;  padding: 0 20px 0 20px;  margin: auto;  font: 1.5em arial, verdana, sans-serif;  width: 960px;  height: 100%; }

That gives you this example file. As you can see, the content box on that page doesn't stretch to the whole height of the page, even though we added the "height: 100%;" line to the CSS file. Why is that?

Let me give you a different way of thinking about HTML. HTML is pretty much just a bunch of containers stacked inside each other. So in our page, first we have the <html> container, then the <body> container inside of that, and finally the <div id="content"> container inside of that. When we put content into one of those boxes, it stretches that box and all the boxes containing that box so that they can hold the new content. So when we put our text into the <div id="content"> box, that box streches, which in turn stretches all of the boxes that it is in (in our case the <body> and <html> boxes).

When we put the "height: 100%;" style onto the <div id="content"> box, what we are doing is telling it to stretch to the full height of the box that it is in. In this example, the box that it is in is the <body> box. So the <div id="content"> box is 100% of the height of the <body> box. Well, how tall is the <body> box? It's just as tall as the <div id="content"> box, because we never told it how tall it should be! So when we put the "height: 100%;" style onto the <div id="content"> box, we are just telling it to be as tall as itself!

To fix this, we need to tell the <body> box to get bigger. But then we run into the same problem with the <html> box – it is only as big as the <body> box! So to fix our problem (to get the <div id="content"> box to stretch the whole height of the page), we need to tell the <html> and <body> boxes to be the full height of the page.

So if we change our CSS file to this:

html {  min-height: 100%; } body {  margin: 0;  padding: 0;  min-height: 100%; } #content {  background: #EEE;  border-left: 1px solid #000;  border-right: 1px solid #000;  padding: 0 20px 0 20px;  margin: auto;  font: 1.5em arial, verdana, sans-serif;  width: 960px;  min-height: 100%; }

And that's it! This is what we have now. The content box is now stretched to the full height of the page!

A big thanks to Mark in the comments for letting me know about using the "min-height" style instead of just "height". The reason for doing this is to make sure that if there is enough text in the content box to stretch it below the bottom of the page, the design won't get distorted.

去掉Imgae和它下面div之间的空隙

可以看到本网页题头（header）中的图像下面有一个菜单条，开始时图像和菜单所在的div之间老有一条大该10px的空隙，消除不掉。原来的代码是这样的：

<img/>
<div>
......
</div>

后来才发现，这空隙并不是来自图像也不是来自下面的div，而是由它们之间的空格或换行字符引起的， 有两种办法可以解决这个问题：

1、把图像和div的tag放在同一行上，之间不要有任何字符：

<img/><div>
......
</div>

2、HTML代码可以不动，而是用CSS进行调节.

<img style="vertical-align:top" />
<div>
......
</div>