a trace of a vertical line on left bottom side.

[dotJoon]

Link 02 http://220.89.242.19:8500/test/02/home/index.cfm

Link 03 http://220.89.242.19:8500/test/03/home/index.cfm


Link 02 has the following code.

#foot {
 width:100%;
 clear:both;
 height:50px;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 background-color: white;
 color: #000000;
 text-align:center;
 position:relative;
}

Link 03 has the following code.

#foot {
 width:100%;
 clear:both;
 height:50px;
 border-top:1px solid #000;
 
 background-color: white;
 color: #000000;
 text-align:center;
 position:relative;
}

So Link o2 has the bottom line while Link03 doesn't.

But Link 03 has the trace of the left vertical line displaying a dot on the left bottom side due to the following style code.

#outer{
 height:100%;
 min-height:100%;
 margin-left:160px;
 background: white;
 border-left:1px solid #000; 
 margin-bottom:-52px;
 color: #000000;
}

Can I remove the dot which is on the left bottom caused by the left vertical line (border-left:1px solid #000) without bottom line (border-bottom:1px solid #000)?

[Restless]

I thought if I'd play with the code for a while I might stumble across the solution by accident. But I didn't

Anyway, I only have IE6 and Firefox to test here and the problem only shows in Firefox.
And seeing as I cant give you a real good technical solution I'll tell you what I would do..

#foot {
 width:100%;
 clear:both;
 height:50px;
 border-top:1px solid #000;
 border-bottom:1px solid #FFFFFF;
 background-color: white;
 color: #000000;
 text-align:center;
 position:relative;
}

Note the #FFFFFF;



I know, it's a stupid way to do it, but hey..
I'm just trying to be helpful.

So long !

[dotJoon]

Nice trick!

[Restless]

Nice trick!

shucks, thanks

[Paul O'B]

Hi,

Restless's solution works because it makes the footer the correct size by keeping a 1px bottom border.

I think I explained pereviously (somewhere) that the space for the footer is made by the negative margin in #outer.

Therefore if you change the height of the footer then you need to change the corresponding negative margin in #outer.

e.g.

#outer{
 height:100%;
 min-height:100%;
 margin-left:160px;
 background: white;
 border-left:1px solid #000; 
 margin-bottom:-51px;
 color: #000000;
}

However you would also need to adjust the broken box model settings of footer for ie5.

* html #foot {/* only ie gets this style */
 \height:51px;/* for ie5 */
 he\ight:50px;/* for ie6 */
}

Hope that explains it Its probably easier just to sticvk with the white border at the bottom and you don't need to change anything else.

Paul

[dotJoon]

shucks, thanks

WebPage Making is nothing but shucks and trick, isn't it? ^^

[dotJoon]

#outer{
 height:100%;
 min-height:100%;
 margin-left:160px;
 background: white;
 border-left:1px solid #000; 
 margin-bottom:-51px;
 color: #000000;
}

It works. I got it. Thanks

[Restless]

WebPage Making is nothing but shucks and trick, isn't it? ^^

Thing is.. I shoulda known what it was to begin with. I had the same problem on my page before I removed the footer completely and was able to fix it thanks to the great tutorial from Paul.



So much yet to learn - and so much I really really shouldn't forget