12 replies [Last post]
johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

I am having two small problems in IE 6 with the display of a template I've created. In Firefox, they display exactly as I wanted. Here is a link to the template:

http://www.denverderm.com/div_test/css_test3.asp

and here is a link to its stylesheet:

http://www.denverderm.com/div_test/style.css

The problems I am having are:

1. under the header image, there is a thin white rule ( div id="white_rule"). This should be directly under the header image, forming a white rule right under it (like it does in FF). In IE 6, there is a small gap between it and the header image. Can't seem to figure out where the problem is.

2. List Item bullets - to get the navigation menu to work, I set list-style: none; in the CSS under the #navholder ID (see line 135 of "style.css") so they don't display in the nav tree. As I understand it, this should effect only UL and LI items under #navholder, which it does in FF. In IE6, however, it doesn't display any bullets anywhere (see the quick UL test I did in the main content area). I am using a workaround for UL and LI items for IE, which can be seen in the header of the css_test3.asp file, but I've been specific about targeting only the #navholder items there as well. Again, can't seem to figure out where the problem is.

Any help on the above greatly appreciated.

Thanks

JMR

*

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

First for Item 2) You have

First for Item 2)

You have this

In your code. You only have a navholder ID not class. Take out the class. See if that will fix your IE problems.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

For the first problem

For the first problem 1)

First off, you should wrap your header_image and flash_image inside a #header just for organization sake. You can even go as far as giving the header a height because the height is already defined by your banner.

Secondly, your white_rule div could be improved so you dont have to just a white_rule.jpg

#white_rule { padding: 0px; margin: 0; clear:both; border:none; position:inherit; }

Try something like this:

#white_rule { padding: 0; margin: 0; clear:both; border: 0; height: 1px; width: 100%; background-color: white; /* now its white */ }

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

Where do you see class="navholder"?

vinhboy
Thanks for your help on the white rule issue. That very much looks like it will work - I'll try it out and report results. I'm confused on your comment about class="navholder, though. I looked through my code and can't see it. Where did you find it. Thanks again for your help.

JMR

*

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Here is your code <div

Here is your code

white rule
Sectional Header image



The class should be removed..

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

No luck

vinhboy
Ah, I see where it is - I actually had the code for the nav in a seperate file and was including it through .asp - that's why I couldn't see it.

Anyway, I tried your suggestions, both with this and the white rule, with no luck. Still no bullets and now the white rule is actually huge in IE - like 10 pixels thick. Any ideas what is going wrong here?

Any help appreciated.

Thanks

JMR

*

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

Also - one note

I changed the code for the white rule back to being an image - to see if I can get that to work

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

Aha! Got the white rule fixed!

Turns out it was a problem with leaving space after the image tag and the close of the div for the header image. Good old IE 6!

Anyway, still having trouble with the list item bullets I mentioned above. Any help greatly appreciated on that one.

Thanks

JMR

*

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

i dont know why its like

nm. i noticed on your website. bullets dont work in IE at all. regardless if you put a list-style or not.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

here is your

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

Interesting article. I think

Interesting article. I think where I'm having trouble then would be here:

#navholder ul ul { position: absolute; left: -3000px; background: #7f8c2b; color:#ffffff; }

What I don't understand is that I'm only applying this style to ULs nestd inside of ULs inside of the #navholder ID. I thought I was being specific about targeting it just to those particular ones, but it seems to have picked it up globally and applied it to all other ULs. I experimented with setting a style just for other ULs in a global way, but no luck. Do you know a way of "resetting" this to the default for UL instances other than in the #navholder ID? Am I approaching this correctly? Any help appreciated - thanks for your help so far.

JMR

*

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

I think this is how you fix

I think this is how you fix it.

First change this

/* DOCUMENT LAYOUT CSS */

html, body, ul, li {margin: 0; padding: 0; border: 0;}

To:

/* DOCUMENT LAYOUT CSS */

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

Note: removed ul and li from that style.

Second add this to your "#navholder ul":

padding: 0;

johnmr
Offline
Regular
Last seen: 15 years 16 hours ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

That worked! Just FYI: I

That worked! Just FYI:
I also had to add margin-left: 0px; in the #navholder ul and a conditional margin-top: 12px; in the #navholder for IE6 (in the header of the css_test3.asp file) - not exactly sure why that was needed, but it is all working now.

Thanks so much for all your help!

JMR

*