First Problem : In this code i am only using the right border. It show in FF but not in IE. .navi{ float:left; margin-top:5px; width:115px; height:800px; background-color:#ffeaf9; border-right: .25px solid #ff33cc; } Code (markup): <div class="navi"> <img src="img/navi.png" alt="Navigation" /> xa </div> Code (markup): Second Problem : Have a look at this please : There's a problem on the right side, the border extends to the top which i don't want can he top part be removed somehow ?? TIA
The border extending to the top can be dealt with three ways. First, don't use a transparancy on your image. This is problematic if you plan on using a image pattern on the area that's currently white, and can cause some headaches on color matching if you are using .png instead of .gif in IE. (since IE applies gamma to some image types for no good reason) Second you could apply padding-top to .navi equal to the height of the image, margin-right:-1px on the image to slide it over the border, then margin-top equal to negative the height of your image. The 'other' solution is to not apply the border to the wrapper, but to the content area below the image itself. A more complete code sample or link to where you are at, perhaps with a preview or rough idea of your layout could probably let us help you further. Oh, BTW - there is no such thing as 0.25px - that could be causing problems right there... the image should probably be a header tag with a image replacement technique, and I'd not state a fixed height on that entire section either... but that's me. (usually fixed heights = broken layouts)
The problem of border & IE stands solved thanks to you. (I had used .25px line when i was designing it on flash, hence the error) The other problem remains as i couldn't understand what is the idea for that?? Second way sounds good but doesn't solve the problem or maybe i didn't understand what your plan is. The Full code with img is : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Master</title> <style type="text/css"> *{padding:0; margin:0;} body{padding:0; margin:0 auto; background-color : #ff33cc;} .pagecontainer{margin:auto; width:800px; height:800px; background:transparent url(img/background.gif) top left repeat-y;} .logo{float:left; width:270px; height:75px;} .banner{margin-top:5px; width:530; height:75;} .topline{clear:left; width:800px; height:15px; background-color:#ffeaf9;} .navi{float:left; margin-top:5px; width:115px; height:800px; background-color:#ffeaf9; border-right: 1px solid #ff33cc; font-family:Arial; font-weight:bold; font-size:12px; color:#ff33cc; line-height: 150%;} li{font-size:10px; line-height:100%;} .uline{text-decoration:underline;} .lheight{line-height:100%;} </style> </head> <body> <div class="pagecontainer"> <div class="logo"> <img src="img/logo.gif" /> </div> <div class="banner"> <img src="img/banner.jpg" /> </div> <div class="topline"> <center><img src="img/toplink.gif" /> </center> </div> <div class="navi"> <img src="img/navi.png" alt="Navigation" /> <span class="uline">First</span> <ul type="none"> <li> Second</li> <li> Third</li> <li> Fourth</li> <li> Fifth</li> <li> Sixth</li> </ul> <span class="uline">Seventh</span><br /> <span class="uline">Eighth</span><br /> </div> </div> </body> </html> Code (markup): Thanks in Advance