Sadly ran into a browser issue, Chrome not handling CSS same as IE..

[Cyrusis]

Hey everyone! New member, want to say thank you to everyone here!

So basically my website on IE is displaying fine, but in chrome, my slider moves up and overlaps my navigation bar.

Please see REMOVED

Here is my CSS:

/*********************************header*************************************/
header {width:960px; margin:-70px auto; z-index:101}

h1 {margin:4px 0 0 px; display:inline-block; z-index:100}

.form-search {float:right; margin:60px 20px 0 0; background:#323232; border-radius:0px}
#form-search input {width:186px; height:18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; background:transparent; border:none; color:#323232;  vertical-align:top; padding:5px 10px 5px 13px; display:inline-block; float:left; margin-right:4px}
.search_button {background:url(../images/search-button.png) 0 0 no-repeat; display:inline-block; vertical-align:top; float:left; width:26px; height:29px; margin:0 0 0 0}
.search_button:hover {background:url(../images/search-button.png) right 0 no-repeat}


.social-icons {overflow:hidden; text-align:right; padding:20px 30px 13px 0}
.social-icons span {display:inline-block; font-size:13px; line-height:17px; color:#FFF; font-weight:bold; margin:3px 14px 0 0}
.social-icons a {display:inline-block; width:23px; height:23px; float:right}
.icon-1 {background:url(../images/icon-1.png) 0 0 no-repeat}
.icon-2 {background:url(../images/icon-2.png) 0 0 no-repeat; margin-left:7px}
.icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px}
.social-icons a:hover {background-color:#dc824f}

nav {z-index:100; border-radius:0px; background:#; margin:0px 14px 0 180px; padding:0}
nav>div {background:url(../images/nav.png) 0 0 repeat-x #; border-radius:0px 0px 0px 0px}
ul.menu {margin:0 0px 0 0;  border-right:#fff 1px solid; display:inline-block; float:left}
ul.menu li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#fff 1px solid; border-left:#fff 1px solid}
ul.menu li a {font-family:'Calibri'; font-size:17px; line-height:17px; color:#fff; font-weight:; display:block; padding:23px 28px 24px 28px}
ul.menu li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important}
ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #fff; border-right:#7acad7 1px solid; border-left:#fff 1px solid}
ul.menu li.home-page a {padding:21px 22px 24px 23px !important}
ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}

I'm using the header value "margin:-70px" to raise the page up in IE but the effect in Chrome makes the slider overlap. Keep in mind when it is set to 0, both show but have about an inch of space on top which I do not want.

Any particular reason this is happening?



My second issue is that my slider seems to flicker in Chrome but not in IE when loading the new image. I spent hours trying to fix it myself but to no avail.

/*--------- slider ---------*/
#slide { position:relative; overflow:hidden;  border-radius:0px; background:#ebebec; width:930px; margin:20px auto 0 auto; padding:0px; z-index:2;}


.pagination { position:absolute; bottom:0px; left:0px; display:inline-block; 0 0 repeat; width:910px; padding:15px 0 14px 30px; border-radius:0 0 8px 8px; z-index:999 !important; }
.pagination li {float:left;	margin-right:4px;}
.pagination a { display:block; width:21px; height:21px; background:url(../images/pagination.png) right 0 no-repeat; }
.pagination li.current a, .pagination li:hover a { background-position: 0 0;}


.slider { width:940px; height:300px; margin:0 auto; position:relative; z-index:2; }
.items { display:none;}


.prev {}
.prev:hover {}
.next {}
.next:hover {}

I would absolutely love you if you can tell me how to correct this!

Thanks again, I'll definitely check back.

[SB65]

The problem's coming from this:

header {
    margin: -70px auto;
    width: 960px;
    z-index: 101;
}

Negative margins are generally not a good idea for positioning like this. Get rid of that, and FF, Chrome and IE9 all display the same (albeit not what you want). So then you need to make a number of changes:

Get rid of the two <br/> tags here:

<header>
        <br><br>

<div class="form-search">

Move the background image on your .main div up, or just rework the image:

.main {
    background: url("../images/bg2.png") repeat-x scroll center -70px transparent;
    width: 100%;
}

Now your background is in the correct place. Then:

.form-search {
    background: none repeat scroll 0 0 #323232;
    border-radius: 0 0 0 0;
    float: right;
    margin: 40px 20px 0 0;

and finally:

#slide {
    background: none repeat scroll 0 0 #EBEBEC;
    border-radius: 0 0 0 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 930px;
    z-index: 2;
}

[Cyrusis]

Thank you so much SB65, you completely fixed my page sizing issue! Awesome!

I made the adjustments to the slider yet I'm still getting that flicker in the Slider transition in Chrome.

My updated code for the slider:

/*--------- slider ---------*/
#slide {
    background: none repeat scroll 0 0 #EBEBEC;
    border-radius: 0 0 0 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 930px;
    z-index: 2;
}


.pagination { position:absolute; bottom:0px; left:0px; display:inline-block; 0 0 repeat; width:910px; padding:15px 0 14px 30px; border-radius:0 0 8px 8px; z-index:999 !important; }
.pagination li {float:left;	margin-right:4px;}
.pagination a { display:block; width:21px; height:21px; background:url(../images/pagination.png) right 0 no-repeat; }
.pagination li.current a, .pagination li:hover a { background-position: 0 0;}


.slider { width:940px; height:300px; margin:0 auto; position:relative; z-index:2; }
.items { display:none;}


.prev {}
.prev:hover {}
.next {}
.next:hover {}

I made some more alterations but reversed them because they didn't work. I honestly don't know how to fix this. I put a new slider script in as well but I still had the flicker so I went back to my previous one.


Thanks again!

[SB65]

Just to avoid confusion, are you seeing that the image fades in smoothly and then flashes briefly?

(My first thought would have been to use a different slider but clearly you've tried that.)

EDIT: Even reducing your page to the bare minimum I still see this in Chrome, which does point at the slider. Is there a demo page with the slider working properly somewhere? I couldn't find one...

[Cyrusis]

Hey!

Honestly I'm not sure, I got this one from forums. But if you'd like I can use another slider.

I've in total tried three sliders, this one, a javascript one and a jquery one. They have all flickered in chrome but not in IE.

Would that mean it's a problem with the website? I'm guessing it might be because it's not preloading the images in chrome? Is there any code I could put that would wait for the slider to fully load before displaying even the first image, or is that even the problem?

Thanks for helping SB65

[Cyrusis]

Oops, yes by the way! That's exactly what I'm seeing, a smooth transition then a quick white flicker right before displaying the next image.

[SB65]

Originally Posted by Cyrusis

Hey!

Honestly I'm not sure, I got this one from forums. But if you'd like I can use another slider.

I've in total tried three sliders, this one, a javascript one and a jquery one. They have all flickered in chrome but not in IE.

Would that mean it's a problem with the website? I'm guessing it might be because it's not preloading the images in chrome? Is there any code I could put that would wait for the slider to fully load before displaying even the first image, or is that even the problem?

Thanks for helping SB65

It's not a preloading issue because the flicker happens on every rotation, and after the image fades in anyway.
It doesn't look like a problem with the website because I deleted everything but the slider from a test page and the problem still manifests.
That's what seems to point at the slider...

It doesn't flicker in FF or Safari (which uses Webkit like Chrome either).

I'd suggest trying the malsup cycle plugin which is very widely used, or if you just want a very simple crossfade without the controls then have a look here. These both work in a different way to your current slider in that the images are stacked on top of each other and are displayed or not via a fade, as opposed to your current slider which is setting the image as the background to a div.

[Cyrusis]

Alright, i'll definitely change it then.

I was looking at the plugin for jquery, how would I incorporate that in to my code? I'm really not the best with jquery.

Thanks SB

[SB65]

The Malsus plugin?

You just need to include the plugin file, as you have with your TM plugin, then follow the format here. There's a ton of examples on the site as well.

[Cyrusis]

Thanks SB65! You can mark this as resolved! You've been an awesome help, appreciate it.