Log in

View Full Version : Border Issue in IE 6



legendaryfig
12-07-2007, 09:09 PM
Hi,

I am having an issue with the boder on IE 6. On ever browser everything looks fine except for this one. There is an extra 20 pixels on the right side pushing the border out.

Some one please tell me where I am going wrong with my code!?!?

CSS:
#wrapper {
width:780px;
padding-bottom:5px;
margin-left:150px;
margin-top:5px;
margin:auto;
height:520px;
}

#canvas {
width:780px;
border: 1px solid #2177AD;
clear:both;
height:520px;
background-image: url(/images/logo.jpg);
background-repeat:no-repeat;
display: inline-block;
margin: 0px;
padding: 0px;
}

HTML:

<div id="wrapper">
<div class="shadow">
<div id="canvas">
<div id="nav">
<a href="about.html">about</a>
<a href="portfolio.html">portfolio</a>
<a href="resume.html">resume</a>
<a href="contact.html">contact</a>
</div>
</div>
</div>
</div>

Colonel Ingus
12-07-2007, 09:24 PM
It's probably NOT your code. IE is the worst browser used, and is riddled with problems, but as long as people still use it microsoft isn't going to clean up their act. Do a google on CSS for IE and add extra CSS fields to clear up IE's problems ;)

boogyman
12-07-2007, 09:26 PM
#wrapper {
width:780px;
padding-bottom:5px;
margin-left:150px;
margin-top:5px;
margin:auto;
height:520px;
}


auto margin means its going to try and center the element, putting equal margins on all sides, so I am guessing that IE is bugging with that.
if that is something you want to keep, try putting it first, and the other 2 margin definitions after it.