[Solved] Cross Browser Issues

[CraigC]

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.

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.

Code:

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.)

[noahgelman]

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.

[CraigC]

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.

[CraigC]

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.

[CraigC]

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.

[Author]

Posts