Layout problem in Internet Explorer 6 and 7

[rbudj]

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?

[Major Payne]

Maybe try setting the bottom margin to zero in the CSS for #index_right. I see a yellow line between each image you will use for links in IE 7.0, but none in FF. The images are definitely shifted in IE. All images have the same width, but not the same height. This may or may not be significant.

Ron

[ray326]

Try clearing all margins and padding with this at the top of your style sheet.

* { margin:0; padding:0 }

[rbudj]

Thanks yall for the suggestions. Unfortunately neither of them fix the problem. It certainly seems to be something with the bottom margin because the background (bright green) is showing through at the bottom of each of the images. Looks like a 3px bug.

Still looking for an answer.

[rbudj]

Anyone?

[Major Payne]

Not sure if you got this solved yet, but I changed heights for images 2 and 7 and made some changes to the css and it looks good to me in IE 7. Your eyes are better than mine so maybe you can make the changes and check.

Image 2 changes:

<img src="http://www.sub.bretbrown.name/images/2.jpg" alt="Bret Brown" height="360" width="514" />

Image 7 changes:

<img src="http://www.sub.bretbrown.name/images/7.jpg" alt="" height="171" width="166" />

CSS adds:

img, #Image1, #Image2, #Image3, #Image4 {
display: block;
}

This on css:

/* Listed twice. Can be removed
#block {
width: 520px;
} */


Also, closed all tags not normally closed for your document type.

Let me know if this is even in the ballpark. My eyes aren't as good as they use to be.

Ron

[Major Payne]

I have been working on this for a couple of weeks now and I'm down to begging for help. Would have been nice to get a response back from you after working on your problem:

Bret Brown (http://paynelessdesigns.com/Code_Help/rbudj%20(webdeveloper.com)/Bret%20Brown%20-%20Country%20Music%20Song%20Writer_Singer.htm)

CSS (http://paynelessdesigns.com/Code_Help/rbudj%20(webdeveloper.com)/Bret%20Brown%20-%20Country%20Music%20Song%20Writer_Singer_files/style.css)

Images look aligned to me now compared to:

http://www.sub.bretbrown.name/

Ron