Webdesign Help

[Atomic]

I have some webspace from my ADSL ISP and have taken advantage of it by trying to get into webdesign.

I've followed a tutorial on a website to make a non fluid based website (i prefer centre based sites) and have done a very, very basic layout.

However, I have a couple of problems.

I load up my site url in IE7 and it asks me if I want to download the webpage and procedes to open up in Dreamweaver (I know I should be using notepad but for me it's easier to learn this way). In Firefox however the page does load, but has a few errors on it.

I look at the site in Dreamweaver and things look connected, but when the site is opened up there seems to be a gap between the header and nav bar (the shiny thing). This is just background of the container DIV and not sure how to fix that, and below the footer seems to be some green colour that I used as a background colour in the footer div, but that's being seen well below the footer. You will see if you view the site.

...And yes the site is very ruff...Just wanted to see if I could get a few bits to work and test before I go further.

http://www.jonpaulwild.ukfsn.org/

I don't know if some one could check the code and make sure things are okay, or just give me tips.

Thanks

 

[tsinc80697]

ensure you have this at the top of your CSS

html, body {
padding:0px;
margin:0px;
}

Ensures that all padding and margins are set to 0 unless you set them, stops any browsers from naffing things up from the start by padding things out that arent meant to have any!
Ill have a gander at everything once Im back in osx to see if I can help

 

[Atomic]

ensure you have this at the top of your CSS

html, body {
padding:0px;
margin:0px;
}

Ensures that all padding and margins are set to 0 unless you set them, stops any browsers from naffing things up from the start by padding things out that arent meant to have any!
Ill have a gander at everything once Im back in osx to see if I can help

Thanks for your help. I will put that code in when I get home from work tonight.

I've just been on the Internet on IE6 and the page loads as I expect it to be. So, must be some sort of Firefox issue, and will try that code when I get hope tonight.

 

[Tripnologist]

I've just been on the Internet on IE6 and the page loads as I expect it to be. So, must be some sort of Firefox issue, and will try that code when I get hope tonight.

As you go along and gain more experience, you'll quickly learn that most things are actually IE issues. The way it shows up in Firefox is more than likely correct for the code you used (although not always, there are a couple firefox bugs but not many). It's more likely that IE is rendering it incorrectly (even though the incorrect rendering is how you want it to look).

The general consensus is to do a layout with it looking correct in Firefox, Opera or Safari and then 'make' it work with IE. I always found it easier to do a section, test it in FF. Then IE. (The IE Tab plugin for FF is good for this) Then move on to the next section so at the end, I wouldn't have to dig through and find out what was messing IE up.

After a while, you'll just get to the point where you don't even have to check for cross browser compatibility. You'll just code in such a way that it'll work in everything.

 

[blade007]

I wish it were so simple. I did a CSS layout recently, main container div was 770px, the left hand column was 170px, so that made the right hand column 600px. Firefox does as it should, same for IE7, but IE6 put a 1 pixel gap between the divs - have never worked out why.

That sort of stuff is a complete windup.

 

[Tripnologist]

I wish it were so simple. I did a CSS layout recently, main container div was 770px, the left hand column was 170px, so that made the right hand column 600px. Firefox does as it should, same for IE7, but IE6 put a 1 pixel gap between the divs - have never worked out why.

That sort of stuff is a complete windup.

I've never had that problem. Could be because I float most of my columns.

 

[Atomic]

Hello, I'm home now and I've put that snippet of code in the CSS.

However, I've still got the same problem with Firefox. However, today it is rendering in IE& perfectly well as I intended to do.

I don't know what's wrong :/