Hello:

I just finished a re-vamp of my webiste and upgraded it to a CSS design.
It is working and showing fine in IE7, Firefox, Opera etc. but when I view it in IE 6 it is dropping my last box (E-Marketing Strategies) to the next line.

I have searched through my coding with a fine tooth comb, but can not see where I went wrong. Can anyone help?

Here is the link: http://www.inlightwebdesign.com


Thank you!
Dianna

Hi

I couldn't see anything to do with what you mentioned but I am sure LadyinRed or someone with more experience will know more.

I may be wrong but the only problem I can see is this

#dropmenudiv a:hover{font-color: #ffffff;
background-color: #FFFFFE;
}

As far as I know font-color: is not valid CSS I believe it should just be color: #ffffff;

#dropmenudiv a:hover {
color: #FFFFFF;
background-color: #FFFFFE;
}

It's probably not you that's gone wrong, but IE6. Without looking at the code I'm pretty sure it's the way IE6 interprets the css box model. What you'll likely want to do is set up an IE6 specific style and then use a conditional comment to get IE6 to read that style.

Ok, I did just look at your code and notice that all the boxes have the same width. The middle two could easily be narrower. You might just create a different class for those two boxes that would be the same as the current class you're using except for a narrower width.

OK, thanks!

I used all the same widths for the div boxes for convenience sake. I knew that 900 px divided by 4 boxes would be 225 per box. Made spacing them easier. I will try making the 2 middle ones smaller.

Thanks!

Dianna

hi Dianna,

Based on your last post I think if you made each of your menu div's smaller than 225px it all might fit. I am still pretty new to CSS but I think you need to allow for some gutter room.

Dianna let us know if reducing widths a little works. If not we'll be happy to look again and see if we can sort it out for you.

I knew that 900 px divided by 4 boxes would be 225 per box.

There's the error. ...


Thinking that IE was any good at maths

By the time the the c0ckeyed box model has finished with it, a width of 225px is nearer 230px and that's before it has added in padding, margins, border width and a bit extra because it's raining and boxes often swell a bit when it's damp!

Actually, if the user has patched IE6 with all patches and service packs, the box model problem was fixed with one of those updates. What it still has a problem with is it's stupd hasLayout behavior, along with other dumb bugs. IE doesn't do well with really tight layouts.

One other thing I noticed - you need to define a background color either for the body or for #content. My system default background color is set to a pale pink. When I view your page, what I see in the #content area is white boxes sitting on a pale pink background. ALWAYS set a background color, you can't assume that people will use the default system colors of a white background.

Hello Everyone:

Thanks for all the tips! I will try making the boxes smaller. It's strange though because I used the same formula on my "portfolio" page and all the boxes fit there fine in IE6 which is why I couldn't figure out what in the code would NOT allow the boxes to fit on the home page. Strange.

Oh well, I guess that is the world of browsers. :-)

And thanks for letting me know about the background color. You are right. Just assumed everyone would use the default!

Back to the drawing board . . . .

Dianna