As you will see I did a negative margin to the content div to move it up as I’d like it on the reflection of the image, it successfully moved up but how can I bring it to the front so its on top of the image.
I’ve tried using z-index but it didn’t appear to work for me.
Maybe I’m doing it incorrectly I’m sure its something small so if someone could please help me, I’d really appreciate it.
I gave my slider div a z-index of -1 and then the content appeared over it but none of the links worked on the slider div so that didnt work so I went back to what I have now which is where the slider is over the content-home div.
So what I need is the content-home div to show up overtop of part of the slider and the links to still work on the slider images and next and previous buttons.
Any idea why the images don’t show up in IE but show up in all other browsers.
One other question would be in Chrome, the Navigation doesnt appear the same in all other browsers, it took Volunteer right off of the Navigation bar and seems to be different spacing in between stuff. Is there an easy way to fix this?
Any idea why the images don’t show up in IE but show up in all other browsers.
It’s working in IE8, I see what you are talking about in IE7 though. It looks like IE7 may be having trouble with the script, it looks like it’s not changing the #slider img from display:none; to display:block
One other question would be in Chrome, the Navigation doesnt appear the same
I’ll have to get back to you on that later
EDIT:
It looks fine in Chrome 4, I suspect you are using Chrome 5.
Chrome and Safari both use the Webkit engine so there must be a connection between the new versions of those browsers.
Changing the slider img to display:block did work but for some reason only the images show, so the content on the slider “Test One” “Test Two” and also the arrows don’t show in IE7.
To answer the other question yes I am using Chrome 5.
As you said there must be a connection since both navigation and the inner pages are acting up in Chrome and Safari 5.
Hi,
That was just a test for IE7, the #slider img needs to be set back to display:none; for the script to work right in all browsers.
I pulled your files down so I could make live edits for IE7. I’m still trying to debug it but the anchors are the problem in IE7. The images are nested in the anchors as you know and it is really the anchors that are not showing up in IE7.
Oh ok, thanks so much for taking the time to check it please let me know if you figure it out, should I change the CSS slider img back to display:none, or just wait till I hear from you.
You might want to take this to the js forum and see if anyone there is familiar with any Nivo Slider IE bugs. I’m kinda stumped on it and I have not been able to connect it to any CSS problems.
It is the single comma after your last function (in red)
Remove It
<!-- Set up the Nivo Slider -->
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade',
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8[B][COLOR=Red],[/COLOR][/B] //Universal caption opacity
});
});
</script>
Have a had a chance to look at the Chrome 5 and Safari 5 issues?
Haven’t had a chance yet. Let me update them and I will take a look.
As far as your navbar dropping the last <li> text, I know what that is.
It is not happening on my chrome (by the way I did have version 5) because my default font is set at 16px arial.
I’ll bet you are using a different font and the characters are rendering larger.
You are depending on padding and text-size to set your widths, it can’t be done like that on a fixed width navbar.
Give this a try, it should take care of the problem.
You can fine tune the widths, I got them close but they are not pixel perfect to the borders in the image.
You say you can’t style the anchors because of WP.
You do have some IDs’ on the <li> , is there anyway you can use them to assign the widths to?
If you could do that you would be able to float the <li> left and then set the anchors as display:block; with 100% width/height. That would give you specific widths and keep the entire anchor clickable. You would still use text-align: center though.
I really dislike WP, but I do understand why people use it when they need a CMS.
