Website Design Help

**JamesU2002** · 10th February 2006, 08:21 AM

I am developing a website for a friend of mine and I have so far created a basic front-page.

It works fine in IE but surprise, surprise problems in Firefox.

Here is the link:

http://www.wellingunited.com/ucteam2/ch05_eg14.html

Here is the link for the CSS:

http://www.wellingunited.com/ucteam2/ch05_eg14.css

The problem seems to be with the height/widths of the divs. I realise it is very petty but I want the divs to line up in IE and Firefox.

Does Firefox recognise different height/width codes?

Thanks

**RFH Reseller: AntonyG** · 10th February 2006, 08:37 AM

I've not looked at your code in too much detail, but you are blaming the wrong browser for causing problems. Internet Explorer is the one displaying the page incorrectly. Firefox follows web standards and is far more advanced than (the current release of) Internet Explorer.

To be sure that the CSS is going to work as well as you expect, you should validate your HTML first: http://validator.w3.org/check?verbos...ch05_eg14.html
Missing and wrongly ordered tags will cause display problems in many browsers.

**JamesU2002** · 10th February 2006, 08:40 AM

Maybe I should reword my post.

What I really mean is that the display in IE is what I want it to look like, whilst in Firefox the divs are very slighlty not aligned properly.

**RFH Reseller: AntonyG** · 10th February 2006, 08:44 AM

Nope, I understood you perfectly. Maybe I should reiterate mine - IE is wrong, Firefox is right.

**JamesU2002** · 10th February 2006, 08:49 AM

No problem, either way I don't know where to start.

I had a look at the validator and there's nothing there that seems to affect my problems.

**RFH Reseller: Wise Webs** · 10th February 2006, 09:01 AM

Originally Posted by AntonyG

Nope, I understood you perfectly. Maybe I should reiterate mine - IE is wrong, Firefox is right.

I think what he is asking is that even though IE is displaying it 'incorrectly', the actual visual display that IE shows is what he is ultimately after.

Maybe the question should be how do I change my code to look like the IE display when viewed in Firefox.

**JamesU2002** · 10th February 2006, 09:03 AM

Here, Here!

We got there eventually

So does anyone have a clue?

**RFH Reseller: nick** · 10th February 2006, 09:21 AM

I think what you are seeing here is a classic sign of IE not calculating the padding of div tags correctly. IE will not add the padding to the width you specifiy, compliant browsers will add the padding. so a div width 100px and padding 10px in IE would become 100px wide, but in FF would be 110px wide.

____
EDIT
just changed it, as I original said it the wrong way round

**JamesU2002** · 10th February 2006, 09:28 AM

Ok thanks, is there anyway I can fix this issue?

**RFH Reseller: nick** · 10th February 2006, 09:43 AM

I'm on the road right now, so I haven't been able to test this (don't have a PC with IE). It was the borders that seem to be causing the problems.
This might not work.

Code:

/* CSS Document */

div#navigation {
  float:left;
  width:158px;
  height:400px;
  color:#ffffff;
  background-color:#D3D3D3;
  border:2px solid #FFFFFF;
  padding:5px;}
*html div#navigation {
    height:404px;
}

* html div#navigation {
width:158px;
w\idth: 158px;}

div#content {
  margin-left:185px;
  width:604px;
  height:400px;
  background-color:#D3D3D3;
  border:2px solid #FFFFFF;
  padding:5px;}

*html div#content {
    width:600px;
}