Fri, 2007-04-20 14:39
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?
Fri, 2007-04-20 15:08
#1
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
Fri, 2007-04-20 15:45
#2
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.
Mon, 2007-04-23 13:01
#3
anyone?
anyone?
Mon, 2007-04-23 13:15
#4
#index_right img {
#index_right img {
vertical-align: bottom;
}
Tue, 2007-04-24 20:50
#5
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