I could really use some help. I’m pretty new to css and web page creation in general.
The webpage I am working on shows up perfectly only in safari
please check it out:
http://www.msu.edu/~yamashi2/jcmu/about_jcmu/home.html
this is what it should look like:
http://www.msu.edu/~yamashi2/screen.png

There are two things I just can’t figure out:
1. why the the background images are not showing up in tabs (#tabs).... try hovering over the red area at the top toward the right side, you should see the links pop out. They are supposed to have an tab image behind them along with a gradient that goes along the red area.
2. why the left navigation has white spaces in IE.

I’ve included the css below.

any help/suggestions would be great. Thanks!

/* CSS Document */

body {
min-width: 550px;
font-family: Georgia, Garamond, “Times”;
font-size: 14px;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}

h1 {
font-weight: 600;
font-size: 30px;
}

h2{
background-color: inherit;
color: #CC0000;
font-weight: 400;
font-size: 24px;
}

h3 {
background-color: inherit;
color: #CC0000;;
}

a:link {
background-color: inherit;
color: #CC0000;
text-decoration: none;
}

a:visited {
background-color: inherit;
color: #999999;
}

a:hover {
background-color: inherit;
color: #999999;
font-style: italic;
}

/**************************************************************************frame*****************************************************************************/

#banner {
background: #000000 url(../images/banner.gif) center no-repeat;
height: 100px;
clear: both;
margin: 0px;
text-align: center;
}

#container {
background: #FFFFFF;
width: 100%;
}

#leftnav {
background-color: inherit;
float: left;
width: 200px;
}

#content {
background: #FFFFFF url(../about_jcmu/images/mt.gif) right bottom no-repeat;
margin-left: 201px;
padding: 25px;
}

#footer {
width: 100%;
text-align: center;
background: #000000;
color: #FFFFFF;
padding: 0;
margin: 0;
}

/*******************************************tab navigation***************************************************************************/

#topnav {
background-color: #CC0000;
}

#tabs {
float: right;
clear: both;
background: #CC0000 url(../images/topnavgradient.jpg) repeat-x bottom;
font-size:93%;
line-height:normal;
width: 100%;
}

#tabs ul {
margin:0;
padding: 10px 10px 0;
list-style:none;
}

#tabs li {
float: right;
background: url(../images/navleft.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}

#tabs a {
display:block;
background: url(../images/navright.gif) no-repeat right top;
padding: 5px 15px 4px 6px;
text-decoration: none;
}

#tabs #current {
background-position: 0% -150px;
background-image: url(../images/navleft.gif);
}

#tabs #current a {
background-color: inherit;
background-position: 100% -150px;
background-image: url(../images/navright.gif);
padding-bottom: 5px;
}

#tabs li:hover, #tabs li:hover a {
  background-position:0% -150px;
  color: #000000;
  }
 
#tabs li:hover a {
  background-position:100% -150px;
  }

#tabs a:visited {
color: #CC0000;
}

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/*******************************************left navigation*********************************************************************/

#navlist {
font-size: 16px;
font-weight: 100;
width: 100%;
}

#navlist ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: .9em;
}

#navlist li {
margin: 0;
}

#navlist a {
display: block;
padding: 5px 5px 5px 10px;
border: none;
background-color: #CC0000;
}

#navlist a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}

#navlist a:hover, #navlist a:active {
background-color: #FFFFFF;
color: #CC0000;
}

#navcurrent a:link, #navcurrent a:visited,
#navcurrent a:hover, #navcurrent a:active {
background-color: #FFFFFF;
color: #CC0000
}

/************************************************floats for pictures***********************************************************/

.floatl {
float: left;
margin: 4px;
}

.floatr {
float: right;
margin: 4px;
}

Hello, it’s late so I’m not going to delve far, but your background image problem is simply the background images navleft.gif and navright.gif aren’t showing up because they’re not there, or they’re there, but they don’t simply show up, so, reupload them or something, that’s what that problem is.  The padding problem with IE could be anything, I myself am not quite knowledged with CSS to exactly pinpoint what’s wrong with it, but hopefully someone can chime in.  Other than that, it looks good, but I like the color red, so maybe I’m being biased;):P

hi thanks. i made a mistake. you’re right there isn’t an image in the left navigation b/c i took it out since it wasn’t showing, but the top navigation along with the tabs do have the images. You can’t really see that the top navigation exists b/c the text is in red, but if you try hovering over the red area at the top towards the right you should see the links. I’ve included a screenshot to show what it looks like in safari. i just can’t understand why they are not showing up in any other web browser :p.

You must put the images back up, else it won’t do any good, I tested it on my computer with some of my images and it worked perfectly fine.

oh! thanks! actually the images were there. Firefox just didn’t like the way i saved my images (with layers). Thanks for narrowing it down to the images though. =DDDDDD