Forum Moderators: not2easy
I tried to fix the problem for IE 6 this morning, and was successful. I fixed it by changing all the margins to padding instead, and fixed some div errors etc.
Now when I run it, it's fine on IE 6 and 7, but now not in Firefox and Safari. Now on firefox and safari, the content on the homepage all shifts to the left.
Please let me know if you have any advice for me. I have tried to keep the content of the coding below to a minimum, but I arent sure if I have highlighted the correct area of css/html where the problem is forming.
Thanks.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
#content {
padding:15px 0px 0px 20px;
width: 800px;
margin: 0 0 0 0;
text-align:left;
}
<div id="content">
-----------------------------------
-----------------------------------
All site content below the navigation bar is within this
-----------------------------------
-----------------------------------
</div>
</body>
</html>
Please view this screen shot to see the problem:
[img471.imageshack.us...]
[edited by: Rick800 at 11:33 am (utc) on Sep. 17, 2007]
Why are you using a XHTML doctype? It may be beneficial for you to read the thread on selecting the proper doctype [webmasterworld.com]. A lot of people have been quick to use or change over to a XHTML doctype, but most of those should not. XHTML is intended to be used with XML data and is not the next evolution of HTML doctypes. In short, do not waste your time trying to conform to something you do not need.
Last, while the screen chot is nice, the only way to review the problem is if you post ALL relevent CSS and HTML. From what I can see, I suspect the margin issue, which you can shortcut to margin: 0;, but that is besides the point. However, if you are using 'float' that can cause a problem too. So I suggest posting the code.
Marshall
HTML for Index page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vinyl Cut Europe</title>
<meta name="keyword" content="vinyl, cut, vinyl cut, refine printers, refine cutters, artcut software, signcut software"/>
<meta name="description" content="Vinyl Cut are ‘Official Importers’ of the Refine range for the UK, France and Spain."/>
<meta name="robots" content="all"/>
<link rel="stylesheet" type="text/css" href="vinylcut.css" />
</head>
<body>
<div id="container">
<div id="masthead">
<img src="images/logo.jpg" alt="Vinyl Cut Europe" width="269" height="70" id="logo" />
<p>
<span id="bold">Contact Us</span><br></br>
Tel: 0845 388 3495 UK Sales<br />
Email: <span class="productrange"><a href="mailto:sales@vinyl-cut.co.uk">sales@vinyl-cut.co.uk</a></span><br></br>
</p>
</div>
<div id="navigation">
<ul>
<li class="currentpage"> <a href="index.htm" >Home</a></li>
<li> <a href="refinedcrange.htm">Refine DC Range</a></li>
<li> <a href="refinemhrange.htm">Refine MH Range</a></li>
<li> <a href="refinelasercutters.htm">Refine Laser Cutters</a></li>
<li> <a href="artcut.htm">Artcut Software</a></li>
<li> <a href="http://vinylcuteurope.proboards76.com/">Forum</a></li>
<li> <a href="contact.aspx">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="introduction">
Welcome to <span id="introductionblue">Vinyl Cut Europe</span><br></br>
<span id="normal">Direct Importers of Sign making machines.</span>
</div>
<img src="images/topbar2.jpg">
<div id="box1">
<span id="bold">
View our Product Range
</span>
</div>
<div class="clear">
</div>
<div id="productrangeleft">
<p>» <span class="productrange"><a href="refinedcrange.htm">Refine DC Range</a></span></p>
<p>» <span class="productrange"><a href="refinemhrange.htm">Refine MH Range</a></span></p>
</div>
<div id="productrangeright">
<p>» <span class="productrange"><a href="refinelasercutters.htm">Refine Laser Cutters</a></span></p>
<p>» <span class="productrange"><a href="artcut.htm">Artcut Software</a></span></p>
</div>
<div class="clear">
</div>
<div id="maincontent">
Vinyl Cut are “Official Importers” of the Refine sign making machinery for the UK, France and Spain. We offer discount vinyl cutters direct to the general public and distribute our products by mail order, next day dispatch, via DHL.
<p><br></br></p>
Our products are globally recognised for excellence and we only sell the highest quality machines.
<p><br></br></p>
Not only do we offer vinyl cutters, we also stock Artcut and Signcut Software and carry large quantities of spare parts and consumables for the vinyl cutters.
</div>
<div class="clear">
</div>
<p class="credits">Credits: <a href="http://www.prostylerdesigns.co.uk" target="_blank">Website Development</a> and <a href="http://www.prostylerdesigns.co.uk" target="_blank">Graphics</a></p>
</div>
</div>
</body>
</html>
CSS
* {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
text-align:center;
background-color:#FFFFFF
}
#container {
background: url('images/mainbg.jpg') repeat-y center top;
}
#masthead {
width:800px;
height:100px;
margin:0 auto 0 auto;
}
#navigation {
background: url('images/bluebar.jpg') repeat-x top;
width: 800px;
height: 30px;
margin: 0 auto 0 auto;
}
#content {
padding:15px 0 0 0;
width: 800px;
margin: 0 auto 0 auto;
text-align:left;
}
.clear {
clear:both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#bold {
font: normal normal bold 11px/1.25em Verdana;
color: #000000;
}
#normal {
font: normal normal normal 11px/1.25em Verdana;
color: #000000;
}
/*-------------------------Masthead------------------------------*/
#logo{
float: left;
margin: 16px 0 0 16px;
}
#hvca {
float: right;
margin: 20px 25px 0 16px;
}
#masthead p {
font: normal normal normal 11px/1.25em Verdana;
color: #000000;
float: right;
width: 200px;
margin: 25px 0 0 0;
text-align: left;
}
/*-------------------------Navigation------------------------------*/
#navigation ul {
float:left;
margin:0;
padding:0;
list-style:none;
width:800px;
}
#navigation ul li {
float: left;
}
#navigation ul a {
font: normal normal bold 10px/30px Verdana;
color: #ffffff;
display: block;
padding: 0 1.5em 0 1.5em;
text-decoration: none;
border-right: 1px #ffffff solid;
}
#navigation ul a:hover{
background-image:url(images/navhover.jpg);
background-color:#FFFFFF;
color:#000000
}
#navigation ul .currentpage a {
background-image:url(images/navhover.jpg);
background-color:#FFFFFF;
color:#000000;
}
/*---------------------------Home-----------------------------*/
#introduction {
font: normal normal normal 18px Verdana;
color:#000000;
padding: 0 1.5em 30px 20px;
}
#introductionblue {
font: normal normal normal 18px Verdana;
color:#0062AE;
}
.boxcontainer {
margin: 0 18px 0 18px;
height: 100px;
}
#topbox {
margin: 0 0 12px 20px;
}
#topbox img {
}
#box1 {
margin: 5px 16px;
padding: 0px;
text-align: left;
float: left;
width: 200px;
height: 14px;
}
#productrange {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: left;
float: left;
width: 200px;
height: 11px;
}
#productrangeleft {
margin: 0px 0px 0px 50px;
padding: 0px;
text-align: left;
float: left;
width: 125px;
height: 22px;
}
#productrangeright {
margin: 0px 400px 0px 0px;
padding: 0px;
text-align: left;
float: right;
width: 200px;
height: 22px;
}
.productrange a {
font: normal normal normal 11px/11px Verdana;
color:#0062AE;
text-decoration:none;
}
.productrange a:hover {
text-decoration:underline;
}
#maincontent {
font: normal normal normal 11px/1.25em Verdana;
color: #000000;
margin: 5px 16px;
padding: 40px 0px 0px 0px;
text-align: left;
float: left;
width: 600px;
height: 250px;
line-height: 20px;
}
#maintext {
font: normal normal normal 11px/1.25em Verdana;
color: #000000;
float: right;
width: 500px;
margin: 15px 100px 0px 0px;
text-align: left;
line-height: 20px;
}
I did try the validation thing to check for erros, but only brought back things like the alt tags on the images etc. Nothing that I could see causing the problem.
[edited by: Rick800 at 12:56 pm (utc) on Sep. 17, 2007]
* {
margin:0px;
padding:0px;
}
By using this, you are clearing ALL default settings, including <p>. Have you tried eliminating it and see what happens?
Marshall
I wondered why my p tags werent taking any effect... Hence all the <br></br> tags to separate paragraphs! :D
Thanks for the help so far,
I am right in saying that this isn't the problem to why the content is shifting to the left in IE 6 though?
If you could look into it further, later on, that would be much appreciated.
Thanks for the help so far.
Ricky
THANKS
Marahll
#productrangeleft {
margin: 0px 0px 0px 50px;
padding: 0px;
text-align: left;
float: left;
width: 125px;
height: 22px;
}
#productrangeright {
margin: 0px 400px 0px 0px;
padding: 0px;
text-align: left;
float: right;
width: 200px;
height: 22px;
}
To this:
#productrangeleft {
margin: 0px 0px 0px 50px;
padding: 0px;
text-align: left;
float: left;
width: 125px;
height: 22px;
}
#productrangeright {
margin: 0px 400px 0px 0px;
padding: 0px;
text-align: left;
float: left;
width: 200px;
height: 22px;
}
Thanks very much for your time though Marshel, very much appreciated.
Ricky
