Hello everyone. I have been designing several professional websites with <!DOCTYPE HTML> and old Doctypes.
The problem I am encountering over and over is that the margins with Opera latest (versions), Chrome and IE seem fine.
However with Firefox, all the margins in my footer appear totally distorted.
Cant anyone give me any suggestions and or advice?
Thanks in advance
Jump to Postmargins should work across modern browsers. The HTML Doctype should be Ok for latest versions of the browsers you mentioned. Can you provide a snippet of your CSS code?
Jump to Postthe problem lies in the difference between browsers interpretations of the box model. Unfortunately, until all browsers decide to conform, universally, to the w3 standards, this is a frustration we all have to …
Jump to PostSorry Kip15, try to copy and paste your code into a post
margins should work across modern browsers. The HTML Doctype should be Ok for latest versions of the browsers you mentioned. Can you provide a snippet of your CSS code?
the problem lies in the difference between browsers interpretations of the box model. Unfortunately, until all browsers decide to conform, universally, to the w3 standards, this is a frustration we all have to work with.
There are ways (css hacks) to add styling that is only interpreted by specific browsers. Many different methods can be found by googling depending on your specific needs. If you post your css code here someone may be able to recognise and point out one that will work for you.
For whatever reason cant post the code how I can email it if you give me the address.
Keep recieving error message when trying to post code and CSS.
Sorry Kip15, try to copy and paste your code into a post
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-</title>
<link href="assets/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
$(function() {
$('#lightboxgallery a').lightBox();
});
</script>
<link rel="shortcut icon" href="images/br_flavicon.ico" />
<link href="css/sitemap2.css" rel="stylesheet" type="text/css">
<link href="css/navbar_brvertical.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outerwrapper">
<div id="wrapper">
<div id="header"></div>
<div id="nav">
<div id="holder">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="bio.html" >Bio</a></li>
<li><a href="protryouts.html">Pro Tryouts</a></li>
<li><a href="teams.html">Teams</a></li>
<li><a href="#">Former Players</a></li>
<li><a href="#">Former Coaches</a></li>
<li><a href="#">TV/Radio</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="#">Videos</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="sitemap.html"id="onlink">Sitemap</a></li>
</ul></div>
<!--end of holder-->
</div>
<!--end of navbar-->
<div id="content">
<div id="contacttext">
<p> </p>
</div>
<div id="sitelinks">
<div id="index"><a href="index.html" class="index">Home</a></div>
<div id="bio"><a href="bio.html" class="index">Bio</a></div>
<div id="protryouts"><a href="protryouts.html" class="index">Protryouts</a></div>
<div id="teams"><a href="teams.html" class="index">Teams</a></div>
<div id="formerplayers"><a href="#" class="index">Former Players</a></div>
<div id="formercoaches"><a href="#" class="index">Former Coaches</a></div>
<div id="news"><a href="#" class="index">News</a></div>
<div id="gallery"><a href="gallery.html" class="index">Gallery</a></div>
<div id="videos"><a href="#" class="index">Videos</a></div>
<div id="contact"><a href="contact.html" class="index">Contact</a></div>
<div id="sitemap"><a href="#" class="index">Sitemap</a></div>
</div>
</div>
<div id="footer">
<div id="brcopyright">© 2012 All Rights Reserved</div>
<div class="index" id="legal"><a href="#">Legal advice</a></div>
<div id="email"><a href="" class="index">Contact</a></div>
<div class="index" id="email"><a href="sitemap.html" class="index">Site map</a></div>
<div id="kip">Powered by:<a href="" class="index">KIP Creations</a></div>
</div>
</div>
</div></body>
</html>
hey Kip,
You'll need to include your css files/code as well, so I can take a look at what styling you've got specified.
/* CSS Document */
body {
background: #000 url(../images/br_bg3.png) no-repeat scroll left top;
color: #FFF;
font: normal 14px/1 "Calibri Arial", Helvetica, sans-serif;
}
.h1 {font-size:18px;
font-family:Calibri Arial, Helvetica, sans-serif; }
a {
margin:0;
padding:0;
vertical-align:baseline;
background:transparent;
font: normal 12px "Calibri Arial", Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
.h2 {font-size:16px;
font-family:Calibri Arial, Helvetica, sans-serif; }
/* CSS Document */
.yui3-cssreset html{color:#000;background:#FFF}
.yui3-cssreset body,.yui3-cssreset div,.yui3-cssreset dl,.yui3-cssreset dt,.yui3-cssreset dd,.yui3-cssreset ul,.yui3-cssreset ol,.yui3-cssreset li,.yui3-cssreset h1,.yui3-cssreset h2,.yui3-cssreset h3,.yui3-cssreset h4,.yui3-cssreset h5,.yui3-cssreset h6,.yui3-cssreset pre,.yui3-cssreset code,.yui3-cssreset form,.yui3-cssreset fieldset,.yui3-cssreset legend,.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset p,.yui3-cssreset blockquote,.yui3-cssreset th,.yui3-cssreset td{margin:0;padding:0}
.yui3-cssreset table{border-collapse:collapse;border-spacing:0}
.yui3-cssreset fieldset,.yui3-cssreset img{border:0}
.yui3-cssreset address,.yui3-cssreset caption,.yui3-cssreset cite,.yui3-cssreset code,.yui3-cssreset dfn,.yui3-cssreset em,.yui3-cssreset strong,.yui3-cssreset th,.yui3-cssreset var{font-style:normal;font-weight:normal}
.yui3-cssreset ol,.yui3-cssreset ul{list-style:none}
.yui3-cssreset caption,.yui3-cssreset th{text-align:left}
.yui3-cssreset h1,.yui3-cssreset h2,.yui3-cssreset h3,.yui3-cssreset h4,.yui3-cssreset h5,.yui3-cssreset h6{font-size:100%;font-weight:normal}
.yui3-cssreset q:before,.yui3-cssreset q:after{content:''}
.yui3-cssreset abbr,.yui3-cssreset acronym{border:0;font-variant:normal}
.yui3-cssreset sup{vertical-align:text-top}
.yui3-cssreset sub{vertical-align:text-bottom}
.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset select{font-family:inherit;font-size:inherit;font-weight:inherit}
.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset select{*font-size:100%}
.yui3-cssreset legend{color:#000}#yui3-css-stamp.cssreset-context{display:none}#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#header {background:url(../images/header3.png) center top no-repeat;
height: 191px;
width: 750px;
float: left;
margin-right: auto;
margin-left: 150px;
}
#content {
height: 585px;
width: 650px;
clear: right;
margin-top: 50px;
float: left;
border: 3px solid #03ACFB;
margin-left: 5px;
font: normal 14px/115% "Calibri Arial", Helvetica, sans-serif;
text-justify:auto;
padding: 5px;
background: url(../images/sitemap_bballx800.png) no-repeat center top;
}
#contacttext {
float: left;
clear: left;
margin-top: 10px;
background: url(../images/sitemap_title.fw.png) no-repeat center;
height: 28px;
width: 88px;
margin-left: 285px;
margin-right: 285px;
}
#footer {
float: left;
height: 20px;
width: 1000px;
padding-left: 325px;
background: url(../images/footer_img.png) no-repeat scroll 140px top;
margin: 20px auto 10px;
}
.email {color:#03ACFB;
}
.copyrights {font-family:Calibri Verdana, Geneva, sans-serif;
font-size:10px;
text-decoration:none;
color: #FFF;
}
.copyrights:hover {font-family:Calibri Verdana, Geneva, sans-serif;
font-size:10px;
color:#1427ac;
text-decoration: none;
}
#sitelinks {
float: left;
height: 440px;
width: 650px;
color: #FFF;
margin-top: 20px;
clear: right;
}
#index {
color:#FFF;
height: 32px;
width: 32px;
float: left;
background: url(../images/sprites/sitemap_ball.png) bottom;
position: absolute;
left: 434px;
top: 469px;
text-align: center;
line-height: 32px;
}
#index a{
color:#FFFBF0;
display:block;
}
#index a:hover {color: #02acfa;
}
.index {font-size:14px;
color:#FFF;
height: 32px;
width: 32px;
}
.footer {color:#FFF;
text-decoration:none;
}
.footer:hover{color:#E1A424;
text-decoration:none;
}
#sitelinks a:hover {background:url(../images/sprites/sitemap_ball.png) no-repeat;
}
#sitelinks #bio {
background:url(../images/sprites/sitemap_ball.png) bottom;
float: left;
height: 32px;
width: 32px;
margin-top: 10px;
line-height: 32px;
position: absolute;
left: 462px;
top: 497px;
margin-left: 20px;
color: #FFF;
}
#sitelinks #bio a {
width:32px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #bio a:hover{
color:#02acfa;
}
#sitelinks #protryouts {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
float: left;
height: 32px;
width: 65px;
margin-top: 10px;
line-height: 32px;
position: absolute;
left: 617px;
top: 453px;
color: #FFF;
}
#sitelinks #protryouts a{
width:65px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #protryouts a:hover {
color:#02acfa;
width:65px;
height:32px;
background-position:center top;
}
#sitelinks #teams {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
line-height: 32px;
position: absolute;
height: 32px;
width: 40px;
margin-top: 10px;
float: left;
left: 706px;
top: 487px;
}
#sitelinks #teams a{width:40px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #teams a:hover {color:#02acfa;
width:40px;
height:32px;
background-position:center top;
}
#sitelinks #formerplayers {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 90px;
margin-top: 10px;
float: left;
position: absolute;
left: 618px;
top: 522px;
line-height: 32px;
}
#sitelinks #formerplayers a {
width:90px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #formerplayers a:hover {
color:#02acfa;
width:90px;
height:32px;
background-position:center top;
}
#sitelinks #formercoaches {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 101px;
margin-top: 10px;
float: left;
position: absolute;
left: 480px;
top: 578px;
line-height: 32px;
font-size: 12px;
}
#sitelinks #formercoaches a {width:90px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #formercoaches a:hover {color:#02acfa;
width:90px;
height:32px;
background-position:center top;
}
#sitelinks #news {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 40px;
margin-top: 10px;
float: left;
position: absolute;
left: 828px;
top: 424px;
line-height: 32px;
}
#sitelinks #news a {width:40px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #news a:hover {color:#02acfa;
width:40px;
height:32px;
background-position:center top;
}
#sitelinks #gallery {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 50px;
margin-top: 10px;
float: left;
position: absolute;
left: 704px;
top: 610px;
line-height: 32px;
}
#sitelinks #gallery a {width:50px;
height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #gallery a:hover {color:#02acfa;
width:50px;
height:32px;
background-position:center top;
}
#sitelinks #videos {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 50px;
margin-top: 10px;
float: left;
position: absolute;
left: 867px;
top: 559px;
line-height: 32px;
}
#sitelinks #videos a {height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #videos a:hover {color:#02acfa;
width:50px;
height:32px;
background-position:center top;
}
#sitelinks #contact {
background:url(../images/sprites/sitemap_ball.png) no-repeat center bottom;
height: 32px;
width: 50px;
margin-top: 10px;
float: left;
position: absolute;
left: 915px;
top: 654px;
line-height: 32px;
}
#sitelinks #contact a {height:32px;
display:block;
font-size:14px;
text-align:center;
color:#FFF;
}
#sitelinks #contact a:hover {color:#02acfa;
width:50px;
height:32px;
background-position:center top;
}
#sitelinks #sitemap {
float: left;
height: auto;
width: 100px;
margin-top: 10px;
margin-left: 10px;
}
#brcopyright {
float: left;
height: 14px;
width: 215px;
clear: right;
font-size: 10px;
}
#legal {
float:left;
font-size:10px;
height:14px;
margin-right: 10px;
margin-left: 10px;
text-decoration: none;
}
#email {
float:left;
font-size:10px;
height:14px;
margin-right: 10px;
margin-left: 10px;
width: 40px;
}
#sitemap {float:left;
font-size:10px;
height:14px;
margin-right: 10px;
margin-left: 10px;
width: 40px;
}
#kip {
float:left;
font-size:10px;
height:14px;
margin-right: 10px;
width: 120px;
}
most of the time css can provide fixes with it... try to use a master stylesheet, and put it on your page's header before any other styles that you have created.. at least it will minimize your frustration for having your webpage look different on different browsers... you can search it with google (reset.css or master stylesheet).. have you tried your webpage with IE?
Yes I use a rest in my css and IE is ok just Firefox always creates problems... NOT A FAN OF FIREFOX..
same problem with me...
my link http://techfest12.malwagwalior.com plz help me i feel too frustrated because of this....
master.css (http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/) and reset.css (http://meyerweb.com/eric/tools/css/reset/ ) dosent work
What I am not understanding is that FIREFOX is the only browser that is improperly displaying the text in my footer...
Any help?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.