14 replies [Last post]
IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

I have run this site through CSS and XHMTL validators and have no errors. (I have a couple warnings in the CSS but I corrected all errors). The site is not finished and most of the links are inoperative right now, I am just trying to figure out why my site totally gets killed in IE6.

http://www.indianaflightcenter.com/newsite

Any suggestions would be much appreciated. I thought I was doing great until I looked at it on an IE6 machine....holy crapola.... :bigoops:

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm... maybe it's the

Hmmm... maybe it's the @charset thing throwing it off? You have a proper Doctype, it works in IE7, and your CSS doesn't seem to have anything obviously weird with it (bloated, yes, but should work regardless : )

Two notes: you're repeating yourself by having widths and margins on the stu-version css, and also saying it in the normal css. Though I started out with Stu-menus, they are messy and very difficult to work with. I prefer the cleaner Suckerfish (Stu's menu has a single advantage, and that's that it bloats the menu a bit with those tables, which allow IE6 to hover and show the dropdowns without Javascript... but the rest of your page is filled with Javascript, so I didn't think that was the reason you used it).

Here's an example of making your code a little easier to read (easier to debug):

/*this removes margins and padding from everything... if this is only on the body, lists seem to keep their strange*/
/*defaults and you have to re-zero them, I've found*/
* {
  margin: 0px;
  padding: 0px;
}
 
body {
  background-color:#4F4F4F;
  font: normal 12px Arial, Helvetica, sans-serif;
}
 
.container {
	width: 765px;
	margin: 0 auto;
/*borders are only defaults on images, so you never need to "undo" borders on everything */
	background-color:#fff;
}
.logo {
/*all blocks (divs are blocks too) will be default try to be 100% width of their parents (in this case, */
/* .conatiner is 765px wide so the only reason to set a width on this would be to trigger Haslayout in IE6 */
/* if needed.  The background colour will also show through from .container so even a background colour */
/* isn't needed : ) */
}
.topnav {
  width: 765px; /*this is already stated in your Stu-css though, and is only needed for Haslayout anyway*/
} margin-top: 5px;
}
.main_image {
	margin: 5px 0 10px; /*again no need for auto cause that centers.. but there's no room for it to be */
/*anything other than centered anyway, cause it's 100% wide*/
}
.content_container {
/*same thing, doesn't even need to be mentioned */
}

Borders are off things by default, except images. I usually have near the top of my CSS sheet:
img {
border: 0;
}
and sometimes
img {
border: 0;
vertical-align: bottom;
}
if I find the little gap underneath images a problem.

Margin: 0 auto; centers blocks which have a width on them. But if the block is already 100% wide as its parent (the default unless you say a different, smaller width) then there is no room for margins at the sides anyway, so not needed.
Margins, padding, and borders can all be mentioned in shorthand versions, which I find easier to read (though maybe it's not easier for you, so it's no harm to keep each side separately mentioned or anything).
margin: top right bottom left;
margin: top sides bottom;
margin: top-bottom sides;
margin: allsides;
same goes for padding.
border: width style colour;
or
border: style colour;
border-width: top right bottom left (with units);

All that aside, again, I don't see anything that would obviously freak IE out, so I'm guessing it might be that @ in the front (which, you don't need, your charset is saved with the document in your text editor and then your hosting server sets charset in the HTTPheaders). Because IE6 isn't in Quirks mode, it should be obeying the major box positions just fine.

I'm no expert, but I fake one on teh Internets

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

I tried removing the @ and I

I tried removing the @ and I also tried removing the @charset "utf-8"; all together. That seems to have no effect on the rendering of the page in IE6. It's weird because IE6 seems to load the top container ok but the middle container is totally caddy whompas.

I have not gone through and killed the redundant code just yet because I am really wanting to leave it alone until I get the rendering fixed. I'm totally lost on how to fix that.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I think the only way I could

I think the only way I could find the problem would be to rebuild the first page. Your design is simple and strong and there's just no reason I can see that IE6 would have issues with (other than the @charset because I don't use it so was unsure if that was maybe the culprit).

The redundant styles aren't (or, shouldn't be) causing the issue either...

How about, if I get some time this weekend, I can do a quickie rebuild (without the js... that's another possibility problem although I really don't think that could be it) and see what I run across. At home, I cannot test IE7 yet (need to do another Windows install this weekend), but I can test 6 and all other modern browsers.

If I get to it, I'll throw a link from my server here in this thread. Sometimes I only find issues while really crawling through the code (and your code is fairly clear actually). If I can't reproduce the problem (if mine looks good in IE6) then at least you have the differences between the two to test as the problem.

I'm no expert, but I fake one on teh Internets

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

Thank you very much for any

Thank you very much for any assistance you can offer. As I mentioned, I am at a loss to solve this problem. I just don't know how.

alexvorn2
Offline
Regular
Last seen: 14 years 9 weeks ago
Joined: 2008-07-05
Posts: 22
Points: 0

Don't worry! A few people

Don't worry! A few people that now use IE6.

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

I would like for my code to

I would like for my code to work on both browsers rather than hope for the statistics to work in my favor.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yesh IE6 will keep sticking

Yesh IE6 will keep sticking around for a bit. In my country, it was over 47% until July. It's still above 30%, too high to abandon just yet.

two things I've already found--
you set the charset as UTF8, and my browser looks for UTF8, but the copyright symbol still shows up as a ? in my browser. Somethings up with that, because it should show.

second, the page is in tables, which while I doubt that's the problem itself, I'm very unfamiliar with actually using tables for layout, so anything I build may end up useless for you because it will be in divs and semantic HTML elements. And I'm using a Suckerfish in place of the Stu menu cause they're clear... I started out with Stu menus and could not edit them easily. When I saw the suckerfish, I almost cried, it was so clear and easy. It does require a javascript to make IE6 hover, but you are not afraid to use Javascript in your pages (and even if you didnt' want two scripts trying to load on the same page without an event loader, which would make only the last listed script work, you could have Peterned's whatever: hover .htc file installed on your server, which has the benefit of letting IE6 hover over ANYTHING you want to hover over. Which is very nice)

*edit, links to Peterned's page: http://www.xs4all.nl/~peterned/csshover.html
silly guy doesn't seem to have a link to it on that page, so here's the code: http://www.xs4all.nl/~peterned/htc/csshover2.htc

Also, now if you add the behaviour line to your CSS file, you can add that to ANY css file and make IE6 hover on ANY page or website on that server, an additional bonus.
But if you cannot addd things like that to the server, the Suckerfish uses 12 lines of JS to make IE6 hover but you need to add a hover class to the CSS:
http://www.htmldog.com/articles/suckerfish/dropdowns/

I'm going to use Suckerfish just because it's much easier than stu's... you can still use your Stu menu on your current site no problem, so long as you make sure the css for one doesn't infringe on the rest of the page (no reason to keep stu's css separate, you can lump it into your single css sheet, less loading for your customers.

I'm no expert, but I fake one on teh Internets

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

Actually, the only table in

Actually, the only table in the site is in the top container. Aside from that there are no other tables. The table that does exist is 1 row two columns...pretty simple. I sincerely doubt that's throwing IE6 off.

As for the menu, there may be a better option in terms of menus but I don't think that's causing the weird reaction either. At the moment, I'd like to focus on something other than the menu regarding this issue but I can't figure out what. I am going to do a slow rebuild today probably adding each piece back in slowly until it breaks. That's all I can think to do.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah that's what I'm going

Yeah that's what I'm going to do too-- simply recreating your layout with mostly your HTML doesn't cause issues, so I'm going to start again and kinda work backwards.

I'm no expert, but I fake one on teh Internets

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

Quote:I am going to do a

Quote:

I am going to do a slow rebuild today probably adding each piece back in slowly until it breaks. That's all I can think to do.

What else would one do? Part of the job of a web developer, someone writing code, is to know how to debug their code when it doesn't quite work as expected, you could,even perhaps should, have done this before bringing the problem to a forum; it would have stood you in good stead if you could have said to us that you had tested for and ruled out certain areas that may have been issues.

As it is the first thing I would have done is to remove all the IE6 conditionals along with the associated stylesheet to ensure that it wasn't the problem (I have ranted in the past in threads of my dislike for this solution to a perceived problem- murdering markup for the sake of a rubbish browser is no solution as far as I'm concerned) This may well not correct the issue but you have started to reduce the layout back to basics which will allow you to better isolate where it does occur.

On a sidenote it's a shame that this menu technique should be found and used rather than suckerfish, suckerfish has been around for an absoloute age as has the example on this forum writen by Tony both work well both can have their respective scripts replaced with the hover2.htc file which will also provide :focus on all elements.

Do some basic debuging of the page and let us know how it goes, with such a glaring problem it shouldn't be too hard to track down but that is easy to say Smile

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I'm 99% sure it's the menu.

I'm 99% sure it's the menu. The rest of the text in the main body is the same colour as the menu when hovered over, and when the other menu items are hovered over the submenus are much too large... trying to encompass all of something.

I'm looking for the actual problem now, because I think it's a misplaced or unfinished IE conditional comment.

That would also explain why it only affects IE6, and why everything is off-centered (like the submenus are supposed to be).

However, I'll also post my Suckerfish version of the same menu since I already built it yesterday.

*edit actually I think it's the first line:Maintenance
all the other list items have the inside the comments.

I'm no expert, but I fake one on teh Internets

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

Thanks, I'll try removing

Thanks, I'll try removing the menu right now and see what happens. If that works, I'll chase down suckerfish and see about using that instead.

I apologize Hugo if I violated the etiquette this site. I am not a professional web designer, actually I am a professional pilot who was asked to do IT work. Therefore, I am not entirely up on the do's and dont's in this arena.

IFC_webguy
Offline
newbie
Indiana
Last seen: 14 years 19 weeks ago
Indiana
Joined: 2008-09-11
Posts: 7
Points: 0

You were right, I removed

You were right, I removed the menu and that did the trick. I will start investigating suckerfish right now. Thanks for helping out a newbie. I will also carefully go through the responses on this board and see about following the rest of the suggestions.

This is the first site I've ever created using CSS, so I am still trying to learn my way through it.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, well, my husband

Ah, well, my husband installed my second Windows for IE7 on my machine, and then he turned both Virtual Boxes on... so now my computer is a bit borked, so I COULD NOT FINISH TESTING however
I have a suckerfish of your menu done, though without the Suckerfish JS or extra classes. I have added a "trigger" for IE7. The JAvascript is only to make IE6 hover, but somehow it also satisfies IE7's need for an extra bump on hover. But if you use the Peterned whatver:hover, then you'll not have extra CSS classes or Javascript in your so the trigger is needed.
I wish I could have tested in Opera to see if it was ok with width: auto : ( but this machine only has FF.

http://stommepoes.nl/Flight/flight.html
I didn't redo the whole page... pretty much is okay until the rotating image... which btw, when I tried copying it, it wanted to be named flight2000.jpg.gif and was not a valid jpg file. It's named jpg but is actually a gif (and looks great as a gif so just leave it as one, but fix the ending of the name).

The menu doesn't have the arrow images you plan (I couldn't get those without being redirected to the current site) however to add them, you'd add some left or right padding on the anchors (whichever side needs room) and set the image as a background. Just something like
#menu a {
background: url(arrow.gif) left center no-repeat;
}
...
#menu ul a {
background-image: none;
}
or something. They're decoration anyway.

It's a good idea to go through Suckerfish until all of it makes sense (and make sure you're reading Sons of Suckerfish since the original Suckerfish had crapola for JS and missed the Opera bug). But if you need the new menu right now in a pinch, there it is, you can see what I did. If Opera is a problem, you'll have to set a real width instead of "auto" on the li's. Know that floats without a width set on them should shrink-wrap but I'm not sure they do this well in IE : )

The changes to the header aren't anything you need to do, but you can take a look and pick through it. One thing I like to do when a site has a logo that kinda represents the name of the whole site is use Gilder-Levin image replacement (http://www.mezzoblue.com/tests/revised-image-replacement/ scroll down, second from bottom) and a good element with real text, so that the search engines have some real true text to see, not just alt text, and the image covers that text-- so if you have some Midwestern dial-uppers surfing with images off for faster page loading, they get some nice text (style to choice) when the image doesn't show.

Personally, with boxes like content_container, I make those id's instead of classes because there are always only one of them per page, and they're "major" boxes-- however this is just a personal thing that's popular-- classes for things which have multiple members and id's for single things like wrappers, containers, and page chunks. Ultimately it doesn't matter though.

If this is your first site created with CSS, it was done VERY well. My first pages weren't this good. Maybe you can do websites on the side for extra revenue : ) I too started with the Stu menu, and lots of other people do too, so that's normal.

Listen to the crusties here but don't mind their crustiness. Looking back, it seems it should have been obvious to me that it was the menu doing it because of the hover colours and off-setting, but oh well, I didn't, and I looked at the code and didn't see anything. It usually is a good idea to crawl through a page, building chunks of it, until finding the problem, but when it's only IE6 it's often an IE6 bug and it makes perfect sense to me to come to a CSS forum to ask what this could be-- most of the bugs you can figure out what part of the page is triggering them but not why until you become familiar with bugz.

I'm no expert, but I fake one on teh Internets