2 replies [Last post]
yousa
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2007-06-09
Posts: 4
Points: 0

I've been working on this site for a buddy of mine for a while now and I'm almost done except it displays all weird with different versions of explorer.
I use mac and Safari as a browser and it works fine with that but when viewing it with PC and different versions of internet explorer it is displayed different than with safari.

Any help would be much appreciated. Check out the site at www.projectathleteinc.com/web20

Here's the CSS:

body {
margin:0 0 0 0;
background-color: #FFFFFF;
padding: 0px;
font-family: Arial;
font-size: 13px;
color: #102D37;
text-align: center; /*ie hack for centered layout*/
}

#container {
margin:0 0 0 0;
margin: auto;
margin-top: 70px;
margin-bottom: 70px;
padding: 0px;
width: 905px;
text-align: left; /*for previous ie hack*/
}

#header {
height: 177px;
width: 905px;
padding: 0px;
margin: 0px;
}

#content {
float: left;
width: 704px;
padding: 0px;
margin: 20px 15px 15px 15px;
}

#divider {
float: left;
width: 5px;
padding: 0px;
margin: 0px;
}

#navigation {
float: left;
width: 145px;
padding: 0px;
margin: 0px 0px 0px 5px;
}

#footer {
clear: both;
padding: 0px;
margin: 0px;
}

h1 {
margin: 0px;
padding: 0px;
color: #003da2;
font-family: Arial;
font-size: 16px;
font-weight: regular;
}

h2 {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Arial;
font-size: 13px;
font-weight: bold;
}

#login {
color: #000000;
font-family: Arial;
font-size: 12px;
font-weight: bold;
}

em.date {
color: #666666;
font-family: Arial;
font-size: 11px;
}

p.newsheadline {
color: #000000;
font-family: Arial;
font-size: 13px;
font-weight: bold;
}

p.newscontent {
color: #000000;
font-family: Arial;
font-size: 12px;
}

p {
padding: 0px;
margin: 0px;
}

hr {
padding: 0px;
margin: 0px;
width: 704;
height: 1px;
color: #cccccc;
}

#programslinks {
margin: 0 0 0 50px;
}

td {
font-family: Arial;
font-size: 13px;
color: #102D37;
}

#form input {
width: 140px;
}

#content a:link { color: #003da2; font-family: Arial; font-size: 13px; text-decoration: underline;}
#content a:visited { color:#003da2; font-family: Arial; font-size: 13px; text-decoration: underline;}
#content a:active { color:#000000; font-family: Arial; font-size: 13px; text-decoration: none;}
#content a:hover { color: #000000; font-family: Arial; font-size: 13px; text-decoration: none;}

a { color:#003da2; font-family: Arial; font-size: 16px; text-decoration: none; letter-spacing: -1;}
a:link { color:#003da2; font-family: Arial; font-size: 16px; text-decoration: none; letter-spacing: -1;}
a:visited { color:#003da2; font-family: Arial; font-size: 16px; text-decoration: none; letter-spacing: -1;}
a:active { color:#000000; font-family: Arial; font-size: 16px; text-decoration: none; letter-spacing: -1;}
a:hover { color: #000000; font-family: Arial; font-size: 16px; text-decoration: none; letter-spacing: -1;}

.rollover a {
display:block;
width: 145px;
height: 1px;
padding:0 0 16px 7px;
margin: 0 0 0 1px;
font: bold 16px Arial;
color:#003da2;
background: url("img/palogo.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 17px;
color: #000000;
}

#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

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

* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}

Thanks a lot!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 12 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You are getting float drop

You are getting float drop due to IE not thinking there's enough room due to it's lousy width calculation. Give it a bit more width to play with or narrow your floated elements. Also, try adding a "display:inline;" rule to your floats - it won't make any difference to real browsers but it does fix some IE bugs.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

yousa
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2007-06-09
Posts: 4
Points: 0

Ed, you rule!!! I was able

Ed, you rule!!! I was able to fix it. Need to remember this next time for sure.

Thanks a lot!