Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

compatability

MAHooson
in Frontend

Featured Replies

I'm fairly new to CSS, and now discovering how IE displays things differently to Firefox and Chrome.

 

I've been designing some pages in IE, because I'm doing a site for a school and that's the only browser they use.

 

If you look at the following code in IE, that's how I want the page to look, but in FF and Chrome its way off.

 

Can anyone show me how to amend this for to display how I want it in those browsers?

 

Preferrably without a separate IE stylesheet with an "IF IE" etc; rule.

 

I've left the images out for sake of ease.

 

 

*  { margin:0;
    padding:0;}

body{background-image:url('banner2.jpg');     
    background-repeat:no-repeat;     
    background-position: 63px 0px;       
    font-family: Gill, Helvetica, sans-serif;        
    background-color: #231F20;	 
    margin: 1em;      
    padding: 3em;
    color: #ffffff;
    }

p{margin:1; 
padding:5px;  
font-size:95%; 
line-height:1.3em;  
text-align: left;}

a:link {color:#f8f8f8;text-decoration:none;}
a:visited {color:#f8f8f8;text-decoration:none;}
a:hover {color:#ffffff;text-decoration:underline;}
a:active {color:#f8f8f8;text-decoration:none;}

blockquote {margin: 0;      
           padding: 5px;
           font-size: 190%;      
           font-style: italic;
           color: #ffffff;
           text-align: left;     
           display: block;}      

h1{font-size:30px;    
text-align: left;   
margin: 0px;    
color: #ffffff;  
font-weight: bold;}

.subhead{font: bold 15pt Arial, sans-serif;
letter-spacing:0pt;        
color:#ffffff;}

#menu{width: 1150px;     
background: #7D1F17;  
margin-top: 180px; 
float: left;     
clear: both;}

#menu ul{margin: 0;
       padding: 1px;
        float: left;}

#menu ul li{display: inline;}

#menu ul li a{float: left;
       text-decoration: none;	        
       color: #ffffff;	
       padding: 1px 11px;	
       background-color: #7D1F17;}

#menu ul li a:visited{color: #f8f8f8;}        
#menu ul li a:hover {color:#ffffff}

.widgetbox{width: 240px;       
background: #7D1F17;       
margin-top: 10px;
margin-left: 10px;        
padding: 1px;
display: block;       
float: left;        
clear: both;}

.newsbox{display: block;               
background: #333333;
width: 860px;       
margin-top: 10px;        
padding: 5px;        
margin-left: 18px;       
float: left;

     }

.img{display: block;        
background: #333333;       
margin-top: 10px; 
padding: 5px;       
margin: 10px; 
float: left; 
margin-left: 16px;      
}


#container{
margin:0 auto;   
width: 1150px;

}

.content{display: block;               
background: #333333;
width: 350px;       
margin-top: 5px;        
padding: 5px;        
margin: 10px;
float: left;
margin-left: 18px;  
}

.quote {display: block;        
background: #231f20;       
margin-top: 10px; 
padding: 5px;       
margin: 10px;        
float: left;}



#wrapper{
margin:0 auto;   
width: 1150px;
margin-top: 5px;
margin-left: 0px;
}

.flex {display: block;               
background: #333333;       
margin-top: 5px;        
padding: 5px;        
margin: 5px;
float: left;
margin-left: 8px;  
}

.crosshead {display: block;
background: #333333;
width: 360px;
margin-top: 5px;
margin: 2px;
padding: 5px;
}

.left {display: block;
width: 370px;
margin-top: 5px;
margin: 5px;
padding: 5px;
float: left;
}

.right {display: block;
width: 370px;
margin-top: 5px;
margin: 2px;
padding: 5px;
float: right;
}


#footer{width: 1150px;     
background: #333333;  
margin-top: 10px; 
float: left;     
clear: both;}

#footer ul{margin: 0;
       padding: 1px;
        float: left;}

#footer ul li{display: inline;}

#footer ul li a{float: left;
       text-decoration: none;	        
       color: #ffffff;	
       padding: 1px 11px;	
       background-color: #333333;}

#footer ul li a:visited{color: #f8f8f8;}        
#footer ul li a:hover {color:#ffffff}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rhyn Park test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id='container'><div id='menu'>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="curriculum.htm">Curriculum</a></li>
<li><a href="students.htm">Students</a></li>
<li><a href="parents.htm">Parents</a></li>
<li><a href="hub.htm">The Hub</a></li>
<li><a href="governors.htm">Governors</a></li>
<li><a href="vle.htm">VLE</a></li>
<li><a href="contact.htm">Contact us</a></li>
</ul>
</div>
<div class='img'><img src="girl.jpg" alt="Pupil"></div>
<br>
<img src='logo.jpg'align="right">
<h1>About us</h1><p>Rhyn Park is an exciting school that encourages personal development
and achievement by individuals through their work in class and
beyond it through extra-curricular activities and events and a strong
pastoral system.</p>
<p>Our students’ year on year performance by any measure has improved
to a point where we are now in the top 50 schools in the country
for the progress we make with our students. 
<p>In fact we can say with confidence that a student that comes here will get better exam results
than they would almost anywhere else.</p>
<p>Rhyn Park sends almost all of its students onto further education,
employment or training testament to the happy and rewarding time
spent at the school.</p>
<p>
<div id='wrapper'>
<div class='left'><div class='crosshead'><span class='subhead'>Results</span></div>
<img src='logo.jpg' align="left">
<p>Rhyn Park is an exciting school that encourages personal development
and achievement by individuals through their work in class and
beyond it through extra-curricular activities and events and a strong
pastoral system.</p>
<p>Our students’ year on year performance by any measure has improved
to a point where we are now in the top 50 schools in the country
for the progress we make with our students. 
</div>
<div class='left'><div class='crosshead'><span class='subhead'>Facilities</span></div>
<img src='logo.jpg' align="left">
<p>Rhyn Park is an exciting school that encourages personal development
and achievement by individuals through their work in class and
beyond it through extra-curricular activities and events and a strong
pastoral system.</p>
<p>Our students’ year on year performance by any measure has improved
to a point where we are now in the top 50 schools in the country
for the progress we make with our students. 
</div>
<div class='right'><div class='crosshead'><span class='subhead'>Community</span></div>
<img src='logo.jpg' align="left">
<p>Rhyn Park is an exciting school that encourages personal development
and achievement by individuals through their work in class and
beyond it through extra-curricular activities and events and a strong
pastoral system.</p>
<p>Our students’ year on year performance by any measure has improved
to a point where we are now in the top 50 schools in the country
for the progress we make with our students. 
</div>
</div>
<div id='footer'>
<ul>
<li><a href="contact.htm">Contact us</a></li>
<li><a href="http://www.shropshire.gov.uk">Shropshire Council</a></li>
<li><a href="http://rhynparkschool.wordpress.com">News/Jobs</a></li>
</ul>
</div>
</div>
</body>
</html>

Change doc type to 

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

 

Thats why IE is displaying differently

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.