Fri, 2007-01-05 23:03
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
*
Fri, 2007-01-05 23:24
#1
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.
Fri, 2007-01-05 23:30
#2
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 */
}
Fri, 2007-01-05 23:44
#3
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
*
Sat, 2007-01-06 00:17
#4
Here is your code <div
Here is your code
The class should be removed..
Sat, 2007-01-06 14:53
#5
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
*
Sat, 2007-01-06 19:20
#6
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
Sat, 2007-01-06 19:25
#7
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
*
Sat, 2007-01-06 21:48
#8
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.
Sat, 2007-01-06 21:51
#9
here is your
here is your solution:
Sat, 2007-01-06 22:48
#10
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
*
Sun, 2007-01-07 04:31
#11
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;
Sun, 2007-01-07 16:20
#12
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
*