[Solved] IE 6.0 Bug, need some help with a work-around

Header img display:block.

Unbelievable... it works, thanks.

FireFox.
Internet Explorer 6.0.

Same kind of problem again, anyone?

Url's did not change so:

Homepage: Click
Stylesheet: Click

Nope can't see a problem in my IE6

Do u use IE 6.0 or 7? Because the problem remains

anyone else who does see the bug in ie6.0?

It worked fine with IE:7. But still when i tried to view the site in IE:6 the pictures weren't horizontal, I'll take a look into it.

I checked it on several computers now and everyone i ask also witnesses the same bug, the menu is like 1 pixel bigger in IE6.0 then in FireFox.

Right it would help if you had said that it was the bottom graphic as I was still thinking about the top original problem!

What have you done so far in the way of debugging the problem? or were you hoping we would do that for you? it does help to know what steps may have been taken so that they are not covered again. Take out all unnecessary elements i.e the ul navigation, take the design back to basics just the main layout elements and their backgrounds , lets try and determine what is causing the problem, also add *{zoom:1;} to the rules to test for any hasLayout issues

Haha, my apologies for not mentioning the position of the problem

What i found out till now was that if i removed the Menu, the spacing which occured in IE was gone, so it must be something in the menu itself i think.

Thanks for all the help untill now, i'll try to be more constructive.

you can't expect us to be that clever, my screen was chopping off the bottom part , it was beyond my feeble mind to think to scroll down!

Great that's what I wanted you to do a bit of simple debugging, it will usually narrow down what is causing the problem and allow one to focus on a solution.

Did you try the zoom test? as that will explain what is happening. Also ensure you have no stray padding or margins at work on the ul elements.

Hugo.

your screen was chopping off the bottom part? what resolution / monitor do u useif i may ask?

I don't think i get what you're saying with the zoom test, never worked with that attribute.

Do you want me to put it into a menu container or something else?

I'll keep trying things.

The height on the anchor #menu ul li a {height:31px;} is the offending culprit remove 1px and all is well, but then possibly not in FF.

You were right about the padding, it was simply too much padding.

I think it's fair to say that IE6.0 and FF have major differences in Paddings and Margins, if there just was a perfect browser out there, sigh.

Well problem solved, thanks a ton hugo for your cooperation.

The only thing what didn't work yet is to center the whole menu

I'll look into that tomorrow...

Cheers!

Don't know quite what you meant by that?

With margins and padding (especially with ul/ol) you must control these aspects as browsers are allowed to use either for default values so you must clear them down and re-instate just one or the other as you see fit.

However it did seem to be the height sizing that was causing the problems but then you are getting lost slightly in too many rules for that menu really.

As for centring You may be better of switching to display:inline on the li/anchors and text centring on the ul, you'll need to use padding probably to add height width to the anchors.
Listamatic is a good site for many examples of how to style unordered lists.

Re the screen res business I generally never have a browser larger than 900×600 (400px when a ton of menu bars taken into account) the problem is that you have fixed a height even though you have no content. Generally setting height is to be avoided it's one of the principles that content dictates height in CSS What I'd expect that layout to be was height 100% (of the viewport)on a wrapper holding the whole layout and that it shrunk and expanded with browser height with menu/footer stuck to the bottom.

Sidenote: with url strings you dont have to quote them and indeed it can or use to cause problems for some browsers so it's best not done.

You guys changed my mind.

I placed the menu now on top, aligned right, still looking for the centered option though.

I'll try to play around with the menu but as it looks now nothing is really changing.

For example i changed display:block; in to display:inline; at the

anchors u told me about, but nothing seems to change.

Cheers

I tend to look for menus at the top of a page but then as proved my ability to scroll is pants

You would need to set the li elements inline as they are by default block level; anchors by default are inline.

Did you check out that link I suggested as it covers just about every method of dealing with list formatting.

http://css.maxdesign.com.au/listamatic/

Something along these lines starts to get close to what you're after

ul#navigation{
  text-align: center;
  border:0;
  padding:0;
  margin:0;
  width: 900px;
  height:50px;
  }
ul#navigation li{
  display: inline;		
  margin: 0;
  padding: 0;	
  list-style-type: none;
  border:0;
  font-size: 15px;
  line-height:50px;
  font-weight: bold;
  }
ul#navigation li a{
  margin: 0;
  padding: 14px 16px;
  color: #666666;
  text-decoration: none;
  border-left:1px solid #ccc;
  }

Hey Hugo,

Thanks for the link and the piece of code much appreciated!

The code only gave me an even worse headache haha, it worked quite well but there's one problem.

The "roll-over"-buttons in the menu don't spread themself widely troughout the whole button but instead leaving like 2 or 3 pixels on the right. it isn't the padding in the ul#navigation li a { } i checked that.

I came up with this code which is basically just finetuning your code, but still with the little display bug.

ul#navigation li {
	display: inline;		
	margin: 0 auto;
	padding: 0;	
	list-style-type: none;
	border:0;
	font-size: 15px;
	line-height:50px;
	font-weight: bold;
}
ul#navigation li a {
	display: inline;
	margin: 0 auto;
	padding-left: 10px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	color: #666666;
	text-decoration: none;
	border-left:1px solid #ccc;
}

Hope you find the energy and motivation to keep helping me, learning a lot here.

Cheers

I did notice that small problem which is why I qualified my post with "close to"

Couldn't see off hand where that problem was and didn't really have time to look further, I will if I have.

Hugo.

It's what I always forget about 'white space' it's the whitespace between inline elements. You can comment it out in the markup by placing comments between end and start of tags or I believe by adding a space between end anchor tag and li tag but that may be false.

Hugo.

Fun fun fun... You see why i didn't got to the solution? Because it's insane really.

But you nailed it, that did the actual job, still can't believe it.

watch the code and laugh your brains out:

<?php

?>
You guys never told me you're teaching magick tricks over here.

Cheers hugo!

You just have to laugh sometimes at the methods needed. For some reason I always forget this inline problem/workaround, I think inherently as I hate hacks in markup.

Yep, that goes for me too, i am a markup freak really, used to type out the tabled designs myself instead of using a wysiwyg-editor, they always messed up my way of marking up!

Anyway thanks to you Hugo, design phase is almost done. Last but probably not least of the problems is what i got after i put in the footer(.

I must admit, i designed this somewhat table-minded maybe, but hey that's why i am here right?
But it's working against me big time now, ironicly enough is Internet Explorer 6.0 showing the page like it should! But that always tells me that i did something very wrong hehe.

You'll understand what i want with this all if you see the correct and corrupt screenshot.

IE6.0 Screenshot - Showing correctly
FF2.0 Screenshot - Not centering 2 containers.

As you can see, the menu and the footer are being aligned to the left, but that's not what i want

And just for quick reference:

- Link to the Homepage[/b]
- Link to the Stylesheet

Thanks in advance for any help/suggestions.

I think this is probably due to not using auto margins on the ul it's centered in IE as the parent #menu has text-align center and IE incorrectly centres block level children which it shouldn't. Try margin:0 auto or at least auto left/right margins on the ul.

Hugo.

Hugo,

If {text-align: center;} is centering block elements, he's in quirks mode. In standards mode, it's one of the few times IE acts sanely. That may be a source of other idiosities.

cheers,

gary

No not in quirks mode, shows the addled state my minds in then, far too tired to think straight, signing off, if not sorted I'll pick up in the morning.

Hugo

Gary See what you mean, but actually IE always centers with text-align, I suppose it's not generally apparent as we are usually not in quirks mode have used auto margins and generally probably not applied text-align to the parent.

Hugo.

Hugo.

... Hugo do you wanna marry me? Ok joking, but again, your solution hit the spot.

Everyone thanks a lot.

@hugo: How did you manage to obtain this knowledge? Fail & Repeat or real books? If books, please show me a good one because i am very serious about getting to know everything about css.

Cheers all!

Hugo.

All this time, and I had not realized that. A quickie test proves you correct. Well, that knocks IE another notch down in my estimation. Hmmm, is that even possible?

cheers,

gary

It's something I stumbled upon as It's not really readily testable or apparent as such; why would we be applying text-align on a parent? other than the body tag and if applying text-align it would generally be on a paragraph or inline element and if elements were nested in a text-aligned element we probably would have re-set text alignment and probably have no width on anyway for a centered block alignment to be apparent etc.

I have to admit I can't recall seeing this mentioned other than in reference as a behaviour in quirks mode.

Hugo.

... Hugo do you wanna marry me? Ok joking, but again, your solution hit the spot.

Everyone thanks a lot.

@hugo: How did you manage to obtain this knowledge? Fail & Repeat or real books? If books, please show me a good one because i am very serious about getting to know everything about css.

Cheers all!

I'll accept your proposal, but I don't do housework!

I have never read a book on CSS at all, partly as I don't think that it is a subject that lends itself to that medium that well but there are some good ones on the market, books on PHP are a different story and I have a few tomes on that subject, but don't delve into them that often.

Practical experience is what counts and a massive amount of reading of the specs and any other resource I can find online but more than anything it's time and the accumulation of knowledge over that period of time, and test casing , then test casing some more.

You just have to spend a lot of free time playing, testing, seeing what happens.

The same or similar probably applies to the others here, one just has to knuckle down and code away

With books remember that they can't cover all of the little quirks or problems that may be encountered, some arise out of a dependent set of conditions that won't often occur but when they do it's the ability to identify actualy what is happening, seeing past the effect.

It's ok, i'll do the housekeeping.

Although i think you're right, web-based material should be learned trough the web right

I know i will continue trying, searching on the web for solutions or whatsoever.

But i do think i might speed up my knowledge by just reading a phat piece of book.

I guess it's one of my old school habbits.

I rather learn from a book then from a screen, but that's me

Found some books i'd like your opinion on them.
- http://meyerweb.com/eric/books/css-tdg/
- http://www.wrox.com/WileyCDA/WroxTitle/productCd-0764588338.html

I'll look up some more maybe later. but that book from Wrox (lol @ name btw) looks very interesting.

It includes:
* The preliminaries you need to iron out before you begin a site in order to avoid problems later
* How to tackle browser-compatibility issues
* Best practices for using XHTML with CSS
* How to successfully integrate Flash content into an XHTML and CSS site
* Using drop shadows, drop-down menus, bounding boxes, and rollovers
* Ways to develop a site that can reliably handle constant streams of up-to-date information

Cool I'm a great cook so don't mind doing all the cooking but can't do the washing up as it ruins my nails.

I't's due to the utter breadth and depth of the subject that you require a great number of resources and the fact that it constantly evolves; someone finds a workaround for a problem long after publication date of a book , a book that would be advocating perhaps a method now considered passe.

There is nothing wrong with a good book but alone it would not suffice to explain everything, there are too many ways of approaching something and that relies on your experience to choose the right one for that situation a book can only describe a particular approach, may be a very good approach, but not necessarily the only one

It's part of it all I - and it probably goes for most of the rest as well - am constantly searching, reading, learning it never stops, tonight I will get back to my sad attempt at form validation and try once again to master the reg-bloody-ex required so I'll be entrenched in the online php manual where I'll stumble across some function I wasn't aware of, get distracted, play around with it and manage not to sort my script out; but maybe have picked up a bit of new knowledge?

I guess it's one of my old school habbits.

You a monk ?

At times me too, I am or was a great reader, and there is no doubt that it pays to sit back and immerse in a book rather than screen from time to time, they are definitely not the same things!

Anything by old Oscar Meyer is generally worthwhile as his reputation is beyond repute as it were, he knows a thing or two about CSS

As well as anything by the legend that is Zeldman. ("Designing with web standards")

Dan Cederholm's "Bullet proof Web Design" received much praise

Wrox hm, imho no.

Just remember though direct methods or examples are all very well but represent one view and regardless of the authors rep there can be better approaches in different circumstances.

The oddly named books tend to be written by teams of twenty I have a PHP version then I bought a Larry Ullman and haven't picked up the Wrox one since

Yeah sounds good but also like it's trying to oversell slightly for instance all you need to know - more or less - about flash and standards is to be found in the well known 'Flash Satay' article at ALA's site (Zeldman again) btw ALA probably the most important tech online magazine.

Wow, thanks for the info again! Going with meyer's books then

Something totally different but, you might have a word or 2 to say about this design i just made, it's for my indoor-soccer team and just for the fun of it

Is this a design which could give a lot of css problems you think?

http://rch4.triumph-design.com/nieuw/

Oh and maybe more important, what do u think of it

The design looks fine, you shouldn't have a problem with it as far as marking up and styling goes, but then this is the problem in creating full layouts through graphics programs which look like a web page you now have to suborn html/css to do the graphics wishes, but in this case it should run smoothly.

Designed a new logo made some changes, think im satisfied now, im going to code it soon

btw sometimes for data ( Played matches with total score and if there's a report written about the match or not ), it's easier to put them in tables right?

Sounds as though you could justify it as tabulated data, but always with semantics we must deliberate, look at the choices of markup construct and make a decision.

maybe you tabulate the main score data and link to any match reports, perhaps they would be justified as smallish new window, depends on length and layout space within the page I guess.

Small problem. IE6.0 has problems with a png background, i countered the transparency problem, but the background should also be positioned "top center;"

I'm using the following Transparency hack:

.filter_content {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://rch4.triumph-design.com/test/images/_contentbg.png', sizingMethod='scale');

}
#content{ background-image: none; }

The only thing missing is a proper positioning for it, is there any way i could position this filter background?

http://rch4.triumph-design.com/test/ btw, FireFox proof