I have been working on this for a couple of weeks now and I'm down to begging for help.
Here is the page: http://www.sub.bretbrown.name
Here is the CSS:
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
}
#holder {
width: 680px;
margin: 0 auto 0 auto;
position: relative;
}
#index_left {
width: 514px;
margin: 0 0 0 0;
border: 0;
}
#index_right {
width: 166px;
margin-left: 514px;
margin-top: -360px;
background-color: #CCFF00;
}
The page renders correctly in Fire Fox but in IE 6 and 7 there are gaps between the text links (or soon to be links). I know IE has some issues with extra padding or margins or borders or something but I have tried just about everything to get this layout to look correct. Any help?
Reset margins and padding
Put this at the top of your css, it will reset all the margins and padding to 0 in all browsers. Then see how it looks.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px;}
input,select{ margin:0; padding:0;}
I'm farely new at this, but clevatreva showed me this.
Craig
Thanks for your reply. I
Thanks for your reply. I tried your suggestion and it still shows the green background through the bottom of the link images.
anyone?
anyone?
#index_right img {
#index_right img {
vertical-align: bottom;
}
oh thank you, thank you,
oh thank you, thank you, thank you! I could not add your suggestion into the style sheet but it worked perfectly as inline. Thanks again