Firefox absolutely positions exactly how I tell it. IE on the other hand seems to be out on the Y-axis. Note the gap between the title banner and the panels underneath:
www.thefingerpicker.com
Is there any method I can use to match them up so the gap's the same size in both browsers? I would like to see if it's possible before I go ahead and lay out the rest of the page. I guess it's not the end of the world if I can't do it without a table, but it would be nice. Here's my CSS:
www.thefingerpicker.com
Is there any method I can use to match them up so the gap's the same size in both browsers? I would like to see if it's possible before I go ahead and lay out the rest of the page. I guess it's not the end of the world if I can't do it without a table, but it would be nice. Here's my CSS:
Code:
body {
background-color:#99CC33;
}
div.banner {
height:150px;
width:760px;
background-image: url(titlebanner.jpg);
padding:0px;
}
div.nav {
position:absolute;
left:8px;
top:170px;
width:150px;
background-image: url(navmid.gif);
}
div.navtext {
padding:10px;
padding-top:0px;
text-align:left;
vertical-align:top;
font-size:11px;
font-family: arial, verdana, sans-serif;
}
div.lesson {
position:absolute;
left:170px;
top:170px;
width:598px;
background-image: url(lessonmid.gif);
background-repeat: repeat-y;
}
div.lessontext {
border-style:none;
border-width:0px;
padding-top:0px;
padding-left:30px;
padding-right:30px;
padding-bottom:0px;
text-align:left;
font-size:12px;
font-family:arial, verdana, sans-serif;
}
p.note {
font-weight:bold;
background-color:#ffcc33;
color:#000000;
padding:12px;
border-width:1px;
border-style:dashed;
}
div.mainlinks {
position:absolute;
left:30px;
top:132px;
font-family: verdana, arial, sans-serif;
font-size:14px;
}
img.tab {
margin-top:30px;
margin-bottom:0px;
}
img.panelbottom {
vertical-align:bottom;
}