Css Transparency in internet explorer

using behaviour

[Cira]

Hi all,

I have just started building my first web site for a friend and i have come into a few issues when testing on IE explorer.

I have supposedly applied a fix for the transparency issues with .png files which does work but when i validate check it i get this message....

"20 img, div Property behavior doesn't exist : url(iepngfix.htc) url(iepngfix.htc)"

The URL location is correct maybe i am messing up the syntax.
Im not sure on how to fix this problem as i am a complete novice i haven't even looked at coding HTML and CSS until 2 days ago.

The web site worked fine until i took the the image locations for the header, main body and footer areas out of the HTML and placed them into the CSS. Now on IE there are random errors popping up when loading the page and you cant click on the menu items but it seems to do that only on IE6.

temporarily i have uploaded this site in place of my current one.

On another note there seems to be differences in the browser regarding the formatting of the text in the header to do with the alignment. Currently the two lines of text in question are positioned absolute if that helps.

Can someone please have a look and advise me if you can i would be forever in your debt!

[creativedesign.org.uk...]

Regards

Dave

[alt131]

Hi Dave and welcome to WebmasterWorld :)

If you are new to coding you are doing really well, and good on you for following robzilla's advice to validate.

behaviour is understood by ie [msdn.microsoft.com], but is not valid css (and seems to have been dropped from the latest draft of the behavioural extensions) so will be reported as an error. You can choose to treat validation as a guide and ignore the error once you are sure it will not cause problems, or send the declaration to ie using a conditional comment.

If you are using the behaviour from twinhelix, the error messages are a warning that the named elements (or their children) will be unclickable. This is a known issue [twinhelix.com] when elements are absolutely/relatively positioned - although that shouldn't be caused by moving the image locations to the css so there may be something else happening as well.

The fix would be to re-consider using positioning as you have. I can appreciate a lot of effort must have gone into getting the code as neat and tidy as it is, but the design should be achievable without using so many positioned divs.

But good news - I can't see any difference in alignment between browsers, so that's one less issue :)

[Cira]

Thanks for the reply!

Well as it works im just going to as you say treat it as a guide. I will have a dig through all of the code and try different things.

I think im going to stick with the current amount of divs on this project as it has come on so far already but for future reference what else could/should i be using. Can you suggest any reading material on this.

Excellent the alignment issues must just be localized to my GF's laptop (i was testing on different platforms as i use a mac).

Dave

[Cira]

I have just noticed something else.

If you look at the transparent space between the main area content and the footer there is a 2 or 3 pixel horizontal line which shouldn't be there. It isn't in the graphic images and it has only appeared since defining the image location in the CSS but it was not an issue when it was in the HTML and i haven't played with the code concerning that area plus it is across the board on every page and only the code for the graphics are consistent throughout.

Hmmmm

Dave

[alt131]

Hi circa, pleased it is almost there.

... but for future reference what else could/should i be using. Can you suggest any reading material on this.

I still haven't found what I think is a great resource on this. It's really about moving from divs-for-layout (which is really like tables-for-layout - just using divs instead), to marking up your html semantically, then using cascading style sheets to apply the styles to achieve the desired layout.

The trouble is that most of what I think is "good" material has been written from a usability or accessibility perspective rather than just focussing on semantic html. That's emphasises how coding this way builds in good usability and accessibility from the start, but the "labels" frequently put people off because they are wrongly thought to produce boring design. However, if you can overlook the accessibility/usability terms, I've found these enjoyable, so they might get you started:

• Don't use divs for layout [friendlybit.com] short, to the point, esp para's 2&4
  
• Creating semantic structure [webaim.org] - the introduction gives background, maybe scan the last sections for examples.
  
• From Hell to Hell [smashingmagazine.com]Lots and lots of code samples, I'd suggest ignore them to start, maybe just scan through to get the overview, and especially scroll down to "From Hell to Heaven"
• Dive into accessibility [diveintoaccessibility.org] by Mark Pilgrim is very accessibility oriented, but gets you thinking about html, and broader design issues.

... there is a 2 or 3 pixel horizontal line ... It isn't in the graphic images and it has only appeared since defining the image location in the CSS but it was not an issue when it was in the HTML

Not seeing this, but it's the second time you've referred to before/after removing the image locations from the html. Can you post a snippet of the locations in the html (before), and the css (after)?

[Cira]

Hi Alt131,

Thanks for getting back to me. Lol don't worry im not in a rush but thank you for the links you have provided i will check them out today and let you know how i get on with them.

I have taken a screen shot of the area in question.... needless to say but that line wasn't in the original design.

htpp://www.creativedesign.org.uk/test.jpg

the html was something like this.

<div id="footer">
<img src="images/footer.png" width="872" height="83" alt="back" class="pngimg" />

the current CSS looks like

#footer {
position: absolute;
margin-left: -436px;
left: 50%;
top: 747px;
width: 872px;
height: 83px;
z-index: 3;
background-image: url(../images/footer.png);
}

It was originally in the HTML before i knew you could do it in the css. I found out how to do it this way because i did not like the fact i could click on the background and drag it so i tried putting it in the css and it worked. The only difference in the CSS from then and now is the URL. I also wanted to do it in the CSS to clear up my html as i had redundant class's in there which were not being defined in the css.

Thanks

Dave

[Cira]

This reading material is pure gold.

Thank you so much!

[alt131]

Hi Dave, thanks for the feedback on the readings - great to know these particular ones are useful. The code was helpful and even I couldn't miss the gap inside that huge red circle on the image :) Unfortunately the original demo page has disappeared, which means it's not possible to see what code is affecting this in the current version.

I don't see this as too difficult to resolve (especially as it is isolated to old versions of ie) - but "disappearing code" adds an extra level of challenge ;) Can you post a code snippet? The forum charter [webmasterworld.com] and the two threads pinned to the top of the forum [webmasterworld.com] explain how to prepare a code sample for posting. If it gets too dificult to decide what to leave in/out, sticky me a url and I'll bring back the code for everyone to see.

[Cira]

Hi Alt,

That reading material has inspired me so much i have gone onto learning so much more. If i knew what i know now a few days ago i would have a semantic website, but i think this project was crucial for my learning curve as i actually feel like i can do so much more now. I am currently building my company site which you prob came across and if you were to look at the source of that so far it is vastly different although i think the menu on the one online at the moment was using H1 tags but the one off line i have is using an UL (a moment of madness which has now past!)

I think i may have not got the previous message across regarding the area in question it happens in all browsers not just ie.

What you will be able to see is the code for the footer area and the main body content followed by the CSS. Please note that this issue is not just localized to one page by across the whole site.

HTML...

<!-- .................Middle & Bottom Content Start.............. -->

<div id="body" class="body_layout">

<div id"overlay">
</div>

<div id="middle-H" class="middle-H">
Welcome to Brighton Lighting Hire:
</div>

<div id="middle-P" class ="middle-P">
We provide professional lighting systems and lighting 
technicians to bands, DJs, conferences, corporate 
events, festivals, nightclubs, hotels and other 
sound and lighting companies.
</div>

<!-- Bottom Content Start -->

<div id="bottom-H" class="Bottom-H">
Who We Are:
</div>
<div id="bottom-P" class="Bottom-P">
We are a local lighting company specialising in the 
 hire, installation, programming, operation and maintenance 
of professional lighting systems. We are committed to providing 
a high quality service paired with the very best equipment and technicians.
</div>

<div id="gear-i" class="gear-i">
 </div>
<div id="artbracket">
</div>
<div id="arttxt" class="arttxt">
Worked with such artist as:
</div>
<div id="arttxt2" class="arttxt2">
Olly Murs... Calvin Harris... Goldie...
</div>

<!-- SlideShow -->

<div id="kenburns" class="slideshow">
<img src="pictures/1.jpg" alt="1">
</div>

</div>

<!-- .........Middle & Bottom Content End.......... -->

<!-- ............Footer Content Start.............. -->


<div id="footer" class="footer_layout">

<div id="jtl" class="jtl">
© J.T.L ***************. All Rights Reserved
</div>

</div>


<!-- ...........Footer Content End......... -->

<!-- Page End-->

CSS...

#body {
 position: absolute;
 margin-left: -436px;
 left: 50%;
 top: 113px;
 width: 872px;
 height: 649px;
 z-index: 2;
 background-image: url(../images/index.png);
}

#footer {
 position: absolute;
 margin-left: -436px;
 left: 50%;
 top: 747px;
 width: 872px;
 height: 83px;
 z-index: 3;
 background-image: url(../images/footer.png);
}

LOL if i did this site today i would have used the correct containers for all elements... and tbh i kind feel really stupid about such a mistake.. eek

Thanks

Dave

[edited by: Cira at 1:29 am (utc) on Apr 26, 2011]

[Cira]

I have also just put the site back up just in cause that is not what you need and it will stay there till i have resolved it and confirmed/posted the solution.

[alt131]

Hi Dave, I did note the change in the coding style - and wondered :) Changing your coding style that much requires an incredible commitment, plus lots of effort, so all credit to you. No need for embarrassment over this first attempt - it's the end that counts - and you've taken giant strides in a really short time.

When I tried to test possible solutions in the page the code has disappeared again, plus the images moved from their place on the server. That's prevented me reproducing the issue because the "gap" is caused by the unique shape of the images - so rectangular place-holder images can't be used instead.

... but does that mean you have a solution?

Never sensible to apply a fix without knowing the problem, but I did wonder if you might refine this code later so it would only be temporary. Yesterday I couldn't find inherited padding/margins, or anything in the absolute positioning or the images themselves, so I suggest explore re-positioning the elements. Althoguh that will likely require re-positioning the contained elements as well, it is probably the most straight forward. However, I was intending to try re-positioning the background-image itself and/or clip and/or transparent borders which you might like to explore if you don't yet have a solution.

[Cira]

Thank you for the feedback.

Right so i was getting really annoyed with the little bit of black which randomly appeared so i made the decision to just start from scratch and re-code the whole lot being semantically correct and the issue disappeared.

I was going to post this last night but i got carried away with working on my business site.... sorry.

But thank you so much for taking the time to try and help me i am certainly sure i will be a regular poster on this forum hopefully not just needing help :-)