[RESOLVED] My page and IE6 - can't figure out a couple of things [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] My page and IE6 - can't figure out a couple of things

halldorr

01-23-2008, 04:48 PM

My site I'm working on: http://new.homeofficepro.net/?template

Looks decent in Firefox , IE7, and Safari (for Windows at least) but I can't figure out what I can do with IE6. Some of my transparent pngs are working some aren't (using a js script to correct them) and my menu is breaking into two lines and I can't figure out why.

smyhre

01-23-2008, 11:38 PM

I would think you dont need the ul to display inline only the ul li to display inline.

#nav ul
{
margin-left: 0;
padding-left: 0;
display: inline; remove this
}

#nav ul li
{
margin-left: 0;
padding: 0;
list-style: none;
display: inline; keep this
}

Which png's aren't viewing correctly in ie6 cause they seem to view right when i compared them to firefox? Ok they view correct but they don't fill down as you want them too on the page sides right?

One more thing do you have a reset css to clear all browser defaults or at least the line * {margin: 0; padding: 0;} to make sure all inherited default setting of any browser are reset?

The w3 Validator found 16 errors on your page (http://validator.w3.org/check?uri=http%3A%2F%2Fnew.homeofficepro.net%2F%3Ftemplate&charset=%28detect+automatically%29&doctype=Inline&group=0)

halldorr

01-24-2008, 09:35 AM

Ah nice, removing that inline part fixed that nav area.

As for this:

* {margin: 0; padding: 0;}

I do not have that anywhere at all, is that something you suggest adding to the top of my CSS file?

The PNGs, correct, they appear to be transparent but they don't fill down the page. Firefox should show a drop shadow all the way down that content section but in IE6 it doesn't continue. I'm reading up on the repeat support in IE6 this morning to see if it has something to do with that though. There is also a gap where the nav shows up.

The validation errors: I cleaned the ones up in the template leaving 9 all in the embed link that I need to track down (from an included file) and and clean up.

Thank you very much for your help, it was...well...very helpful :)

smyhre

01-24-2008, 12:33 PM

I do not have that anywhere at all, is that something you suggest adding to the top of my CSS file?
Yes I'd do that for a simple reset of margins and padding. Any unstated margins and padding that are appearing now, will disappear once that is in.

As for the image that is filled down on both sides what may make it a little easier for you is:

HTML:

<body>
<div id="container">

</div>
</body

CSS:

#container {
background-image: url(location/of/image.jpg); /* this image is 700px wide*/
background-repeat: repeat-y;
width: 700px;
}

Ok in this example use a 700px wide image to fill down the whole page eliminating the need for individual pictures on each side. I do this all the time, makes it easier then trying to make two individual pictures align. And the picture can be like only a few pixels high. of course you can make the width anything you want according to how wide your design is.

smyhre

01-24-2008, 04:13 PM

I forgot the border in the universal selector above.

* {border: 0; margin: 0; padding: 0;}