Jump to content

Recognizing A Browser


how2html
 Share

Recommended Posts

I'm currently designing a template for a website and the amount of line breaks between two div's works only in IE and does not work in Firefox (it comes out of the main container.) I wanted to know how I could make my site recognize the browser type, and see if I could make it so there are a certain amount of line breaks, depending on the browser type, so it looked as it should. Here is my code:

<?xml version="1.0" encoding="ISO-8859-1"?><!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" xml:lang="en" lang="en"><head>  <title>Bree Noa Publishing - Template</title>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  <meta name="keywords" content="bree, noa, publishing, co, you, know, your, way, home, suzanne, jauchius, jerry, henderson, books, intuitive" />  <meta name="description" content="Bree Noa is an independent publishing company in West Linn, Oregon creating opportunities every day for authors of memoir and creative non-fiction." />  <link rel="stylesheet" href="styles.css" type="text/css" />   <style type="text/css">   body {			  background: #800000;			  margin: 0;			  padding: 0;   }   .allContainer {							width: 84%;							margin: 10px;							padding: 4px;							margin-left: 7%;							margin-right: 7%;							background: #996600;							height: 1475px;							border: 2px solid #996600;							text-align: center;   }   .headContainer {								 width: 98.5%;								 margin: 4px;								 padding: 2px;								 height: 170px;								 background: #996600;								 text-align: left;								 border: 2px dotted black;   }   .navContainer {							   width: 98.8%;							   margin: 3px 0.3% 3px 0.3%;							   padding: 4px;							   background: #996600;							   height: 45px;							   text-align: left;							   border: 2px dotted black;   }   .noticeContainer {									width: 145px;									height: 78.7%;									margin: 3.5px 0px 0px 3px;									background: #996600;									text-align: left;									float: left;									border: 2px dotted black;									padding: 3px;   }   .bodyContainer {								  background: #996600;								  width: 82.99%;								  height: 78.7%;								  margin: 2px;								  margin-left: 0;								  text-align: left;								  float: right; 								  border: 2px dotted black;								  padding: 4px;   }   .footerContainer {								   background: #996600;								   width: 99%;								   height: 45px;								   margin: 9px 0px 1px 3.5px;								   text-align: left; 								   border: 2px dotted black;   }   h1 {		 color: #000;		 font-family: "Arial", Helvetica, sans-serif;		 font-size: 36px;		 text-align: center;   }   h2 {		 color: #000;		 font-family: "Arial", Helvetica, sans-serif;		 font-size: 29px;		 text-align: left;   }   h3 {		 color: #000;		 font-family: "Arial", Helvetica, sans-serif;		 font-size: 25px;		 text-align: left;   }   p {	   color: #000;	   font-family: "Palatino Linotype";	   font-size: 22px;	   text-align: left;   }   a {	  color: #000;	  text-decoration: underline;   }   a:hover {				   color: #800000;				   text-decoration: none;   }   </style></head><body>  <div class="allContainer">   	 <div class="headContainer">	   <a href="index.html">	   <img src="http://www.breenoa.com/images/BreeNoaPublishing wind.png"				 alt="Bree Noa Publishing Co. - A Wind to carry the Tale"				 width="64%"				 height="89%"				 border="0" />	   </a>	 </div>		 <div class="navContainer">	   <h3 align="center" style="font-size: 22px;">This will contain the navigation bar</h3>	 </div>	 <div class="noticeContainer">		<h3>This will contain the notices (marquee, javascript notices, or plain text and links) of bree noa. 				  <br />				  <br />				  If the need arises, we can organize an RSS feed here as well.</h3>	 </div>	 <div class="bodyContainer">		<h1>This will contain all of the body contents of the page</h1>		<br /><br />		<h3>Testing font styles:</h3>		<br />		<h1 style="text-align: left;">Heading1</h1>		<h2>Heading2</h2>		<h3>Heading3</h3>		<p>Paragraph		<br />		<br />		<a href="#">Link</a>		</p>	 </div>	 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />	 <div class="footerContainer">	   <h4>This will contain the copyright footer.</h3>	 </div>  </div></body></html>

Link to comment
Share on other sites

Rather than using line breaks between one div and the next, give the <div> element a margin that's exactly how large you need the gap to be.Something like this:

.footerContainer {  margin-top: 500px;}

Putting a lot of <br>s or a lot of  s in a row is very unprofessional.

Link to comment
Share on other sites

Rather than using line breaks between one div and the next, give the <div> element a margin that's exactly how large you need the gap to be.Something like this:
.footerContainer {  margin-top: 500px;}

Putting a lot of <br>s or a lot of  s in a row is very unprofessional.

Thanks a lot, that solves the problem for both the browsers :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...