Urgent - CSS Not working in IE, Again.

Question

SmartBeaver 0 Newbie Poster

15 Years Ago

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>
<br>
<br>

<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>
<br><br>
<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 <hr> 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.

html-css web-design

4 Contributors
11 Replies
127 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

MidiMagic 579 Nearly a Senior Poster

15 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 <hr> 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.

sillyboy 43 Practically a Master Poster

15 Years Ago

are you closing your img tags?

sillyboy 43 Practically a Master Poster

15 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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SmartBeaver 0 Newbie Poster · Answer 1 · 2009-01-28T04:41:08+00:00

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 0 Newbie Poster · Answer 2 · 2009-01-28T05:45:04+00:00

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

Thanks for offering suggestions though!

SmartBeaver 0 Newbie Poster · Answer 3 · 2009-01-28T08:19:37+00:00

Yep, I have the image w/ the html.

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

vicio 10 Newbie Poster · Answer 4 · 2009-01-30T06:21:32+00:00

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?

SmartBeaver 0 Newbie Poster · Answer 5 · 2009-01-31T04:21:31+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 6 · 2009-01-31T10:35:06+00:00

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.

SmartBeaver 0 Newbie Poster · Answer 7 · 2009-02-01T09:46:34+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 8 · 2009-02-02T02:20:29+00:00

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

The best way is to let the browser do both.