PDA

View Full Version : CSS problems IE-faux columns and box model in IE5


stephsmarti
03-08-2007, 02:12 AM
My name is Stephanie and I've been working on my first tableless design (actually converting an existing table design to tableless) and I am almost there. Here are the problems in IE:

IE 6- my faux column image seems to be escaping my wrapper div (which is holding the sidebar and main content divs)
IE 7- just the opposite, my faux column image is not tiling down to the bottom of my main content.
IE 5.5 - not very pretty, the center content floats are laying on top of each other (I am thinking that since I have divs with fixed height and width that maybe I need to set up IE5 styles with conditional comments because of the box model issue? I have never done this and so I am just looking for some assurance so I don't head off in the wrong direction. The only hacks I have used so far is a <br class="clear" /> (and then set a clear style in style sheet)
to clear a float when I have floated elements in a non floated container div. Also, used the *html hack once on my left nav bar (not totally sure why but it was suggested in "The Missing Manual"). I am trying to steer clear of too many work arounds (if that is possible), so I am trying to keep the design simple.

Here are the links:

HTML (http://saxophone.com/indextest1.html)

CSS (http://saxophone.com/custom2.css)

CSS for center content (http://saxophone.com/homestyles.css)

I would be extremely grateful for any help.

Stephanie

stephsmarti
03-08-2007, 04:28 PM
I realize that I am not supposed to post "problem solved" but just stayed on this until something worked. I am not sure it is the best resoltution and so if anyone might be interested in commenting on the solution, I would appreciate it because I am attempting not to let my fixes creates more problems down the road:

1)Faux column - rather than placing my tiling sidebar image in the wrapper div (which held sidebar and center content), I moved it to the overall container div. It fixed the problem BUT since my footer was in the container div, it was now showing a black sidebar. The fix for this was to set a color on the footer div to match my page background. I don't love the fix but it works on all browsers. Any feedback?

2)IE 5.5, by following a few different tutorials, I used the * html hack on my center content to specify different width and height attributes for IE -adding the padding, border and margin to the width and height respectively and wow, it worked. My stylesheet for the center content is separate from the rest of the site. Is this a horrible way to do this?

I've checked the site in IE 5.5 and up, FF, Safari and Opera and all looks well. Not a huge accomplishement for some, but for me :mrgreen:

chriskq
03-09-2007, 12:42 AM
its a big accomplishment to get ur site browser friendly. Thumbs Up

site looks good btw

kate
03-13-2007, 08:48 PM
Yes,

Well done on your achievement Stephanie!

:mrgreen: