Website doesn't display properly in different browsers

Get Started
1

I am working on my website in Mozilla firefox. Yesterday, my computer was being weird so I switched to Internet explorer. Anyway, when I viewed my website on internet Explorer, one of my .png images (with a transparent color on Mozilla) now has a white background that covers text on the homepage. I didn’t set any transparency, and maybe i should but it was just automatically transparent on Mozilla.

The 2nd thing is my navigation bar is moved over about 55 pixels so it extends the page so there has to be a scrollbar at the bottom.

Lastly, there is absolutely no margin between the last line of the website and the end of the window.

All of these problems are nonexisistent in mozilla, so what’s going on? any help would be greatly appreciated!!

2

Well, actually the 1st problem is solved as well, kind of. It’s still not transparent, but it moved down to where I wanted it to be and is no longer covering any words. So it’s fine.

As for the 3rd thing, I’m still trying to get my website up! If it doesn’t work, I don’t know what I’d do!

3

here is my CSS! And the “display: inline;” thing worked! thanks so much!

body {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, Helvetica, Arial, sans-serif;
line-height: 135%;
padding: 0;
margin: 0;
background: #BFEEFF url(swirls.jpg) repeat-y;
}
#bodycontent {
margin: 65px;
color: navy;
}
h1, h2, h3, h4 {
font-family: Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif;
}
h1 {
font-size: xx-large;
background-color: #B00000;
color: #ffc75d;
padding-top: 1.1em;
padding-bottom: 1.1em;
padding-left: 1em;
padding-right: 1.2em;
margin: 0;
background: #B00000 url(p2p-paris-bg.jpg) repeat-y right;
}
h2 {
color: black;
}
h3 {
color: #b00000;
}
h4 {
line-height: 0;
color: black;
}
#tagline {
background-color: #b00000;
border-top: 3px solid #b00000;
border-bottom: 3px solid #b00000;
font-style: italic;
font-family: Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .9em;
margin: 0;
background: navy url(navy-bg.jpg) repeat-y right; 
}
.feature {
position: absolute;
top: 329px;
right: 2px;
}
.aboutme {
position: absolute;
top: 250px;
right: 13px;
}
a.links:link {
color: black;
text-decoration: none;
}
a.links:visited {
color: navy;
text-decoration: none;
}
a.links:hover {
text-decoration: none;
color: navy;
background-color: #b00000;
}
a.links:active {
color:black;
}
ul#main-nav {
font-family:helvetica,arial,sans-serif;
margin-left:4em;
padding:.2em;
alignment: center;
float:left;
width: 90%;
}
ul#main-nav li {
margin:.1em;
padding:.1em;
list-style: none;
float:left;
margin:0 0.3em 0 0;
}
ul#main-nav li a {
text-decoration: none;
display:block;
padding:0.3em 0.5em;
border-top:0.4em solid navy;
border-bottom:0.4em solid navy;
color: #ffc75d;
background:#b00000;
font-size:0.8em;
width:10.1em;
text-align:center;
font-weight: normal;
}
ul#main-nav li a:hover {
border-top:0.4em solid #900;
border-bottom:0.4em solid #900;
color:#000000;
text-transform: uppercase;
font-weight: bold;
background-color: #ffc75d;
}
#homep2p {
padding-right: 208px;
}
.journalfoto{
width: 400;
float: right;
padding-left: 20px;
padding-top: 15px;
}
.journalfoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 300px;
line-height: 1.4em;
text-align: center;
color: black;
}
.journal {
font-size: 11pt;
line-height: 145%;
}
.itinerary #bodycontent h2 {
color: white;
}
.about {
padding-right: 260px;
alignment: justify;
margin: .5em;
}
p { 
text-indent: 1em; /* adds indentation */
margin-bottom: 1em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
a{
font-weight: bold;
}
li {
list-style-type: circle;
}
.difference {
font-weight: bold;
text-decoration: underline;
}
.enlarge {
font-size: 135%;
}
4

What is the URL? And have you validated your code?

5

Are you using IE6? IE 6 can’t handle png’s with transparency. You need a png fix

I guess you have floating divs with margins? If you indeed use an older IE version it is a margin problem. (IE doubles the margins). When you add the following class to the floating divs:


display: inline;

I think the problem will be solved

This has to do with collapsing margins. It would be handy to see your css

6

no it’s not online yet. It takes hours to upload all of my files using FTP and i did’t know that you have to download them all BACK if you uploaded them into the wrong folders… which i did and so im just going to finish the site

7

Okay so the second problem is solved. Leaves us/you with two. Like I said when you saw the site in IE 6 you will have those problems with png transparency. If you like to solve that you need a PNG fix or work with PNG8. For the last part it would be good to see the site because I can’t see from your CSS to which div you’re referring.

8

Can’t you show the site or isn’t it online yet?