how2html Posted November 15, 2009 Share Posted November 15, 2009 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 More sharing options...
Ingolme Posted November 15, 2009 Share Posted November 15, 2009 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 More sharing options...
how2html Posted November 16, 2009 Author Share Posted November 16, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.