Site looks different in IE6 and FireFox

Why does this site look different in IE6 and FireFox.

Please help me.....
www.presidentiallife.ca/demo1

The right div looks the way its supposed to in Firefox, but in IE6, its on the second line. Could this be a CSS issue?

Thank you,
Abdul R Shaikh

 

I *think* it's because your sidebar is 160px wide but the image in it is 180px wide. It's expanding to contain the image in IE6 and becoming too wide to float so it's dropping down to where there's space. It looks like you've misunderstood how padding affects the width of a div, as a rule unless you know the ins and outs it's better to use margins than padding as IE6 is less likely to freak out.

Is there a reason that each of your navigation links is in a seperate div, by the way? That was very confusing

 

Any problems involving any version of IE is always an IE issue and never a CSS issue. You are seeing the results of how a modern browser renders your markup versus an inept one.

 

Its the dreaded BOX MODEL!

See:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
http://css-discuss.incutio.com/wiki/Box_Model_Hack

 

Probably because IE6 is crap and is never updated.

 

Hello all...Thank you for replying...

I took kiramanic and Rimona's suggestions....
Kiramanic: I've made it all into one div......
Rimona: I've added the box model hack into my css

Still no luck
please take a look at
http://www.presidentiallife.ca/Demo2/

Thank you

 

Abdul,

You did not really apply the hack as it should be done.

I am a little pressed for time now but try this:

Change:

#wrapper #body1 {
width: 160px;
float: right;
padding: 20px;
height: 100%;
border-right-color: #990000;
border-left-color: #990000;
background-color: #FFFFFF;
}

to:
#wrapper #body1 {
width: 160px;
_width: 140px;
float: right;
padding: 20px;
_padding: 10px;
height: 100%;
border-right-color: #990000;
border-left-color: #990000;
background-color: #FFFFFF;
}

See what effect that has

 

Thanks.....I tried it, but no luck ...infact it looks really different in mozilla as well.....now

 

Is this code or rather junk? There are "n" numbers of use of &nbsp; to get some space between navigation items. With the use of list items <ul><li> and styling list items with css you could achive your navigation easily.

Just do a Google search "pure css horizontal menu" will throw you thousand of tutorials/tips. If you are insterested, I have a simple CSS menu tutorial at my blog http://inspirationsunlimited.co.in/web-design/pure-css-horizontal-menu/, this also includes the source file; if you wat you can take a look. A little tweak to the css you can have menu as you like. And anytime you have issues you can contact me or post your issues at DP forum.

And please try moving from table based design to div based design.

 

google internet explorer css-hacks to have specific instructions for ie

 

Hello All,

Thank you for the replies...

My skills with HTML and CSS have been brushed off, the last time I did this was about 5 years ago.

radiant_luv: Thank you for the helpful links.......I was able to make the coding look a bit better......

Please take a look @ www.presidentiallife.ca/Demo2

Thank you,
Abdul R Shaikh