18 replies [Last post]
adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

Hi I have a problem, I have been designing a website using css and dreamweaver, it appears fine in IE, but inbetween or tables, ie header and sidebar is a gap in firefox, and the same thing happens with the sidebar and footer... I know its a common problem but as you can see its 1am and im still scratchin my head

If it helps here is the website code

<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<!--CONTAINER STARTS-->
<div id="container">
<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="/" title="Fitz Will Fix IT">Fitz Will Fix IT</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
 <!--NAVIGATION STARTS-->
  <div id="navigation">
    <ul class="nav-links">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="services">services</a></li>
      <li><a href="#" title="contact">portfolio</a></li>
      <li class="borderx2"><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
  <!--NAVIGATION ENDS-->
 
</div>
 
  <!--HEADER/NAVIGATION ENDS-->
  <!--WELCOME AREA STARTS-->
  <div id="welcome"> <!--WELCOME TEXT STARTS-->
    <div id="welcome-text">
 <h2>If you have any queries feel free to contact us</h2>
    <p>Contact No. 0204473272</p>
    <p>Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%62%72%6f%64%73%6a%64%73%64%40%67%6f%6f%67%6c%65%2e%63%6f%6d%22%3e%61%62%72%6f%64%73%6a%64%73%64%40%67%6f%6f%67%6c%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></p>
 
      </div>
  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
<!--<div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
 
<!--WELCOME AREA ENDS-->
 <!--SEPARATOR STARTS-->
  <!--<div class="separator">&nbsp;</div>
  <!--SEPARATOR ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    <h3>lorem ipsum dolor</h3>
    <ul class="sidebar-list">
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
    </ul>
</div>
<!--SIDEBAR ENDS-->
 
  <!--CONTENT STARTS-->
 
<div id="content">
  <h2>&nbsp;</h2>
  <h2>About Our Business</h2>
<p>We provide a full range of products and services to tailor for any situation for <br />
  both Business and Home..</p>
  <p>Our services are second to none from pc repair to complete network design and<br />
implementation. All of our engineers are fully experienced and <br />
Microsoft Certified.</p>
  <p>We have been in the industry for over 10 years and do not charge for basic <br />
    advice or quotations so what have you got to lose? With Surrey I.T. Solutions,<br />
    even a small company can have access to highly-skilled people without the <br />
    expense of maintaining a large in-house IT department..</p>
</div>
   <!--CONTENT ENDS-->
  <!--FOOTER STARTS-->
<div id="footer">
   <p>Copyright</p>
</div>
  <!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->

And here is the CSS

 /* BEGIN RESET CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0; 
padding: 0; 
border: 0; 
font-weight: normal; 
font-style: normal; 
font-size: 100%; 
line-height: 1; 
font-family: inherit; 
text-align: left
} 
 
table {
border-collapse: collapse; 
border-spacing: 0
} 
 
ol,ul {
list-style: none
}
 
q:before,q:after,blockquote:before,blockquote:after {
content: ""
}
/* END RESET CSS */
 
/** {
	margin: 0px;
	padding: 0px;
	border: none;
	height: auto;
	width: auto;
}
*/
 
body {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #c8c8c8;
  margin-left: 15%;
  margin-right: 10%
}
#container {
  margin: auto;
  width: 850px;
}
#top {
  float: left;
  width: 850px;
  height: 122px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
 
#navigation { float: right; }
.nav-links li {
  display: block;
  float: left;
  list-style-type: none;
}
.nav-links li a {
  float: left;
  width: 120px;
  height: 122px;
  text-decoration: none;
  text-transform: capitalize;
  color: #666666;
  font-size: 12px;
  text-align: center;
  padding-top: 51px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #cecece;
}
.nav-links li a:hover {
  color: #00284a;
  background-image: url(images/nav_hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
}
li.borderx2 {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #cecece;
}
 
#welcome {
  float: left;
  width: 850px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 228px;
  padding-top: 40px;
}
h2 {
	text-transform: none;
	color: #000;
	font-size: 12px;
	margin-bottom: 15px;
	font-family: "Times New Roman", Times, serif;
}
.heading-color2 { color: #9a9a9a; }
#welcome-text {
  width: 300px;
  line-height: 18px;
  padding-top: 50px;
  float: right;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
 
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}
 
  #sidebar {
  float: left;
  height: 756px;
  width: 209px;
  background-image: url(images/contentbox.png);
  background-repeat: no-repeat;
  margin-top: 0px;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
h3 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
/*.sidebar-list li {
	list-style-type: none;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(images/bulletpoint.png);
	background-repeat: repeat-x;
	background-position: bottom;
}*/
 
#content {
	float: right;
	width: 550px;
	text-align: justify;
	color: #000;
}
/*#content p { margin-bottom: 10px; }*/
 
#footer {
  float: left;
  width: 850px;
  height: 94px;
  background-image: url(images/footer.png);
  background-repeat: repeat-x;
  padding-top: 25px;
  text-align: center;
}

Thnx in advance Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

maybe you can provide a link?

maybe you can provide a link?

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

Hi thnx for the reply, here

Hi thnx for the reply, here is a screenshot of how it should look in IE8
http://img96.imageshack.us/img96/5692/websiteie.jpg
and here is how it looks in firefox

http://img693.imageshack.us/img693/631/websitefirefoxjpg.jpg

I can upload a zip, with all of the current files if that would help but any ideas as to what upload site to use would be much appreciated.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Have you got a Doctype? If

Have you got a Doctype? If not, please read up on it in the 'How to' forum.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

I have now got a doc type,

I have now got a doc type, and im tidying up my code according to doc type as we speak... I think Puzzled , but whats happened is the same thing has now happened in IE with the borders, so now its a universal problem, so I want to say its a css issue, but I have no idea where to start looking. Sad

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

CupidsToejam wrote: maybe you

CupidsToejam wrote:

maybe you can provide a link?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

Hi ermmm... so i have been

Hi ermmm... so i have been messing around with doc type and things and now its messed up, but heres a before zip of the website, when it worked Oups
http://www.mediafire.com/file/mg5mkwn2nmt/portfolio.zip

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

really, a zip file. Anybody

really, a zip file. Anybody with any sense will not download from untrusted sources. Just give us a link, there are plenty of free hosting services out there.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

so I want

adbro wrote:

...so I want to say its a css issue, but I have no idea where to start looking. Sad

Precisely. And Cupid and Deuce - who DO know what they're doing - have both asked you to provide a link to your website. They are trying to help you while blindfolded.

NOTE: a .jpg is no good in this case and no one here is going to download files from strange places.

The guys want a LIVE LINK so they can see for themselves in real time just what is going on. With the likes of Firebug they can then try changes and prove they fix the problem before telling you what to change.

Please. Make it easy for them to help you. Provide a live link. AND validate your code.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

loooooool... wow Im sorry,

loooooool... wow Im sorry, but so far they have only made things even worse... but ill try again, thnx for the advice Wink

edit:

http://ab-yes.50megs.com/

here is a really early version but the problem hasnt changed much, any ideas? help much appreciated Smile

edit again:

I know how this sounds... and im sorry... by "they" I was actually referring to free webhosting sites, which have only made the website look even worse...

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

On the contrary,

On the contrary, "they" have not done anything except ask you for a link. I was the one who told you to get a doctype and "mucked it up".

If you want to work with this online version, fine.

DO NOT give us this code to debug and then make the changes suggested to a COMPLETELY DIFFERENT FILE.

Either view>source and copy this old code back to the current files you are working on locally OR load your current local files to the server - any other way lies madness for everyone.

After you have decided which version you are working on and got your local and server-side files in synch:
Make sure it has a 4.01 Strict doctype
and then VALIDATE IT!.

I am just running around the edges trying to get you to the point where someone who can debug VALID code is not wasting their time - as things stand nothing/no one is going to help you until you help yourself.

Sorry if that sounds harsh or a lot of work, but there you go...contrary to poplar myth, designing a website actually isn't a 105-minute exercise for any but the very experienced.

After all...if you knew how to fix it, you wouldn't have come here in the first place now would you? Wink

Cheer up - it is fixable Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I took the chance of

I took the chance of downloading the file... Sad the validation errors are probably due to the free host (like most).

The problem is the height of the #welcome div. It's set to a height of 228px (which corresponds to the height of the background image), but then 40px of top-padding are also added. You need to deduct the padding from the height, making it 188px. This is how the box model works. It worked in IE without the doctype because IE was in quirks mode and used an incorrect box model.

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

I just want to say thank you

I just want to say thank you very much wolfcry, I would never ever have realised that, and I also want to say thank you to smee you talk a lot of truth for a web dude, but im a quick fix kinda guy, and I loved wolfcry's reply sooo much better Tongue jus kiddin, constuctive critisism always helps, but if you saw my expression after reading your comment, and then watched it change after reading wolfcry's you would understand. A lil summin like this Puzzled Sad Stare Love Party I would also like to thank everyone else who reply'd to my thread... until the next problem arises...

Merci beacoup mon neuveux webdesign ami's

(As you can probably tell... im a very happy guy atm)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

did he say hes a very happy

did he say hes a very happy guy, so he's going to the ATM? Or he's telling the ATM he's a happy guy? Big smile

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

I most certainly did, and I

I most certainly did, and I dont get it Sad but if your suggesting I pay him.... oooops Oups , LOOOOOOOOOOOOL Big smile im also 16 so you know atm (at the moment), Im guessing you have not been 16 for a while Tongue only kidding Wink

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

oh, thats what you meant by

oh, thats what you meant by atm. see we older guys didnt really get too much into shorthand communication like lmao, rolf, tgif, lol, ty, blah blah blah. It takes too much energy to try and remember all that.
Tired

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

adbro wrote: I just want to

adbro wrote:

I just want to say thank you very much wolfcry, I would never ever have realised that, and I also want to say thank you to smee you talk a lot of truth for a web dude, but im a quick fix kinda guy, and I loved wolfcry's reply sooo much better

Ah...that Wolfie's a brave man Big smile

I'm pleased he solved your problem adbro. However do realise that things like the correct doctype and meta tags are not negotiable in web design. If you don't attend to them it will only cause problems when you make the next change. A quick fix is usually a nasty fix Wink

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

adbro
adbro's picture
Offline
newbie
London
Last seen: 9 years 34 weeks ago
London
Joined: 2010-02-23
Posts: 8
Points: 11

Iv also taken your advice

Iv also taken your advice Smee, its now got a doc type set up properly and its been validated, and its working nicely, and very true a quick fix is usually a nasty fix, but after hours of adding up and taking away I think iv got this box system thingy down to a tee, and I most definately have not gone down the quick fix route... its officially kosher Wink

Quote:
I am just running around the edges trying to get you to the point where someone who can debug VALID code is not wasting their time - as things stand nothing/no one is going to help you until you help yourself.

Sorry if that sounds harsh or a lot of work...

Quote:
That was pretty emotional stuff right there, I had actually given up, just wanted you to know that... well not given up but started again... apples and oranges. Tired

And to be fair Cupid, I had no idea what TGIF meant until today, on facebook :$ (MSN embarrassed emoticon), so thats a 1UP right there Smile althou they have a T.G.I Fridays up the road... anywais, this is my new fav site... atm Wink btw what happens to the thread now?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

this thread is done since the

this thread is done since the issue is resolved. But keep coming back, I've learned so much just by reading these threads, and getting involved.