Annoying problem with Banner - xhtml 1.0 Trans

[sshiro20]

Hello out there,

I'm having a real annoying tedious issue with my code. I'm currently updating a page I'm working on and have had no problems doing so till I started working on the banner for the site. The original banner is a bit different, but not by much, the real only difference is the dimensions. Original being 750px by 100px, whereas the new banner is 750 x 75.

As soon as I uploaded the new banner what seemed to be a dark grey border around the banner magically appeared. I know what you guys are thinking, check your code, check your CSS. Already gone there and back doing that, but maybe I missed something. I need a pair of fresh eyes to look at the code, so here it is: www.cybervues.com/index2.html. The original file is: www.cybervues.com.

Here's my styles sheet for index 2:

#body {
margin: 15px;
width: 320px;
padding-bottom: 0px;
}
#nav_bar {
width: 750px;
background: #9D9D9D;
}
h5 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #ffffff;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
text-align: left;
width: 500px;
}
#footer {
border-top: solid;
border-top-color: #ffffff;
padding-bottom: 15px;
border-top-width: 1px;
background-color: #000000;
padding-left: 40px;
}
h1 {
font-size: 45px;
color: #ffffff;
font-family: arial, helvetica;
}
ul {
color: #cccccc;
width: 300px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
padding-top: 20px;
padding-left: 40px;
padding-bottom: 15px;
}

Here's my styles sheet for index:




#body {
margin: 15px;
width: 320px;
padding-bottom: 0px;
}
#nav_bar {
width: 750px;
background: #9D9D9D;
}
h5 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #ffffff;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
text-align: left;
width: 500px;
}
#footer {
border-top: solid;
border-top-color: #ffffff;
padding-bottom: 15px;
border-top-width: 1px;
background-color: #000000;
padding-left: 40px;
}
h1 {
font-size: 45px;
color: #ffffff;
font-family: arial, helvetica;
}
ul {
color: #cccccc;
width: 300px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
padding-top: 20px;
padding-left: 40px;
padding-bottom: 15px;
}

Thanks guys,

if you guys figure this out, you rule and I'll suck, but that's ok.

sshiro20

 

[kgarner]

I still haven't figured out where the gray border is coming from, but it appears to be a background color from...something. Anyway, it is being shown because the elements are that contain the image are all 750px and the image is 748px.

FYI, in Firefox (WinXP) it doesn't show up, but in Safari (WinXP, not at my Mac sadly) it does.

 

[sshiro20]

I actually figured it out. It was merely that upon creation of the graphic file (AI --> jpg) I didn't extend the black border enough around the banner. In a lot of cases, what I've found is that if you don't extend the background color enough past the margins of the file, the background will show up. Stupid mistake, but next time I'll know and perhaps others will too!!

 

[SrWebDeveloper]

Hey, we all do stuff like that from time to time.

The other most common mistake is people forget to add border="0" to the img tag if it was wrapped by an anchor tag around the image to turn it into a link. That color is actually the default link (i.e. visited, active) color imposed by the browser.

-jim