can't make IE work

**byss** · Apr 16, 2004 16:09

I'm working for a website as an intern through my local community college. For the area (central KY), I'm fairly advanced in CSS, but to any real standard, I'm somewhere around intermediate level.

The website is at :http://kyrail.rrhistorical-2.com/
The CSS code is at: http://kyrail.rrhistorical-2.com/sitewide.css

If you look at the site through Mozilla / Firebird / Netscape 6, it looks exactly as I intended. In Opera, almost everything works except the railway running vertically as a border of the main content area, which I don't like but can live with. In AOL and IE, however, it gets all shot to hell. The right column is way off the screen, the layout is adjusted wrongly, and nothing looks good.

Anyone know of a workaround that will still let the site look like I want it to (ie, via Mozilla)? I suck at workarounds and hacks when the CSS code fails due to my lack of understanding or the lack of browser compatibility.

Thanks for any help.

**albion7** · Apr 16, 2004 20:31

For starters, use a complete DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

More on that here:
http://www.alistapart.com/articles/doctype/

You also need to clear your floats. Put this is your CSS:

div.clear {
clear: both;
height: 0;
margin: 0;
line-height: 0;
font-size: 1px; /* keeps IE from applying extra space below */
}

and this in your HTML: <div class="clear">

immediately after  and before your last </div>

Also, take a look at your: DIV#content. Your width and margins don't match the rest of your dimensions.

HTH

**Paul O'B** · Apr 17, 2004 06:54

Hi,

I notice you have used absolute positioniong and floats also in the same style. You can't have both ! Either its floated or its not.

I've adjusted your css to absolutely position the left and right columns (and added a doctype as mentioned by Albion7 above).

I've also corrected the width issues and the gaps between the image and text. The resulting css will look the same in firefox/mozilla and ie6.

As there ar no floats you don't need to clear anything as all the changes are in the css.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kentucky Railway Museum</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FF0000;
padding:0;
margin:0;
}
div#leftnav {
position: absolute;
height: auto;
width: 120px;
left: 0px;
top: 0px;
background-color: #FF0000; 
}
div#header{
margin-left: 120px;
position: relative;
height: 140px;
background-color: #FF0000; }
div#content{
margin-left: 120px;
position: relative;
width: 510px;
padding:0 20px;
background-color: #FFFFFF;
background-image: url(http://kyrail.rrhistorical-2.com/images/track_bg2.png);
background-repeat: repeat-y;
background-position: center;
}
div#header{ }
 
div#block{ }
img.header {
text-align: center;
vertical-align: top;
}
div#rightnav{
position:absolute;
width: 120px;
left:690px;
top:0px;
background-color: #FF0000;
}
a.nav {
color: #000000;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
}
hr {
color: #FFFF00;
height: 1px;
width: 70%;
}
a.nav:hover {
color: #FFFF00;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
}
#header img {display:block}
</style>
</head>
<body>

Add the rest of your page to the above and the page should display as you want.

(If you want to change the left and right columns to floats then you will need to change your code around to accomodate it as floated content must come before the content that is to wrap around it. Or alternatively float all columns but then the columns will drop when the screen is resized.)

Paul

**deronsizemore** · Apr 17, 2004 09:02

[QUOTE=byss]I'm working for a website as an intern through my local community college. For the area (central KY)QUOTE]

byss,

where at in central Kentucky do you work? I am living in Lexington right now and would love to do some work design or work for somewhere doing web design. Any openings where you are at by any chance?

-Deron

**byss** · Apr 19, 2004 14:57

Thanks, HTH & Paul. THANKS!!

I knew about the DOCTYPES, but just forgot to update it. I use the XHTML 1.0 Transitional, however, not HTML 4.01.

Now I have one more problem, though. With IE6, using the code Paul gave me for CSS, the header image runs too much to the right as it is. If I delete the

#header img {display:block}

he added, the image aligns correctly, but there is a pixel sized gap running horizontally between the header and the content.

The files have been moved, so use these, please:

http://kyrail.rrhistorical-2.com/index.html http://kyrail.rrhistorical-2.com/ref/sitewide.css

Deron, I live near Elizabethtown, about 1.5 hours west at the opposite end of Bluegrass Parkway.

There's a couple of web design firms here, but from the bit of research I've done so far, they're not very good. They use table and image based layouts, and barely meet even HTML standards, more or less more modern ones. I don't know if they're hiring or contracting out though. Try your yellow pages for either web design or internet, and then just start searching "Lexington KY websites" on Google and see if any need improvements so you can get your foot in the door, so to speak.

**Paul O'B** · Apr 20, 2004 02:35

Hi,

Try this instead (although the other style should have worked ok but I didn't have time to check again).

Code:

#header img {vertical-align:bottom}

Paul

User Tag List

Thread: can't make IE work

Thread Tools

Display

can't make IE work

Bookmarks

Bookmarks

Posting Permissions