I'm pretty new to CSS and html... so I don't suppose anyone could give me a hand working out why my site isn't displaying correctly in IE???

 

PROBLEMS:

grannydj2.png is appearing higher on the page.

poster.png is appearing lower on the page.

hyperlinked images have either a purple (logo.png) or blue box around them.

 

Thanks in advance guys

 

HTML:

  <div class="wrapper">
         <div id="pagewidth" > 
           	<div id="header" >
             <a href="index.html"><img src="images/logo.jpg"></a>
             </div> </div>
         <div id="leftcol" >
             <img src="images/grannydj2.png">
             </div>
         <div id="infobox" >
           <img src="images/textbox.png">
             </div>
         <div id="infotext" >
           <p><b><u>TITLE HERE</b></u></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
             </div>
         <div id="socmed" >
             <a href="http://www.facebook.com" target="_blank">
             <img src="images/fbbutton.png"></a>
             <a href="http://www.flickr.com" target="_blank"><img src="images/flickr.png"></a>
             <a href="http://blogspot.com/feeds/posts/default" target="_blank">
             <img src="images/rss.png"></a>
             <br><img src="images/connecttext.png">
             </div> 
         <div id="rightcol" >
             <div class="poster" >
             <img src="images/poster.png">
               </div> </div>   


           <div class="push"></div>
       </div>
       <div class="footer">
           <img src="images/footer.png">
       </div>
   </body>

 

CSS:

* {
   margin: 0;
}
html, body {
   height: 100%;
}

#pagewidth{ 
width:100%;  
} 

body 
{ 
background-image:url("images/background.jpg");
background-repeat:repeat-x; 
}


/* WRAPPER & PUSH */

.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -48px;
}
.footer {background-image:url("images/footer.png");}, .push {  
   height: 48px;
}


/* DIVS IN BODY */

#header{
position:fixed; 
height:40px; 
width:100%;
margin-top:10px;
}

#leftcol{
width:50%; 
float:left; 
position: fixed; 
bottom: 40px;
z-index: 1 
}



#rightcol{
width:40%; 
float:right; 
position:relative; 
 }

/* SubDivs */

.poster {
padding:0px;
border:0px;
margin: 50px 0px;
}

#infobox {
position:absolute;
 top:140px;
 left:250px;
 z-index: 2; }

#infotext {
position:absolute;
 top:155px;
 left:270px;
 z-index: 2; }

#socmed {
position:absolute;
 top:14px;
 right:10px;
 z-index: 3; }

p { font-size: 10px; color: #51bded; font-family:"Arial" }

We haven't got your images to test. I used my own images, but I don't know if they are the same size. grannydj2.png and poster.png were in the same places in my IE7 and Firefox.

 

grannydj2.png is inside #leftcol which has position: fixed and bottom: 0; so it's fixed to the bottom of browser windows but different browsers have different window heights so it will appear in different positions (reduce your window size and you can see that). It would be in exactly the same position if you had it fixed with top: ??px instead of bottom: 0;

 

poster.png is inside #rightcol which has position: relative so that could be in different places in different browsers, but in my browsers it's in the same place.

 

Have you got an online page so that someone can download the images to test?

 

Do you have a doctype before your <html> tag? You should do.

 

Note that #socmed with fbbutton.png has position:absolute; right:10px; so its "fixed" to the right side so that in a small width window it overlaps poster.png which is not position: absolute.

 

Avoid mixing position: fixed and position: absolute and position: relative if you are a beginner.

We haven't got your images to test. I used my own images, but I don't know if they are the same size. grannydj2.png and poster.png were in the same places in my IE7 and Firefox.

 

grannydj2.png is inside #leftcol which has position: fixed and bottom: 0; so it's fixed to the bottom of browser windows but different browsers have different window heights so it will appear in different positions (reduce your window size and you can see that). It would be in exactly the same position if you had it fixed with top: ??px instead of bottom: 0;

 

poster.png is inside #rightcol which has position: relative so that could be in different places in different browsers, but in my browsers it's in the same place.

 

Have you got an online page so that someone can download the images to test?

 

Do you have a doctype before your <html> tag? You should do.

 

Note that #socmed with fbbutton.png has position:absolute; right:10px; so its "fixed" to the right side so that in a small width window it overlaps poster.png which is not position: absolute.

 

Avoid mixing position: fixed and position: absolute and position: relative if you are a beginner.

 

I have <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> before the <html> tag.

 

I've uploaded the site, you can get to it at: http://screenhosts.com/testone/

 

If you try opening it up in IE you can the the left image does not stick to the bottom and the poster.png drops.

Also, how the hell do I get rid of those blue outlines on the hyperlinked images?

The reason the grannydj2.jpg image isn't fixed in IE is because your doctype is incomplete. It should be:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

It also cures the position of poster.png

 

I still think you should fix #leftcol from the top, not the bottom, because browser windows vary in height but the top is always the same. Make your viewing window smaller and the position: fixed grannydj2.jpg will rise up over other content when fixed to the bottom. This puts the image in about the same position on my 1024*768 window and float: left is not applicable with position: fixed:-

#leftcol{

width:50%;

/*float:left;*/

position: fixed;

/*bottom: 40px;*/top: 160px;

z-index: 1

}

 

You can get rid of the image link border by adding

img { border: none; }

 

to the stylesheet.

 

There should not be a comma , between the two styles before .push here:-

.footer {background-image:url("images/footer.png");}, .push {

height: 48px;

}

although it doesn't make any difference.

The reason the grannydj2.jpg image isn't fixed in IE is because your doctype is incomplete. It should be:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

It also cures the position of poster.png

 

I still think you should ...

 

Thanks buddy you've been a major help. Really appreciated.

 

If you ever need any help in the graphics department then just give me a shout.

 

Thanks again