Member Avatar for SmartBeaver

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.

  • 4 Contributors
  • 11 Replies
  • 180 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A few focused points that add to the useful suggestions already posted by , and .

Fix the broken markup first — an unclosed tag in the header region (what noticed) can make the browser treat the rest of the document as part of that tag, which commonly hides images and breaks later CSS. Validate the page (an HTML validator) and use the browser’s developer tools (F12) to check the DOM and network requests; a missing image will show as a 404 in the Network panel.

If an image file exists but does not appear, check the resource path and filename case (servers are case‑sensitive), and confirm the file is served correctly. Overlap problems are usually stacking/positioning issues: positioned elements form stacking contexts, so z-index can control which element sits on top. Example (keeps header above other content):

#siteHeader { position: relative; z-index: 10; }
#mainNav   { position: relative; z-index: 5; }
<img src="./images/header.gif" alt="Site header" width="733" height="99" />

Fonts and layout: font names with spaces should be quoted and a generic fallback included; in addition, missing or old doctypes push IE into quirks mode and change the box model and positioning. A modern, minimal doctype avoids quirks:

<!DOCTYPE html>
body { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; box-sizing: border-box; }

Two corrections/quick tips not fully covered above: (1) Contrary to a previous post, units on zero (for example 0px) are valid CSS — omitting units is only a style preference. (2) Many identical absolutely positioned divs are brittle — consider using fewer elements (CSS gradients or repeated backgrounds) or classes instead of repeated IDs.

Quick checklist: validate HTML → add a standards doctype → confirm image path/case and server response → inspect with F12 (Network & Computed Style) → simplify positioning or use z-index/floats → add font fallbacks. These steps will resolve the common IE symptoms seen in this thread.

Recommended Answers

All 11 Replies

Member Avatar for MidiMagic 
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.

Member Avatar for SmartBeaver

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! :)

Member Avatar for sillyboy

are you closing your img tags?

Member Avatar for SmartBeaver

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

Thanks for offering suggestions though!

Member Avatar for sillyboy

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.

Member Avatar for SmartBeaver

Yep, I have the image w/ the html.

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

Member Avatar for vicio

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?

Member Avatar for SmartBeaver

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

Member Avatar for MidiMagic

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.

Member Avatar for SmartBeaver

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

Member Avatar for MidiMagic

The best way is to let the browser do both.

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.