Mac IE 5 <h> tags expanding

[mhorner]

Hi all

The following page looks fine in every browser we've checked apart from IE 5.2 on a Mac (not an uncommon situation it seems...):
http://www.educulture.org/new/teachers/customized.htm

The problem is that the content div doesn't seem to be constraining itself to a width of 440px. All the headings, and body text are expanding across the right hand column of the page.

Any tweaks that'll fix it? Unfortunately my clients husband uses a Mac with IE 5.2 so I need to get it fixed....

And, this one is a long shot, if anyone has AOL 8 on a PC could they have a look at the page to see if the text shows as being really tiny?

Many thanks
Matt

[jodmcc]

Do you have the CSS you can post?

John

[mhorner]

Here is the relevant css:

html, body {height:100%}

body {
margin: 0;
padding: 0;
font: .7em Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #000000;
background-color: #e0e0e0;
}

html>body #container {height:auto;}
h1{
font-size: 1.8em;
margin-right: 35px;
color: #FFFFFF;
margin:0 0 10px 0;
background-color:#87CEEB;
padding:3px;
}
.h1_firstletter{
color: #000099;
font-size:1.5em;
}
h2{
font-size: 1.4em;
color:#4682B4;
margin:0 0 10px 0;
padding-bottom:2px;
border-bottom: 1px solid #4682B4;
}
h3{
font-size: 1.2em;
font-weight:bolder;
color:#6495ED;
border-bottom: 1px dashed #6495ED;
padding-bottom:2px;
margin:18px 0 5px 0;
}

img{
border: 0px;
}

a {
color: #0066FF;
text-decoration:underline;
}
a:hover {
color: #000099;
text-decoration:underline;
}
li {
padding-top:5px;

}

#container {
margin: 0 auto;
width: 740px;
height:99.8%;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
min-height:100%;
text-align: left;
position:relative;
background-image: url(images/body_bg.jpg);
}
html>#container {height:auto}

#container_home {
margin: 0 auto;
width: 740px;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
text-align: left;
position:relative;
background-color:#F5f5f5;
}


#top_header {
height:30px;
width:720px;
font-size: 1.2em;
font-weight:bold;
color:#3399CC;
position:relative;
background-image:url(images/topheader_bg.jpg);
line-height:30px;
padding-left:20px;
z-index:2;
}
#header {
height: 108px;
width:740px;
background-image: url(images/header_bg.jpg);
margin: 0px;
position:relative;
z-index:2;
}

#top_header_home {
height:30px;
width:720px;
font-size: 1.2em;
font-weight:bold;
color:#3399CC;
position:relative;
background-image:url(images/topheader_bg.jpg);
line-height:30px;
padding-left:20px;
z-index:2;

vertical-align:middle;
}
#top_header_big_text{
float:left;
}
#header_home {
height: 154px;
width:740px;
background-image: url(images/home/header_bg.jpg);
margin: 0px;
position:relative;
z-index:2;
}
#home_top_menu{
float:right;
text-align:right;
font-size:.8em;
color: black;
font-weight: lighter;
padding-top:5px;
padding-right:25px;
}

#small_logo{
position:relative;
left:30px;
top:15px;
float:left;
}

#top_menu {
float:right;
border-top: 1px solid white;
color: #FFFFFF;
width:153px;
margin-right:20px;
margin-top:12px;

}
#top_menu p{
border-bottom: 1px solid white;
color: #FFFFFF;
margin: 0px 0 0px 0;
padding-bottom: 2px;
padding-left:4px;
}

#top_menu a:link{
color: #FFFFFF;
text-decoration:none;
}
#top_menu a:active{
color: #FFFFFF;
text-decoration:none;
}
#top_menu a:visited{
color: #FFFFFF;
text-decoration:none;
}
#top_menu a:hover{
color: #00FFFF;
text-decoration:none;
}

#breadcrumb {
width:705px;
height: 46px;
background-image: url(images/breadcrumb_bg.jpg);
position:relative;
z-index:2;
line-height:30px;
padding-left: 35px;
}
#breadcrumb_home {
width:740px;
height: 32px;
background-image: url(images/home/light_blue_bar.gif);
position:relative;
z-index:2;
}

#sidebar {
float: right;
width: 220px;
padding:20px 0;
}

#sidebar ul{
list-style: url(images/side_menu_arrow.gif) none inside;
margin:0 38px 0 25px;
vertical-align:middle;
line-height:1.4em;
border-top:1px solid #000066;
padding-left:0px;

}
#sidebar li{
border-bottom:1px solid #000066;
padding-top:3px;
padding-bottom:3px;
}
#sidebar a:link{
color:#000066;
text-decoration:none;

}
#sidebar a:active{
color:#000066;
text-decoration:none;
}
#sidebar a:visited{
color: #000066;
text-decoration:none;
}
#sidebar a:hover{
color: #0033FF;
text-decoration:none;
}
.sidebar_title{
margin: 46px 0 15px 25px;
color: #0099CC;
font-weight: bold;
font-size:1.3em;
}

#sidebar img {
border: 1px solid #4682B4;
margin-top: 10px;
margin-left: 25px;
}
.sidebar_promobox {
border: 1px solid #4682B4;
margin-top: 10px;
margin-left: 25px;
width: 137px;
padding:5px 10px 5px 10px;
text-align:center;
color:#000066;
background-color:#00CCFF;
}

#content {
width: 440px;
padding:25px 0 0 30px;
}

#content p{
line-height:1.4em;
}
.yellow_buttons{
padding:3px 0px 0px 8px;
vertical-align: text-bottom;
}

#content p, #sidebar p, #mainnav p{margin:0 5px 5px 0px}

#footer {
width:725px;
height: 35px;
padding-top:5px;
padding-bottom:5px;
padding-left:15px;
background-color: #006699;
border-left:1px solid #000;
border-right:1px solid #000;
margin:auto;
color:#FFFFFF;
}

#footer_kmd {
font-size:.9em;
position:relative;
float: right;
width:220px;
}
#footer_tag{
font-size:1.5em;
font-weight:bold;
float: left;
text-align:left;
padding-left:10px;
}

#news_title{
float:right;
}

.breadcrumb_home {
line-height:25px;
padding-left: 0px;
}

#clearfooter {height:50px;
width:100%;
clear:both;
}

.break{
height:10px;
width:100%;
margin:0px;
padding:0px;
}
.itinerary_para{
border: 1px solid black;
padding:8px;
background-color: #6666CC;
color: #FFFFFF;
}
.trip_heading{
font-size:1.5em;
color:#40E0D0;
font-weight:bold;
}
.trip_heading_mint{
font-size:1.5em;
color:#B0E0E6;
font-weight:bold;
}
.img_right{
float:right;
border: 1px solid black;
margin-left:10px;
}

.pics{
border:1px solid #000000;
margin:3px;
}


--------

The full file is here:
http://www.educulture.org/new/2column.css

Thanks in advance
Matt

[Paul O'B]

Hi,

My mac isn't connect to the internet so I just copied the code over and it seems that ie5 mac doesn't like the width of your content for some reason.

However if you float the left content then everything sorts itself out.

You could just give mac the float if you don't want to change all browsers to float.

* > html #content {float:left}

I couldn't tell if your images were ok as I didn't have time to copy them across. Anyway the above should sort out the headings.

Note that ie5 mac doesn't usually like html,body{height:100%} and its best to hid the style although I didn't notice anything untoward in your layout but thats probably beacues your page was longer than the 100%.

/* commented backslash mac hack \*/ 
html, body{height:100%;} 
/* end mac hack */

Hope that helps anyway.

Paul