19 replies [Last post]
klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Hi all,

It has been a while since my last post - things have been going well converting my site to xhtml - but now I have a problem.

The page loads just fine in FireFox and others - but in IE if the left column in the second box gets longer than the 4 features on the right then it breaks the bottom Event section.

In most cases it works fine - but on some occations it does go wrong (impossible to predict the lenght of the various featues)

I tried using clearfix - works in firefox - but not IE..

I have attached an example - see end of the page to see the problem. I wonder if there is a way of "auto-stretching" the ul li on the left side to match the 4 feature boxes on the right?

Any suggestions?

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE problem - even after clearfix

Klaus, after the lengthy posts last time around I am amazed to look at that page and to find no DTD and 45 warnings on the code , you need to fix those errors and insert a proper DTD, then have a look at how the page performs in IE.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi Hugo,

Because of the problem I mentioned I reverted back to the old sloppy code - please see that attached HTML - I just don't want to take it live when I know the end of the pages can break on IE.

See ex:
http://www.ameinfo.com/news/Detailed/56160.html

Subpages - all good Wink I just need to fix the frontpage

Cheers
Klaus

EDIT: I have fixed it so that it does not break the Events News at the end of the page - BUT if the news wires are longer than the 4 features they will be cutted off by the Event news - in other words the 4 Features deside the height - I need to fix it so that the longest will set the length. - Works perfect in FF though..

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

If somethings poke out the bottom of a .clearfix container I would be suspicious of improper nesting. I have found instances with IE5.5 where I needed to adda position:relative to the .clearfix container but other than that I have never seen the method not work properly unless is is not properly nested or someone has snuck in a position:absolute somewhere.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David and Hugo,

Well it happens on IE 6.0 - and I may have overdone the clearfix a bit? Can you see anything wrong on http://www.ameinfo.com in terms of nesting (I have made it live now)

To make matters worse - sometimes it renders correctly in IE then every other refresh it messes up. I have increased the stories to make the problem more clear.

I have manged to control the breaking of the Event bit - but not the Event News box is literally moving itself up and covers the stories - really odd - and only in IE 6.0

I tried the position:relative; - but not change....

I have tested a few IE versions (funnily enought it works on the most impossible of all IE versions 5.2 for Mac.. - but in 5.5 and 6.0 it breaks - have a look:

http://www.browsercam.com/public.aspx?proj_id=149999

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

Whatever it is it is too subltle for me at the moment. Comparing IE and FF the site looks almost identical except for the non-cleared float at the bottom. I did note that in IE all you have to do is change the font size and the hidden content appears. It looks a bit like the Guillotine bug but that has to do with clicking links in floats.

Hmm - I have been messing with this and all of a sudden it won't do it any more. - Did you change something??

Klaus, on a more general note - you are still way overdoing it with repeated font-family and font-size statements where you are not changing the one or the other from the default or from the parent container. That is making up a big part of your CSS. Whenever you are creating a style for a subsection, consider whether you should make that style available everywhere.

Creating #id tag or .class tag as selectors makes sense but something in the form
#id .class a.green {color:green;} doesn't really make sense when it could simply be .green {color:green} - a too highly specific form can't be used except in that very limited context. Always try to think abstractly when creating styles, especially ones that could be used elsewhere.

(Notice I didn't mention my usual objection to using fixed (px) font-sizes in IE.)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

Thanks for your comments - no it still happens (on and off) which is really odd - sometimes it is ok and then when I refresh it goes back to where it was. It seems to be pretty random if IE render it correct or not - ever seen anything like this before?

I know that should reduce the css - I made a specific css for the frontpage which I only load there - and I need to work more on that to reduce it, but I don't think it causes this problem?!

Any suggestions (besides going back to using tables)?

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

bump :oops:

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

First of all, Klaus, if you go back to tables none of us will ever speak to you again. Wink

I'm wondering if you shouldn't give an explicit width for #wires - sometimes browsers have rounding errors and such with %ages. Try

#wires {
padding: 0px;
float: left;
width: 195px;
...

That will also prevent some of the text "bleeding" over into the .fest column.

Overall the site looks pretty sharp there, Klaus.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

First of all thanks for your comments - appreciate that Smile

Well I really don't want to go back to tables - but if I can't find a solution then I prefer tables than the site messing up on the users.

I tried the width:195px; for wires but no joy Sad but left it as I guess it won;t hurt any either. I tried using more clearfix everywhere but it does not seem to make any difference..

Any other ideas?

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

Well - I have looked at this in IE 6 and 5.5 today and it works just fine - looks the same as FF. I think it partly depends on whether the #wires content extends past the .fest content - it doesn't always depending on the changing content.

I am wondering. Right now you have a left-floated #wires with repeated ul blocks and then on the right you have individual .fest blocks. Both #wires and .fest are within the #ftrs.clearfix block which should clear the #wires. You could simplify a number of things if you made a block to hold all the right hand content like:

/*block to hold the right hand centre content*/
#fstuff {
 margin:0 0 0 200px;
}
/*General form of title style*/
.blue, .red, .green {
 padding:2px 2px 2px 5px;
 border-top:1px solid #000;
}
.blue {
 background: #02407E url('/css/b.gif') repeat-x;
 border-color:#eee;
}
.red {
 background: #900 url('/css/r.gif') repeat-x;
 border-color:#900;
}
.green {
 background: #347236 url('/css/g.gif') repeat-x;
 border-color:#eee;
}

You determine the dimensions of all the right hand content using the #fstuff div - that means you have to drop the left margin from all the stuff inside (the <p> and .fest div blocks)(BTW - those <p> you use for the titles should actually be something like <h3> or <h4> semantically. Anyhow if you look above, the .blue, .red, .green don't have contextual selectors - they are now classes that can be used for titles anywhere. This is just one example where you are once again overcoding, or at least being too specific with contextual classes that should actually be more abstract so you can use them anywhere.

Anyhow, I digress. If you create a block for the right hand content you may just kill two birds with one stone. It may make it easier for IE to figure out what the *&@^%(* is happening.

Finally, do yourself and everyone else a favour - format your CSS - it is soooo hard to find a class or id in your code - I copy it into a text editor and run a little format to get it into a form that I can use and then do a search for the selector.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

This is driving me crazy - I followed your advise (and while I was constructing the page offline it seemed to work)

The I went online with the exact code and then it messes up again. I have attached an example that cuts off the wires on the left EVERY time in IE - hope you can see what goes wrong - I just don't get it..

I use the same code on the site live now - but I have reduced the number of stories in the #wires to 3 per subject to ensure it is usually shorter than the features on the #fstuff so at least it looks ok most of the time.

Really appreciate your help in this

Cheers
Klaus

PS. I have nicely formatted the homepg.css for now Wink - the reason I strip it is simply to reduce file size

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

Klaus

I've tried a couple of changes that do two things. They make the central box the same style as the others and put some margin at the bottom before the #evnt block. It may work. As you suspected you have too many .clearfixs applied but ai don't see that as being the problem.

More later

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

Even that did not work - I have tried so many things now - thsi is really strange - sometimes it works then when you refresh it cuts it off again...

maybe I need to think of a completely new approach?

Thanks for your pateince - hope you have more ideas to try

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

Klaus, like you, I am about at my wits end. I wish Hugo and Tony and Gary and a few others would have a look at this. There may be something in your code that I am just not seing, or this may be an example of Tony's .clearfix not working in a complex nesting of floats within floats. However, please don't give up - there is always a way - we just aren't seing it right now.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

I am determined to beat this - but it is just really strange and it seems to be an IE bug of some sort.. (as it works fine in FF, Operah, NS and older IE even)

Let me know if you think of something

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

One last gasp:

/*block to hold the right hand centre content*/ 
#fstuff {float:right; 
  width:240px;
} 

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

Hi David,

Respect! - That did the trick Smile

Thanks for your help and patience in this.

On a second note - would it be correct to use h2 as the headlines of the titles on the right and left navigation too or would that be overdoing it (as it would be on every single page)?

I am currently not using h1 on the frontpage - is that an issue?

Once again - thanks for this - made my day(Drunk

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 15 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE problem - even after clearfix

Klaus

I share your relief although I still am perplexed that we had to do that to make the flot clear properly. We have your page working but I am not done with the issue from an academic standpoint. I need to explore some other issues to diagnose the essential flaw that kept that from working.

While you may be saving a small amount of bandwidth by compressing your CSS, it is miniscule and will be cached after the first page loads anyhow. You would do far better removing the non-essential contextual selectors. Wink I'd really recommend you keep it formatted and well annotated for now.

Now, regarding headings. Generally, my <h1> is also the <title>, depending on the site. I think the best sites echo their navigation in the title. You do this to a certain extent - on your subsidiary pages the <h1> and <title> are at least similar. You also use a fair number of <h2>s. Where I think you depart from convention is with the (over)frequent use of <ul><li> constructs for titles in the #wires section and sometimes in the sidebar. In order to create your titles you use class="t" on the first listitem. A list with one or two members in it is not really a list to me. I really think many of your instances of <ul><li> could be replaced with <h3/4><p> but that is just my opinion. However, there are a number of benefits to using headings - search engines like them, some screen readers and similar tools can use headings for in-page navigation, the possibility of targetting the tags contextually in your CSS exists since headings are used only for headings while you would not be able to target lists because they are doing dual duty.

Final observation, you still have some inline CSS that should be migrated out to your external stylesheet(Drunk. Once it is all there, start to pare back the extra styles and really look at the cascade to see what the default style for something is. And one last time - I think you should use ems for font sizing - it would require changing about 10 or so font-size properties. If you used font-size:80% in the body and then determined your px to ems conversion based on that, it would only take you a few minutes.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 38 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

IE problem - even after clearfix

David,

Thanks for your help and advise - I will clean up the css I have made for sure once I have migrated the last small inline fixes to the external files - and I agree that formating it is probably best practise anyway (might also cause dome browser confusions - one never know)

I found a really useful tool for optimising css (it does quite a good job I think)

http://flumpcakes.co.uk/css/optimiser/

I have optimised my CSS and it seems to work well - reducing the selectors as well as the size (one can also use the Pretty Text) for getting any CSS back to a nice formating..

Cheers
Klaus