I'm usually savvy enough with CSS to know what will and what won't be accepted by Internet Explorer - however I stumped with this one. If you take a look at the "simple" site I'm currently developing in Chrome or Firefox, you'll see that the navbar looks normal enough.

 

www.goldenskyfilms.com

 

Now open it up in IE and you'll see there's an horrendous gap above and below the navbar - does anyone know why this is? I've ensure that all the surrounding divs have been given margin & padding of 0px but still nothing works.

 

Any advice will be greatly appreciated.

Can you post a link?

 

Also if images are involved then try setting them to display:block.

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Can you post a link?

 

Also if images are involved then try setting them to display:block.

 

Oh yes! Sorry I've updated my post above...

 

www.goldenskyfilms.com

Ul#list-nav add display:inline;

 

and add to your clear:both height:0;

Ul#list-nav add display:inline;

 

and add to your clear:both height:0;

 

mteam you are a genius and a life saver! That worked perfectly. I notice I've another IE issue to deal with now on the index page, but feel no obligation to assist with this too.

 

If you do, then the problem is with the left side of the .content div overlaps its containing div. I think it's because IE doesn't like an <a> tag with a margin-left attribute. I'm starting to admire "zeds" suggestion!

Can you give this try

 

Added a class to paragragh tag

 

<div class="content">
		<a title="Trailer for 'The Accidental Smoker'" class="watch" rel="prettyPhoto" href="http://www.youtube.com/watch?v=lbdq_LJ6YhE"><img height="194" width="300" border="0" alt="The Accidental Smoker (trailer)" src="images/projects/as-medium.jpg"><br>watch the trailer</a>
		<p class="test"><em><strong>The Accidental Smoker</strong></em> is nearing the final stages of post-production. This has been an long, exciting, stressful yet overwhelming experience and we're very much looking forward to sharing this with you very soon.</p>
     <div class="clear"></div>
   </div>

 

.test {float:left;width:245px;}

that certainly worked, but eventually the text will be large enough to wrap around the image. A class like that added to a <p> will effectively create a left column...and not wrap around the image.

 

Not to worry, I'll figure something out based on the advice you gave. It's all a learning curve - thanks mate. Much appreciated!

Ok scrap the float left & width

 

try adding min-height:225px;

Ok scrap the float left & width

 

try adding min-height:225px;

 

That works too, but can you explain why IE is overlapping on the left and how it is that this fix works?

I cannot work out the exact thing that is causing this problem

 

Wickham may be able to help you out with an explanation he's alot wiser than me

 

I still unsure on this one maybe a better way of fixing will be add a width to .content of 564px

I looked at your coding and was confused by al the divs.

Sometimes Firefox will ignore coding cockups which IE will take exception to.

Can I suggest that you comment all your div and other / endings so that you know what they are closing? This makes it easier to check through the coding.

eg

<div class="wra"><!-- wrapper -->

 

blahdeblahstuff

 

 

</div><!-- wra -->

 

Also, these coding errors showed up on wc3

 

Validation Output: 9 Errors

 

1. Error Line 20, Column 67: end tag for "link" omitted, but OMITTAG NO was specified

 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

 

✉

 

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

2. Info Line 20, Column 1: start tag was here

 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

 

3. Error Line 30, Column 89: required attribute "alt" not specified

 

…tact"><img src="images/envelope.gif" border="0" /> hello@goldenskyfilms.com</a>

 

✉

 

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

 

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

4. Error Line 21, Column 7: Opening and ending tag mismatch: link line 20 and head

 

</head>

 

✉

5. Error Line 28, Column 32: attributes construct error

 

<img src="images/filmsw.png"alt="films" style="position: absolute; top: -35…

 

✉

6. Error Line 28, Column 32: Couldn't find end of Start Tag img line 28

 

<img src="images/filmsw.png"alt="films" style="position: absolute; top: -35…

 

✉

7. Error Line 29, Column 29: attributes construct error

 

<img src="images/sun.png"alt="sun" style="position: absolute; top: -93px; r…

 

✉

8. Error Line 29, Column 29: Couldn't find end of Start Tag img line 29

 

<img src="images/sun.png"alt="sun" style="position: absolute; top: -93px; r…

 

✉

9. Error Line 46, Column 7: Opening and ending tag mismatch: head line 3 and html

 

</html>

 

✉

10. Error Line 46, Column 7: Premature end of data in tag html line 2

 

</html>

Thanks Monica - I've made the changes to please the W3 validator. I usually make the tweeks once I've got the main design out the way (not quite there yet) but you're right in that I should have ensured all these were correct before requesting help on my coding.

.

Sometimes Firefox will ignore coding cockups which IE will take exception to.

 

Yep, so you have to wonder how marvellous Firefox is and the slating IE gets Moral of the story is to get the code correct first and then go from there

I've looked at the page in IE7 and Firefox. If you add background-colors you can see that in IE the lime .content div extends to the far left of the pink .sitebox div but there is 8px side padding on the right. .sitebox has padding: 8px and this should apply on the left (it does in Firefox).

 

It's probably an IE bug because there is an "a" tag first without being in a block element (even though a style of float: right is supposed to make the "a" tag a block element) and IE doesn't like it.

 

If you put both the image and the text in floated p tags the padding on the left shows in IE (like mteam's first suggestion) but then you have two columns and the text won't wrap under the image it there's more text. To get the text to wrap if there's a lot of it, float the image right first in a p tag with a width and a height (floated divs should have a width) and then code the text WITHOUT a float so it wraps (the image needs a height for the text to wrap under):-

 

.sitebox {
/*background: url('../images/hgrad.gif') repeat-x; temporarily deleted*/
background-position: top;
background-color: pink;/* #8d948d;*/
padding: 8px;
margin-top: 100px;
border-top: 2px solid #fd9534;
position: relative;
}
.content {
background-color: lime/*#D6D6D6*/ !important;
padding: 30px;
color: #333;
/*background: url('images/sun.jpg') 5px 5px no-repeat; temporarily deleted*/
}

 

<div class="content">
<p style="float: right; width: 316px; height: 200px;">
<a href="http://www.youtube.com/watch?v=lbdq_LJ6YhE" rel="prettyPhoto" 
class="watch" title="Trailer for 'The Accidental Smoker'"><img 
src="images/as-medium.jpg" width="300" height="194" alt="The 
Accidental Smoker (trailer)" border="0"/><br />watch the trailer</a>     
</p>			

<p
<em><strong>The Accidental Smoker</strong></em> is nearing the 
final stages of post-production. This has been an long, exciting, 
stressful yet overwhelming experience and we're very much looking 
forward to sharing this with you very soon.
<em><strong>The Accidental Smoker</strong></em> is nearing the 
final stages of post-production. This has been an long, exciting, 
stressful yet overwhelming experience and we're very much looking 
forward to sharing this with you very soon.
<em><strong>The Accidental Smoker</strong></em> is nearing the 
final stages of post-production. This has been an long, exciting, 
stressful yet overwhelming experience and we're very much looking 
forward to sharing this with you very soon.
<em><strong>The Accidental Smoker</strong></em> is nearing the 
final stages of post-production. This has been an long, exciting, 
stressful yet overwhelming experience and we're very much looking 
forward to sharing this with you very soon.
</p>
    <div class="clear"></div>

   </div>

 

I've repeated the text so that you can see it wrap. You need the clear div after the text if the text is less high than the image because the image with greater height will appear to hang down below the div bottom if the clear div isn't there. If there's more height for the text as in my example you don't need the clear div, but it's best to leave it there.

 

The width: 316px is image 300px plus .watch side padding and margin-left.

 

mteam's second suggestion of min-height won't work in IE6 and I think it's just lucky it does work in IE7/8.

Cheers Wickham

 

I new the min-height wasn't good idea what about adding the width:564px to the .content did that work for you

 

I couldn't work this out thanks for explaining about the block element

 

Thank you also Wickham! Clears things up about how IE interprets things.

 

Also the width of 564px to the .content worked perfectly fine - a much better permanent solution. I guess this just ensures IE doesn't go overlap anything either side...even though it clearly shouldn't as the containing div would block it.