Hi I have several DIVs inside each other which last inner ones get their data dynamically from a database. Until IE7 everything was OK and I didn't have to worry about the height of DIVs but now if I don't set the height of the parent DIV it will be set to the height of the first child div - or I think so -.... I google the problem and there doesn't seem to be a symentical solution for that. Am I right that there is not sensible solution for this? I have already started moving back to tables.
Thanks for the promt reply but the problem is that I cannot set the height for the parent div because I don't know the height and if I don't set the height it wont extend to the childest div where the data is loaded into.
Sorry I took me some time to get back. Funnily I haven't managed to recreate the problem on IE but I still have it on FF. Check this url with IE and FF and you'll see what I mean: http://www.labreports.info/testdiv.php I hope everything is self explanatory here.
You will never get IE to attempt to perform like all the other more modern browsers without a doctype. Right now you are in quirks mode without one. Add this to your first line: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> You should be using Firefox as your reference when you test. IE does not matter till you get things right there since IE doesn't get much right anyway. Once it works in FF, google for the bugs and quirks of IE but the hacks to fix IE are well known.
I have two calculators. One says 3x4=12. The other is broken and says 3x4=17. How do I get the first calculator to show 17 like the second one? Now re-read my post and do what I said.
As the good doctor said, …. You simply don't know how floats work. See Enclosing float elements. Short version: remove height property from div1, add {overflow: hidden; zoom: 1;}. The overflow is for everyone but IE6; for that, the zoom property. IE8 acts like FF because it was finally brought, kicking and screaming, into this millennium. cheers, gary
No, he should be using at least one each of ALL the major browsers as each section gets styling. Gecko is just as flawed as Trident having decade old gaps in the HTML4/CSS2 implementation and oddball render quirks -- alt-tab F5, it's not that hard. Bullcookies. Given that IE is the majority of users you should be testing SIMULTANEOUSLY so that you don't end up using markup and CSS techniques that will NEVER work in IE. @mnaghdi - As to the problem at hand, while adding a doctype is a good start, some valid markup wouldn't hurt either... though the biggest problem is the markup is flat out over-thought. Most of the DIV present on the page are unneccessary/redundant. You may want to investigate something called "Semantic Markup" and it's partner "Separation of presentation from content". For what you have for appearance, there is NO good reason for the HTML on that page to be much more than: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> --> <title> Fereshteh Safarzadeh Markhali </title> </head><body> <div id="pageWrapper"> <h1> <a href="/"> Lab Reports </a> </h1> <hr /><!-- for CSS off users --> <div id="fauxColumns"> <ul id="mainMenu"> <li> <a href="/">Home</a> </li><li> My Researches <ul> <li> <a href="/cat/1/Nutrition">Nutrition</a> [3] </li><li> <a href="/cat/2/Food+Analysis">Food Analysis</a> [1] </li><li> <a href="/cat/3/Microbiology">Microbiology</a> [1] </li><li> Food Safety </li> </ul> </li><li> <a href="/other.php">My Other Works</a> </li><li> <a href="/aboutfereshteh.php">About me</a> </li><li> <a href="/contactfereshteh.php">Contact Me</a> </li> </ul> <div id="content"> <hr /><!-- for CSS off users --> <h2>Hello</h2> <p> My name is <strong>Fereshteh</strong> and this is my personal website. I am an expert in Human Nutrition and Food Bioscience. </p><p> I am the writer of articles on this site - which by the way was created and is being maintaind as a hobby by my husband, Mehdi -. To read more about me please check out <a href='./aboutfereshteh.php' style='text-decoration:underline;'>here</a>. </p><p> I regulary submit the results of my researches to press release websites and directories. To see samples of my works please try one of the subjects on the left hand menu. </p><p> I also contribute to promoting my husbands websites which are mainly on travel and hotel reservations. For a few samples of it please check <a href="/others.php">here</a>. </p> <hr /><!-- for CSS off users --> <h2>My latest publications</h2> <ul class="publications"> <li> <a href="/pub/8/Probiotics+and+prebiotics"> Probiotics and prebiotics </a> </li><li> <a href="/pub/7/Factors+involved+in+quality+and+nutritional+value+of+fruits+and+vegetables+during+processing"> Factors involved in quality and nutritional value of fruits and vegetables during processing </a> </li><li> <a href="/pub/5/Inhibiting+effects+of+fruits+and+vegetables+on+cancer+and+heart+disease"> Inhibiting effects of fruits and vegetables on cancer and heart disease </a> </li><li> <a href="/pub/4/Low+fat%2C+meat+based+main+meal+products+for+children"> Low fat, meat based main meal products for children </a> </li><li> <a href="/pub/3/What+is+the+Atkins+Diet%3F"> What is the Atkins Diet? </a> </li> </ul> <!-- #content --></div> <div id="footer"> <hr /><!-- for CSS off users --> <!-- #footer --></div> <!-- #fauxColumns --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): EVERYTHING else you are doing on that page belongs in the CSS. Gimme a few minutes and I'll toss together an example of that too.
... and here it is working with the CSS: http://www.cutcodedown.com/for_others/mnaghdi/template.html as with all my examples the directory http://www.cutcodedown.com/for_others/mnaghdi/ is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, functionally identical in IE 5.5, 6, 7 & 8, FF 2 and 3.5, Opera 9.64 and 10, and the latest iterations of Safari and Chrome. I played with the formatting a bit, opened it up so that the menu column can expand to fit for large font/120 dpi users, added some color states to the anchors since the ones you had weren't getting applied, upped the font sizes to meet accessibility minimums, etc, etc. .. and as you can see, it's a lot simpler than what you had. It's very easy to over-think a layout, in particular the markup. Just as George Carlin said not every ejaculation deserves a name, not every tag deserves a div around it or a class on it. Oh, I also fixed the heading order since it's improper to jump from a H1 to a H3. Remember, use a tag for what it means, NOT how it appears.
I said that because he said he tested in Firefox after IE. I doubted he did anything else but I agree with what you said. Bullcookies, as someone once said. Never, ever trust IE to do ANYTHING right. That will NEVER happen. IE will always trail behind all the other browsers just like it always has. Yes, you should test simultaneously so you don't get too deep into coding before realizing what you are doing will never work in IE cause IE is so screwed up and it might force you to change your structure, but advanced techniques that don't work in IE (most of them) should be known beforehand.
for the height problem, have you tried inserting a <br /> tag with clear set to both? <br style='clear:both' /> Its a very common problem. Sometimes its not the browser fault. You need to check and make sure that all your tags are opened and closed properly.
Yes. And early morning, too. I may have mixed two threads up but I'm not awake enough to notice it still.
Which is basically something that doesn't belong in the markup... Just like that clearfix asshattery. Is overflow:hidden and a haslayout trigger REALLY that hard people?