HELP with z-index or something else

Hi All,

I have a site at http://72.35.84.106 that is giving me problems with what I think is z-index. The site should have shadows and borders around it, but only shows in some versions of IE and in FireFox, Safari, Chrome etc. do not show. It looks really bad.

Also the left navigation is not rendering properly either. It is really a cluster.:mad:

The site is built on Kentico CMS (http://Kentico.com) which is a CMS built on ASP.NET and SQL Server.

Can someone have a look and perhaps give me an idea of what I can do to get this back on track please? :eek:

I have tried a lot of things but it has come to the point where it is just a blur and I need to get this done before the weekend.

Thanks for your help and expertise.

Attached is a screen shot of what it should look like, sort of, and another screenshot of the original generated from Artisteer showing the navigation etc.

And of course, it is time sensitive so again any help greatly appreciated.:shifty:

I didn’t get too look into your css in detail. but i am going to take an admittedly quick guess and say you aren’t clearing your floats so the container with the shadows and rounded corners is collapsing.

The quickest way to see if this is true is to add {overflow:hidden} to the tags which contain the shadow bgs. That may solve your entire problem…

hope that helps

Hi,

You are giving all browsers the ie6 and 7 styles which remove all backgrounds in order to apply the png fix.


<link href="App_Themes/ALL_TAG/Dialogs.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/ALL_TAG/ECommerce.css" type="text/css" rel="stylesheet" />
[B]
<link href="App_Themes/ALL_TAG/style_ie6.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/ALL_TAG/style_ie7.css" type="text/css" rel="stylesheet" />[/B]


remove thos last two files above as you already have the IE files in conditional comments but you have before the main css files instead of after them.

It should be like this:


<link rel="icon" href="/favicon.ico" />
<link href="App_Themes/ALL_TAG/Dialogs.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/ALL_TAG/ECommerce.css" type="text/css" rel="stylesheet" />
<!--[if IE 6]><link href="/App_Themes/ALL_TAG/style_ie6.css" rel="stylesheet" type="text/Css" media="screen" /><![endif]-->
<!--[if IE 7]><link href="/App_Themes/ALL_TAG/style_ie7.css" rel="stylesheet" type="text/Css" media="screen" /><![endif]-->

You seem to have a lot of code for such a small page and the IE6 & 7 css files are full of expressions and filters which seem to me like its been well overcooked :slight_smile:

Try to keep things simple. Don’t use transparent pngs if you want to support IE6 as you could have used a gif and matched the background as you only have a small fade to content with.

Thanks Dresden.

Paul, great observation. Kentico CMS automatically pulls in whatever is in the directory, so even though I had the if statements it still pulled in the files altogether. I put those in the CMS, removed them from the directory and it looks like it works. There are some other cleanup issues that are driving me batty like on the Events tab - the calendar is not centering in FireFox but does in IE. Same with the event list below. Any ideas?

Also on the news page the right line that is supposed to close the box is also on the border of the site - no matter what I do it does not shrink in.

Again I thank you for the pointing that out - I can’t believe I missed it. I was looking way too hard for something sinister… :goof:

yes add this to center the table:


.Calendar table{margin:auto}

Can you clarify where I am looking as I didn’t notice anything immediately awry on that page?

Or did you mean you wanted some space around those elements?

e.g.


.NewsPBody {
  border: 1px solid #CCCCCC;
 [B] margin: 20px;[/B]
  padding: 10px 15px;
}

Ah yes Paul I added a margin to the right and the border moved in. I guess with the previous error of IE6/IE7 included twice anything that I tried to change was not visible.

Do you have any suggestions on the Event page? I can’t get that to center/display properly.

Are you in Florida - I need to buy you a beer :smiley:

Do you mean the calendar? if so you probably missed my post above the other one :slight_smile:

Are you in Florida - I need to buy you a beer :smiley:

Thanks for the offer but it’s a bit of a walk from south of England :slight_smile:

On that NewsPBody in the news section the latest entry has huge white space on the bottom for FireFox vs. IE where it displays about right. Any suggestions on that?

The calendar margin auto worked great. Now I just have to straighten out the rest as everything shifted.

So, England - thats a long walk coupled with a swim…

Paul I really do appreciate your help and greatful for sharing your expertise.

That would be the multiple breaks that you have in the html. Ie seems to collapse them but they just add up in Firefox.


security against theft, while the RFID antenna will allow product information to be stored and the product to be traced.<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

You will need to get rid of them to close the space.

However that means you will also need to make sure you clear the floats or the image will poke out so add overflow:hidden to the parent which will make the parent contain the float.


.NewsPBody {
  border: 1px solid #CCCCCC;
  margin-bottom: 20px;
  margin-right: 20px;
  [B]overflow: hidden;[/B]
  padding: 10px 15px;
}

Back tomorrow :slight_smile:

2 words - You Rock…

Hi Paul, do you know of a good script I can use on the home page to rotate jpeg or gif images? Right now the image is embedded I basically want the same look but need to rotate a handful of them.

Thanks.

Hi,

I usually leave things like that to the JS coders I’m afraid. You might find something you like from here or [URL=“http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/”]here. There are many scripts about especially if you are already using jquery or similar.

It depends whether you want something simple or more complicated. You could just set up something simple with a php script. This link is very old but there are many others about that are similar.

Thanks, found this one too: http://www.devcurry.com/2009/07/create-simple-image-slide-show-using.html . I needed something real simple since the page layout is all webparts and the slide show is in a block of text bascially.

Thanks Paul.