[SOLVED] Firefox Display Issue with my CSS design

winnard2007 · #1 Nov 2nd, 2007, 14:21

Hi,

I am re-designing our website and have done a design which is exactly how i want it to look.

However i have been testing the display in IE and it is fine.

I have however just opened it up in Firefox and the design is aligned to the left for some reason and has completely knackered the design.

Can anybody solve my problem.

Here is the CSS

Code: Select all

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
background:#ccc url(images/gbyrepeat.jpg) repeat-y center;
}
.container{
width:800px;
margin:5px;
background:#fff;
border-right:3px solid #ededed;
border-left:3px solid #ededed;
}
.navbg {
background:url(images/navbg_02.gif) repeat-x center;
width:100%px;
height:30px;
border-bottom:2px solid #fff;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
}
.banner{
height:130px;
width:800px;
}
.bannerontop{
background:url(images/index_header.jpg) no-repeat center;
height:227px;
text-align:center;
}
.content{
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.leftcolumn{
width:273px;
padding-left:9px;
padding-bottom:20px;
background: #F1F1F1;
float:left;
text-align:left;
}
.rightcolumn{
width:503px;
float:right;
text-align:justify;
padding-right:10px;
}
h2{
background:url(images/leftcolumnheader_21.gif) center no-repeat;
font-weight:bold;
text-align:center;
font-size:11px;
color:#ffffff;
margin:0;
padding-top:14px;
padding-bottom:14px;
}
.clear{
width: 100%;
height: 1px;
margin: 0 0 -1px;
clear: both;
}
.nav
{
width: 90%;
margin-left:5%;
font-size: 11px;
padding-bottom:10px;
padding-top:5px;
text-align: center;
}
ul.navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
ul.navlist li
{
display: block;
margin: 0;
padding: 0;
}
ul.navlist li a
{
display: block;
width: 90%;
font-weight:normal;
margin:0;
color: #000;
background:url(images/leftnav.jpg) repeat-x #ededed;
border:bottom:1px solid #ededed;
text-decoration: none;
PADDING-LEFT:10PX;
padding-top:7px;
padding-bottom:7px;
}
.nav>ul#navlist li a { width: auto; }
ul.navlist li#active a
{
background: #F1F1F1;
color: #2A508A;
}
ul.navlist li a:hover, ul#navlist li#active a:hover
{
color: #000;
font-weight:bold;
background: #fff;
}
h3{
font-size:17px;
color:#97BE0D;
font-weight:bold;
text-align:left;
margin:0;
width:100%;
border-bottom:1px solid #ededed;
}
.blockquote {
width: 400px;
margin: 0px;
padding: 30px;
float:right;
background-image:url(images/quoleft.gif);
background-position:top left;
background-repeat:no-repeat;
}
blockquote p {
font-family:"Georgia", Times New Roman, Times, serif;
font-size:14px;
color:#999999;
}
blockquote a {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#97BE0D;
}
.info{
padding-top:5px;
padding-bottom:5px;
background:url(images/inforepeat_25.gif) repeat-y left;
padding-left:20px;
margin:0;
color:#666;
font-size:10px;
margin-bottom:5px;
}
.maincontent{
padding-left:5px;
padding-right:5px;
}
a:link {
color: #97be0d;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a {
font-weight: bold;
}
.footer{
width:100%;
height:20px;
background:url(images/navbg_02.gif) repeat-x;
padding-top:10px;
position:relative;
clear:both;
text-align:center;
color:#fff;
}
.footer a:link{
color:#fff;
font-size:10px;
}
.footer a:visited{
color:#fff;
font-size:10px;
}
.footer a:hover{
color:#CCC;
font-size:10px;
}

If anybody can help solve this issue and maybe help me understand what it was i did wrong. Then please please help.

Thanks in advance

Dan

Marc · #2 Nov 2nd, 2007, 15:18

Have you got any HTML. Also have you got this hosted anywhere?

Cheers,

winnard2007 · #3 Nov 2nd, 2007, 15:36

hi

Here is the html.

HTML: Select all

<!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=iso-8859-1" />
<title>DCT Marketing Ltd - Inspiration Above Everything</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="navbg"></div>
<div class="header">
  <div class="bannerontop"></div>
  <div class="content">
    <div class="leftcolumn">
      <h2>Our Services</h2>
   <div class="nav">
<ul class="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Virtual Brochures</a></li>
<li><a href="#">Printing</a></li>
<li><a href="#">Domain Names &amp;Hosting</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</div>
<h2> Other Information </h2>
<div class="nav">
<ul class="navlist">
<li><a href="#">Job Vacancies</a></li>
<li><a href="#">Our Sister Sites</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Terms &amp; Conditions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
    </div>
 <div class="rightcolumn">
   <h3>Welcome to DCT Marketing Ltd</h3>
   <div class="info">web design, graphic design and printing solutions for your business</div>
   <div class="maincontent">
     <p>Welcome to DCT Marketing Ltd, Web Designers in Blackpool, providing affordable <a href="webdesign.html">web design</a> for businesses in the Blackpool area. We also provide <a href="graphicdesign.html">graphic design</a> in Blackpool, from logo design, leaflets, magazines, business cards and business stationary.</p><p>We also produce high spec online Virtual Catalogues to help reduce your businesses carbon footprint.</p><p> If your looking for a an Web site, whether it be a simple web presence or a web site with full shopping cart facilities, then DCT Marketing Ltd can produce web sites that meet your needs and budget.</p>
     <p>We provide our clients with imaginative designs and pride ourselves on offering a friendly, courteous staff with great ideas and design flair at affordable prices.</p>
     <p>&nbsp;</p>
     </div>
  <h3>What Our Clients Say </h3>
   <div class="info">testimonials from some of our clients.</div>
   <div class="blockquote">
   <blockquote>
     <p>You truly captured our ideas and turned them into reality. We now have a great selection of stationery and logo thanks to you guys. Thank you so much.</p><p> I was so impressed with the efficiency or your design department, so much planning, but was pushed through to my tight deadline. I now have a site I am truly proud of.</p><p> I will be recommending you to my friends to let them know how great you guys are.</p></blockquote>
     </div>
   </div>
  </div>
<div class="footer"><a href=" Marketing Ltd 2008</a></div>
</div>
</div>
</body>
</html>

Here is the link to where it is hosted

http://www.sixstringworld.com/layout...ng2/index.html

If you can figure it out that would be great.

I am not highly proficient in CSS yet, so it could be something simple.

Cheers Dan

By the way when opened in IE it should be centered to the middle of the page, in Firefox it is all over the place.

Marc · #4 Nov 2nd, 2007, 15:47

Ive had a play about with your code and found if you add this to your CSS:

Code: Select all

div, body {
margin: 0 auto;
}

I have tested in Firefox and this works although not in IE.

Cheers,

winnard2007 · #5 Nov 5th, 2007, 09:08

Hi Marc,

Cheers for the code, it works spot on.

Your a legend thanks

Dan

Marc · #6 Nov 5th, 2007, 15:20

Everyone says that

Since the problem is solved, can you please go into Thread Tools -> Mark Thread as Solved

Cheers,

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Firefox Display Issues	marytery	Starting Out	6	Oct 5th, 2007 20:24
CSS Layout issue between IE and Firefox	macu	Web Page Design	2	Aug 22nd, 2007 13:14
Form Display Issue	RichieRichR6	JavaScript Forum	4	Apr 18th, 2007 17:32
Display issue on Opera	QuikFrozen	Web Page Design	4	Jan 6th, 2007 01:56
display problem with firefox	sebesst	Web Page Design	6	Jan 9th, 2006 04:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Firefox Display Issue with my CSS design