Urgent - CSS Not working in IE, Again.

Hello. I have a webpage im working on as a school project, and everything was going fine. Until I opened it up in IE.

<html>
<head>
<title>
J. ROBERT OPPENHEIMER
</title>
<link rel="stylesheet" type="text/css" href="historyday_template.css">
<style>


div#trans2 { background: #100000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 1px;
}

div#trans3 { background: #180000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 11px;
}


div#trans4 { background: #280000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 21px;
}

div#trans5 { background: #300000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 31px;
}

div#trans6 { background: #380000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 41px;
}

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

div#trans8 { background: #480000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 61px;
}

div#trans9 { background: #500000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 71px;
}

div#trans10 { background: #580000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 81px;
}

div#trans11 { background: #600000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 91px;
}

div#trans12 { background: #680000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 101px;
}

div#trans13 { background: #700000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 111px;
}

div#trans14 { background: #780000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 121px;
}

div#trans15 { background: #780000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 131px;
}

div#trans16 { background: #880000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 141px;
}

div#trans17 { background: #900000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 151px;
}

div#trans18 { background: #980000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 161px;
}

div#trans19 { background: #A00000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 171px;
}

div#trans20 { background: #A80000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 181px;
}

div#trans21 { background: #B00000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 191px;
}






div#trans2 { background: #100000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 1px;
}

div#trans3 { background: #180000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 11px;
}


div#trans4 { background: #280000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 21px;
}

div#trans5 { background: #300000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 31px;
}

div#trans6 { background: #380000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 41px;
}

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

div#trans8 { background: #480000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 61px;
}

div#trans9 { background: #500000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 71px;
}

div#trans10 { background: #580000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 81px;
}

div#trans11 { background: #600000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 91px;
}

div#trans12 { background: #680000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 101px;
}

div#trans13 { background: #700000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 111px;
}

div#trans14 { background: #780000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 121px;
}

div#trans15 { background: #800000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 131px;
}

div#trans16 { background: #880000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 141px;
}

div#trans17 { background: #900000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 151px;
}

div#trans18 { background: #980000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 161px;
}

div#trans19 { background: #A00000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 171px;
}

div#trans20 { background: #A80000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 181px;
}

div#trans21 { background: #B00000;
width: 11px; 
height: 842px;
position: absolute;
top: 0px;
left: 191px;
}











div#rtrans2 { background: #100000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 1px;
}

div#rtrans3 { background: #180000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 11px;
}


div#rtrans4 { background: #280000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 21px;
}

div#rtrans5 { background: #300000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 31px;
}

div#rtrans6 { background: #380000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 41px;
}

div#rtrans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 51px;
}

div#rtrans8 { background: #480000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 61px;
}

div#rtrans9 { background: #500000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 71px;
}

div#rtrans10 { background: #580000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 81px;
}

div#rtrans11 { background: #600000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 91px;
}

div#rtrans12 { background: #680000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 101px;
}

div#rtrans13 { background: #700000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 111px;
}

div#rtrans14 { background: #780000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 121px;
}

div#rtrans15 { background: #800000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 131px;
}

div#rtrans16 { background: #880000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 141px;
}

div#rtrans17 { background: #900000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 151px;
}

div#rtrans18 { background: #980000;
width: 12px; 
height: 842px;
position: absolute;
top: 0px;
right: 161px;
}

div#rtrans19 { background: #A00000;
width: 12px; 
height: 842px;
position: absolute;
top: 0px;
right: 173px;
}

div#rtrans20 { background: #A80000;
width: 16px; 
height: 842px;
position: absolute;
top: 0px;
right: 183px;
}

div#rtrans21 { background: #B00000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
right: 199px;
}



div#hder { background: white;
width: 660px;
height: 98px;
position: absolute;
top: 0px;
left: 202px; 
font-family: Comic Sans MS;
font-size: .9em;
}

div#content { background: white;
width: 600px;
height: 98px;
position: absolute;
top: 99px;
left: 270px; 
font-family: Comic Sans MS;
font-size: 1.1em;
}


a:link {color: 1859B4; }

a:hover {color: E7AE00; text-decoration: none; }

a:visited {color: 800000; }

.header
{
float: none;
width: 736px;
height: 98px;
} 

</style>
</head>

<body bgcolor="white">





<div id="trans1"></div>
<div id="trans2"></div>
<div id="trans3"></div>
<div id="trans4"></div>
<div id="trans5"></div>
<div id="trans6"></div>
<div id="trans7"></div>
<div id="trans8"></div>
<div id="trans9"></div>
<div id="trans10"></div>
<div id="trans11"></div>
<div id="trans12"></div>
<div id="trans13"></div>
<div id="trans14"></div>
<div id="trans15"></div>
<div id="trans16"></div>
<div id="trans17"></div>
<div id="trans18"></div>
<div id="trans19"></div>
<div id="trans20"></div>
<div id="trans21"></div>



<div id="hder">
<img src="header.gif" width="733" height="99" alt="OPPENHEIMER">
</div

<div id="content">
<hr>
<p align="center"><a href="home.html">Home</a>&nbsp;&nbsp;&nbsp;<a href="los_alamos.html">Los Alamos</a>&nbsp;&nbsp;&nbsp;<a href="trinity.html">Trinity</a>&nbsp;&nbsp;&nbsp;<a href="immediate_impact.html">Immediate Impact</a>&nbsp;&nbsp;&nbsp;<a href="legacy.html">Legacy</a></p>
<hr>



<p>CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT!CONTENT!CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT!CONTENT!CONTENT! CONTENT!CONTENT!CONTENT!CONTENT! CONTENT!
CONTENT!CONTENT!CONTENT!CONTENT!CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT!CONTENT!CONTENT! CONTENT!CONTENT!CONTENT!CONTENT! CONTENT!
CONTENT!CONTENT!CONTENT!CONTENT!CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT!CONTENT!CONTENT! CONTENT!CONTENT!CONTENT!CONTENT! CONTENT!
CONTENT!CONTENT!CONTENT!CONTENT!CONTENT!CONTENT!CONTENT!CONTENT! CONTENT!
CONTENT!CONTENT!CONTENT!CONTENT!</p>

<hr>
<p align="center">&copy; 2009 John Smith</p>

</div>


<div id="rtrans1"></div>
<div id="rtrans2"></div>
<div id="rtrans3"></div>
<div id="rtrans4"></div>
<div id="rtrans5"></div>
<div id="rtrans6"></div>
<div id="rtrans7"></div>
<div id="rtrans8"></div>
<div id="rtrans9"></div>
<div id="rtrans10"></div>
<div id="rtrans11"></div>
<div id="rtrans12"></div>
<div id="rtrans13"></div>
<div id="rtrans14"></div>
<div id="rtrans15"></div>
<div id="rtrans16"></div>
<div id="rtrans17"></div>
<div id="rtrans18"></div>
<div id="rtrans19"></div>
<div id="rtrans20"></div>
<div id="rtrans21"></div>


</body>
</html>

Here are the issues im having.The main "header" image, is not showing.
The font is not Comic Sans MS, as I wanted, but it is times New Roman. :(
The lines are stretching out of my content div.
the link section is often covered up by the not-showing image header.

These things only happen in IE, not Firefox, SeaMonkey, Opera, and Netscape.

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

....

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

....

div#hder { background: white;
width: 660px;
height: 98px;
position: absolute;
top: 0px;
left: 202px; 
font-family: Comic Sans MS;
font-size: .9em;
}

Hello. I have a webpage im working on as a school project, and everything was going fine. Until I opened it up in IE.

Here are the issues im having.

The main "header" image, is not showing.

- The closing div tag for hder is missing the greater than character.

- You didn't leave enough room for the image to fit. You have two different width and height values. Also, IE puts margins, borders, and padding INSIDE the width and height settings. The standard (and other browsers) put them outside the width and height settings.

- IE does absolute positioning differently than other browsers do it. Avoid absolute positioning.The font is not Comic Sans MS, as I wanted, but it is times New Roman. :(

- If there are spaces in a font name, it must be surrounded by quotes. Otherwise, the browser tries to interpret each word as a separate font.

- If the target computer does not have the font you want, the default font will be used instead.The lines are stretching out of my content div.

- The closing div tag for hder is missing the greater than character. This probably destroyed the content div tag.

- The div tag is fluid in nature. It takes width and height as suggestions.the link section is often covered up by the not-showing image header.

- Absolute positioning causes lots of unwanted grief.

- The closing div tag for hder is missing the greater than character.

Other problems I see:

- 0px is not a valid style. Values of 0 must not have units of measure attached. The appearance of 0px, 0pt, 0%, or any other zero value with a unit of measure causes the style to be discarded by the browser. If a value of 0 is needed, just put a 0.

- You have the same selectors listed twice, setting some of the same parameters again. Only the second one counts. I showed such a pair in the code portion above.

- Browsers often do not render empty tag pairs (your div pairs). There must be something between them to guarantee rendering (this is a valid place for a br tag).

- You didn't specify a doctype in the html tag. This throws the browser into quirks mode. Its behavior is then unpredictable.

- Using pixel counts for sizes makes the page dependent on the screen resolution. Avoid pixel values, except for border sizes and image sizes.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

Why thank you. I guess this teaches me (im a noob!) a very valuable lesson - check my code! Gosh, I would have caught that div mistake immediately if I had just used the W3C validator...anyways, thanks!

Hm...Im having another problem though. My text and divs are working great now, so thanks. But im still having issues w/ the images.

<img src="opp_hat_smoking.jpg" align="left">

For whatever odd reason, this image isnt showing...hm...

Also,

.header
{
float: none;
width: 736px;
height: 98px;
}

div#hder { width: 736px;
height: 98px;
position:relative;
top: 0;
left: 195px; 
font-family: Comic Sans MS;
font-size: .9em;
}

<img src="header.gif" width="736" height="98" alt="OPPENHEIMER">

This image isnt showing...hm...

I now have all measurments the same...

Ive tried both absolute and relative positioning...

Anyways, thanks for helping the noob (me), and ill try and analyze this problem until somebody posts! :)

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

are you closing your img tags?

sillyboy

Practically a Master Poster

686 posts since Mar 2007

Reputation Points: 85

Solved Threads: 64

3 Years Ago

Hm..I tried doing that, but it doesn't change anything.

Thanks for offering suggestions though!

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

I assume the images are in the same directory as the html? (i.e. have you addressed the image correctly?). If so, it is probably being overlapped by other elements around it.

sillyboy

Practically a Master Poster

686 posts since Mar 2007

Reputation Points: 85

Solved Threads: 64

3 Years Ago

Yep, I have the image w/ the html.

Hm...its not overlapping, but ill double check.

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

Some odd things I found.

1) The image URL maybe is not stating the same path the image is on your folder. Is the image at the same folder than the HTML document or in a different folder? Also check the image name and format (.jpg, .gif, .png) etc.

2) Are you placing an EXTERNAL css document AND an internal one? If is the same why not choosing either one?

vicio

Newbie Poster

18 posts since Sep 2007

Reputation Points: 20

Solved Threads: 2

3 Years Ago

Hm...ill check this out, thank you very much.

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

The image will not render if it won't fit in the available space. Instead of specifying the pixels, let the image itself determine the size of its container.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

So I just dont specify a size, just a location?

SmartBeaver

Newbie Poster

14 posts since Jan 2009

Reputation Points: 10

Solved Threads: 1