SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Mac IE 5 <h> tags expanding
-
Jun 9, 2004, 03:54 #1
- Join Date
- May 2004
- Location
- UK
- Posts
- 0
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Mac IE 5 <h> tags expanding
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
-
Jun 9, 2004, 09:24 #2
- Join Date
- Dec 2003
- Location
- Houston, Texas
- Posts
- 227
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Do you have the CSS you can post?
John
-
Jun 9, 2004, 10:12 #3
- Join Date
- May 2004
- Location
- UK
- Posts
- 0
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jun 9, 2004, 11:46 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
Code:* > html #content {float:left}
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%.
Code:/* commented backslash mac hack \*/ html, body{height:100%;} /* end mac hack */
Paul
Bookmarks