I've about finished up my first site, and now I'm doing cross-browser testing. All my pages have validated. Everything looks fine in Firefox on Mac and Windows. The current site url is http://dev.craigcurry.com.
I know there are other issues, but I thought I'd start with the two most troubling.
1. In testing on IE7, on my nav menu, everything is appearing a few pixels lower than I'd like. In Safari for Windows, it's about 1px, and there's a 1px gap at the bottom of my header div. Here's some hopefully relevant code.
#nav_wrap ul li { display: inline; /* fix for IE*/ height: 85px; width: 100px; float: left; overflow: hidden; } #header #nav_wrap ul li.about {width: 115px;}
#header #nav_wrap ul li.recordings { width: 100px; overflow: visible; } #header #nav_wrap ul li.shop { width: 85px; float: left; } #header #nav_wrap ul li.contact,#header #nav_wrap ul li.blog { width: 80px;
} #nav_wrap ul li a { text-indent: -9999px; display: block; height: 85px; width: 108px; float: left; background: url(../images/interface/menu4.png); overflow: hidden; }
2. Another issue is that I'm getting an extra set of vertical scrollbars on IE7, sometimes 2, depending on the page. I'm hoping someone can explain to me what I did that is causing this, and how to correct it.
I just took a brief look at your site and am not addressing the issues you mentioned as I am presently on a Mac and need to change to my PC to view in IE. What I did notice, that does not look good, is the background image which is cut off and repeated on the right hand side. I am viewing at 1440x900 but even at 1152x720 the cut off is still there. I will take a look at your other issues tomorrow, it's a little late here for me.
What is the point of your page-wrap div if you have a container div inside doing all the normal page wrap work? Having both of them there is redundant.
Thanks for the input; I appreciate your taking a look. What I was (unsuccessfully?) attempting with the repeat background image was to fake one large background image. (Of course, on larger windows you would see the "seam.") Anyway, I've updated my code and switched it out with one large image. There's also no longer any redundancy with the page-wrap and the container.
I would still appreciate any help with the nav menu and vertical scrollbars questions when you (or someone) has some time. I know there are other issues as well, (e.g., footer) but I thought I'd start at the top and work my way down. Thanks again.
For the navigation issue, for IE7 add margin: -4px 0 0 0; to #nav_wrap ul li You will need a separate stylesheet to target IE7 only. I don't know if you are interested in IE6 but you will need a png fix there and a few other corrections.
For the 1px gap in Chrome on the header you could try giving it a negative margin-bottom of 1px, won't make much difference to the other browsers.
The scroll bars on piano for example are because the widths and heights for the divs contained are not consistent. Look at your code again, for example the box is 647px wide and the containing #main_content is 640px.
Thanks for the help. I was able to get the nav menu and scrollbar issues fixed per your advice. I'm still working on the Safari (Windows) 1px gap. But that was a big help; thanks.
Just an update for the record: I fixed the 1px gap in Safari/Chrome by adding 1px of padding-bottom to the header, and setting the background-color to match the area below.
I know there are other issues, but I thought I'd start with the two most troubling.
1. In testing on IE7, on my nav menu, everything is appearing a few pixels lower than I'd like. In Safari for Windows, it's about 1px, and there's a 1px gap at the bottom of my header div. Here's some hopefully relevant code.
#nav_wrap {
background-image: url(../images/interface/arrow.png);
background-repeat: no-repeat;
width: 960px;
height: 130px;
float: left;
padding-top: 19px;
}
#nav_wrap ul {list-style: none; width: 960px; height: 130px;}
#nav_wrap ul li {
display: inline; /* fix for IE*/
height: 85px;
width: 100px;
float: left;
overflow: hidden;
}
#header #nav_wrap ul li.about {width: 115px;}
#header #nav_wrap ul li.recordings {
width: 100px;
overflow: visible;
}
#header #nav_wrap ul li.shop {
width: 85px;
float: left;
}
#header #nav_wrap ul li.contact,#header #nav_wrap ul li.blog {
width: 80px;
}
#nav_wrap ul li a {
text-indent: -9999px;
display: block;
height: 85px;
width: 108px;
float: left;
background: url(../images/interface/menu4.png);
overflow: hidden;
}
2. Another issue is that I'm getting an extra set of vertical scrollbars on IE7, sometimes 2, depending on the page. I'm hoping someone can explain to me what I did that is causing this, and how to correct it.
body {
font-size: 62.5%;
font-family: \"droid-sans-1\",\"droid-sans-2\",\"Trebuchet MS\", Arial, Helvetica, sans-serif;
background: #fefefe url(../images/interface/possible_bg3.jpg) repeat-x;
overflow:auto;
text-align: center;
}
body#piano h3 {line-height:30px;}
body#login {background-color: #5964b2;}
#page-wrap {
width: 100%;
margin: 0 auto;
background: #fff url(../images/interface/possible_bg3.jpg) repeat-x;
overflow:auto;
}
#container {
font-size: 1em;
width: 960px;
margin: 0 auto;
text-align:center;
height:auto;
}
I would appreciate any help anyone could offer.
(FWIW, I'm not even attempting to support IE6 because it's just overwhelming to me to address at this point.)
I am viewing at 1440x900 but even at 1152x720 the cut off is still there. I will take a look at your other issues tomorrow, it's a little late here for me.
I would still appreciate any help with the nav menu and vertical scrollbars questions when you (or someone) has some time. I know there are other issues as well, (e.g., footer) but I thought I'd start at the top and work my way down. Thanks again.
You will need a separate stylesheet to target IE7 only. I don't know if you are interested in IE6 but you will need a png fix there and a few other corrections.
For the 1px gap in Chrome on the header you could try giving it a negative margin-bottom of 1px, won't make much difference to the other browsers.
The scroll bars on piano for example are because the widths and heights for the divs contained are not consistent. Look at your code again, for example the box is 647px wide and the containing #main_content is 640px.