css bug - please help

[SooTyLaD]

hey peeps:

i'm just about getting to grips with css but dont yet have enough knowledge to get the bugs out...

here is the page:

http://rdeurotech.odysseydesigns.com/holding.htm

and the css:

http://rdeurotech.odysseydesigns.com/css.css

when viewed in internet explorer its all ok but in firefox the "At" from "At R&D Eurotech we are comitted..." is at the right hand side of the images...

anyone know how to fix it and if possible why it is doing that for future reference?

also, dont suppose anyone could tell me why the layout is marginally different in both browsers? surely that doesnt bode well for more accurate layouts?

many many thanks to anyone who can help

 

[Al Vallario]

I am going to jump to a conclusion here and guess that it is the usual box model issue, in which IE6 adds padding to the width of elements. Therefore, in IE6 the 10px padding on each list item adds up so that the combined width of the unordered list is such that there is no space for additional content to the right. Additional content flows right on in other browsers, I assume, because the list items are floated.

A quick and easy fix for this would be:

div#promise {
  [b]clear: both;[/b]
  margin-top: 40px;
  }

That essentially means that div#promise will refuse to be placed alongside another element.

If you are unhappy with that solution, there are various box model hacks (a quick Google will reveal a number of these) which would make it so Internet Explorer behaves like other browsers (and consequently you will want to change the CSS so other browsers behave like Internet Explorer does at the moment; adjusting width/padding). This would produce messier code, but would allow for more flexibility if you would like to place other elements under the list at a later date without having to add in the above clear declaration. There is also the issue that IE7 will not accept these hacks, and there is a chance the IE team will not fix the underlying box model issue (although I may be wrong on this).

av.

P.S. Very nice site, and very nice code!

 

[RandomTom]

I think he's hit the nail on the head that I would have suggested with the "clear: both;" property. I really like the colour scheme of that website, and it all works well but just a question; you're not catering for the 800x600 market with that website then?

 

[Augmented]

Just clear: left; will do - no point trying to clear something that's not there.

also, dont suppose anyone could tell me why the layout is marginally different in both browsers? surely that doesnt bode well for more accurate layouts?

A number of reasons. First, and often the most obvious differences are caused by each browser's internal stylesheet. This is the one that defines how elements should look by default e.g. <h1> elements will display significantly larger than <h4>s. The biggest issue with this is with the default margin and padding set on many elements, as these contribute to many layout inconsistencies between browsers. Many devs reset the margin and padding for all elements to 0 before they start developing a site so that, at least in that respect, all browsers start off on the same footing. This is the 'universal reset' (since it uses the universal selector - *):

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

The other reason is simply down to different rendering engines Trident (IE) vs. Gecko (Fx) vs. Webkit (Safari) and so on. There little you can do to protect yourself from that other than by exploiting bugs in each engine parser so that you can supply a rule that only that engine will understand and use - see CSS hacks.

There is also the issue that IE7 will not accept these hacks, and there is a chance the IE team will not fix the underlying box model issue (although I may be wrong on this).

The box-model was fixed five years ago in IE6 .

There's no need to use box-model hacks any longer unless you're either providing legacy support for IE5 browsers or are knowingly putting your document into quirks mode in IE6. The incorrect box model only exists in IE6 for backwards compatibility; hence only appearing in quirks mode. The OP site certainly doesn't need any box-model hacks for IE6, being that it's using a Strict doctype.

 

[Al Vallario]

The box-model was fixed five years ago in IE6 .

There's no need to use box-model hacks any longer unless you're either providing legacy support for IE5 browsers or are knowingly putting your document into quirks mode in IE6. The incorrect box model only exists in IE6 for backwards compatibility; hence only appearing in quirks mode. The OP site certainly doesn't need any box-model hacks for IE6, being that it's using a Strict doctype.

I must be going mad

Well, Augmented to the rescue once again