1 reply [Last post]
Noha
Offline
Regular
Last seen: 13 years 41 weeks ago
Timezone: GMT-5
Joined: 2007-12-20
Posts: 17
Points: 0

Hello Everybody
Finally i have finished my first site but it has some proplems in IE7 mainly the main content appears lower than suppose to be and i didn't check the site on others browsers like safari or opera just firfox is ok
so could you please tell me what should i do with my site to be compatible with all browsers??
http://www.beaconlight.ca/index.html
thanks in Advance

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 39 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

The fast and dirty fix may

The fast and dirty fix may be to clear the footer to keep the float from dropping in every browser in a narrow window.

A more comprehensive fix would take more time than I have to list all the changes. Writing CSS for ids that do not exist in the markup, setting height where it is not needed, bad practices (&nbsp and br tags among them), distorted images, and so on...

A suggested remedy is online here

http://chelseacreekstudio.com/ca/cssd/muslim.htm

with a copy for the forum archives below. Doctype switched to strict. Quick checked to fold to 800 w/o float drop in IE/6 & 7; and, compliant browsers. The goofy borders are for position only.

It is important that you realize my sample, and your original, still suffer a major flaw. Namely the text set on top of the image heads for South America with font scaling. You'll need to construct that division to include a top, a bottom, and a middle section faux column that expands vertically to accomodate font-calling. In other words, no height can be set on the middle section containing the text.

BTW, the sole purpose of typography is to make content readable-- not a good idea to get cute with the wrap the words around the dingbat jazz..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test-6</title>
 
<style type="text/css">
 
html, body {
background : #000;
color : #fff;
margin : 0;
padding : 0;
}/*added*/
body {
font : 100%/1.4 Georgia, serif;
}/*added*/
 
/*body{margin:0;padding:0;background-color:#000000;}delete*/
 
#container {border: 1px solid red;}
 
 
#banner{
width:100%;/*add*/
height:200px;/*add*/
background: #3c2818;/*add*/
}
#banner img {width:600px; height:200px; display:block;margin: 0 auto;}/*add selector*/
 
/*#image{
width:100%;
height:200px;
}delete*/
 
#navigation{border: 1px solid fuchsia;
float:left;
width:190px;
/*padding-top:2em;padding-left:3em;margin-top:10px;delete*/
 
}
 
#navigation ul{
list-style-type:none;
margin:0;
padding:10px;
border:#FFFFCC;
 
}
 
#navigation ul li{width:240px;color:#fff;
margin-top:4px;
background-image:url(muslim_files/list0000.gif);
text-align:center;
width:175px;
min-height:35px;
}
 
#navigation ul li a
{width:240px;
display:block;
width:170px;
min-height:35px;
color:#fff!important;
/*font-size:19px;delete*/
font-size: 95%;/*add*/
text-decoration:none;
/*height:35px;delete*/
padding: 8px 0 7px 0;/*add*/
line-height: 1.4;/*add*/
 
}
#navigation ul li a:hover{width:240px;color:#fff;
background-image:url(muslim_files/list_hov.gif);
/*text-align:right;*/
width:100%;
}
* html #navigation ul li {height:35px;}
 
#wrap {width:770px; border: 1px dashed aqua;margin: 45px auto;overflow:hidden;}
 
#content {border:1px dashed #fff/*test only*/;
/*background-image:url(muslim_files/content_.gif);background-repeat:no-repeat;background-position:center;delete all*/
background-image:url(muslim_files/content_.gif);/*add */
/*margin-right:150pxdelete*/;
/*width:50%;delete*/
width:500px;/*add*/
float:right;
/*margin-top: 44px;delete*/
/*padding: 0;delete*/ 
min-height: 450px;
}
* html #content {height:450px;}
 
#content div {border: 1px dashed yellow; width: 340px; margin: 80px auto 0 auto;}
 
/* delete entire ruleset-- not needed
.mission{ border: 1px solid yellow;
background-image:url(muslim_files/content_.gif);
background-repeat:no-repeat;
width:500px;
height:450px;
float:right;
font-size:1.2em;
line-height:2em;
color:#FFFFCC;
margin-right:120px;
margin-top:52px;
padding-top:20px;
padding-left:20px;
}*/
 
p { color:#fff; margin: 10px 0;}
/*p:first-letter{ 
color:#000000;
font-size:xx-large;
}*/
.vision{
font-size:24px;
color:#FF9999;
 
}
#footer{ background: #3c2818;/*add*/
clear: both;/*add*/
width:100%
}
 
#footer img {width:700px; height:35px;display: block; margin: 0 auto;}
 
 
 
</style>
</head>
 
<body>
 
 
 
<div id="container"><!--add-->
 
 
 
 
 
<div id="banner">
<img src="muslim_files/banner00.gif"  id="image" alt="beacon"/>
</div>
 
<!--delete
<div id="container">
 
-->
 
<div id="wrap"><!-- open wrap-->
 
      <div id="navigation">
       <ul> 
         <li><a href="#">Mission</a></li>
         <li><a href="http://www.beaconlight.ca/events.html">Events</a></li>
         <li><a href="http://www.beaconlight.ca/Where%20to%20go.html">Where To Go?</a></li>
         <li><a href="http://www.beaconlight.ca/How%20to.html">How to?</a></li>
         <li><a href="http://www.beaconlight.ca/Ask%20scholar.html">Ask Scholar</a></li>
         <li><a href="http://www.beaconlight.ca/Ask%20support.html">Ask support</a></li>
         <li><a href="http://www.beaconlight.ca/resources.html">Resources</a></li>
         <li><a href="http://www.beaconlight.ca/volunteer.html">Volunteer</a></li>
       </ul>
       </div>
 
       <!--<div id="contentbg">-->
       <div id="content"><!--open #content-->
       <div><!--open #content div-->
 
          <!--
          <p class="mission">We are a group of concerned individuals<br/> commited to helping new and newly practicing muslims <br/>as well as non muslims who are interested to learn about<br/> ISLAM .<br/>Our Vision:<br/>To Facilitate the transition and adaption of New muslims into<br/> 
         their  chosen faith , way  of  life and community  through an  <br/>organized structure<br/>    
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The new Muslims is anyonewho is adapting to live as<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a new muslim , or  who  would be in  need of the &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;services we offer.<br/>    </p>               </div>-->
 
<p>We are a group of concerned individuals commited to helping new and newly practicing muslims as well as non muslims who are interested to learn about ISLAM.</p> <p><b>Our Vision</b>: To Facilitate the transition and adaption of New muslims into
their  chosen faith , way  of  life and community  through an  organized structure.</p>  
<p>The new Muslims is anyonewho is adapting to live as a new muslim , or  who  would be in  need of the services we offer</p>  
 
     </div><!--/close #content div -->   
     </div><!--/close #content-->
     </div><!-- /close wrap-->
 
<div id="footer"><!--add-->     
<img src="muslim_files/footer00.gif" title="footer" alt="Footer" />
</div> 
 
</div><!-- /container--> 
 
</body>
</html>
 
<!-- This document saved from <a href="http://www.beaconlight.ca/index.html" rel="nofollow">http://www.beaconlight.ca/index.html</a> -->