 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2005Small simple page validates, works fine in everything except IE - Can anyone help?
Hi, I'm tired of banging my head on the computer. I'm hoping someone can help? I have a very small simple page that looks perfect in Firefox, Safari, and Netscape. It's clean. The HTML and CSS both validate. In IE/Mac, however, the container div is significantly smaller, and the content overruns it. In IE/Windows, the content of the right column only starts displaying after the contents of the left column are completed. I have SCREENSHOTS to illustrate the 2 problems here: http://resume.mle4hire.sent.com/bk/screenshots.html and I have a minimal version of THE PAGE ITSELF with an internal stylesheet here: http://resume.mle4hire.sent.com/bk/minimalbad.html. I really appreciate your help. THANKS. >Hi, I'm tired of banging my head on the computer. I'm hoping someone >can help? I have a very small simple page that looks perfect in [quoted text clipped - 7 lines] >http://resume.mle4hire.sent.com/bk/minimalbad.html. I really appreciate >your help. THANKS. Read up on: http://www.google.com/search?q=doctype+sniffing  SignatureSpartanicus Melanie, Let me preface this by saying that I'm not a total expert. That being said, I noticed that you haven't included a full Doctype declaration in the top of your page. If you don't have a full Doctype, IE will default to "Quirks" mode and not render the box model correctly. See http://css.maxdesign.com.au/listamatic/about-boxmodel.htm to see what I'm taking about. The particular chart I'm referencing is at the bottom of the page, but the whole page is useful to read. Try using a full doctype and see if anything changes. ------------ Viken K. http://home.comcast.net/~vikenk > Hi, I'm tired of banging my head on the computer. I'm hoping someone > can help? I have a very small simple page that looks perfect in [quoted text clipped - 7 lines] > http://resume.mle4hire.sent.com/bk/minimalbad.html. I really appreciate > your help. THANKS. Thank you both Spartanicus and Viken for the tip about doctypes. Haven't seen it in windows yet, but it fixed the glitch immediately on the mac. I'm sure that having a better understanding of this will help me loads in the future. Thanks! M. Thank you both Spartanicus and Viken for the tip about doctypes. Haven't seen it in windows yet, but it fixed the glitch immediately on the mac. I'm sure that having a better understanding of this will help me loads in the future. I'm still a little confused about how to choose the correct doctype, aside from grabbing one at random from the list that triggers standards mode. Some must be right, others must be wrong... I'm still missing something. But thanks a lot for putting me on the right path! M. > [...] I'm still a little confused about how to choose > the correct doctype, aside from grabbing one at random from the list > that triggers standards mode. Some must be right, others must be > wrong... I'm still missing something. But thanks a lot for putting me > on the right path! Unless there is some seriously compelling reason, use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) UPDATE: Thanks again for the tips about the doctype. As I mentioned, it seems to make IE happy on the mac. But I discovered today that it makes no difference in IE/Win: I still have the problem of the dropped content in the right coulmn. I have updated the test page (link in previous post) -- If anyone has any further ideas on why this is still not working, I would be very grateful to hear them. Thanks again. M. >UPDATE: Thanks again for the tips about the doctype. As I mentioned, it >seems to make IE happy on the mac. But I discovered today that it makes >no difference in IE/Win: I still have the problem of the dropped >content in the right coulmn. I have updated the test page (link in >previous post) Remove "float:left" from #leftside, remove the left-margin from #rightside, set "float:right" to #rightside instead. SignatureSpartanicus >>UPDATE: Thanks again for the tips about the doctype. As I mentioned, it >>seems to make IE happy on the mac. But I discovered today that it makes [quoted text clipped - 4 lines] > Remove "float:left" from #leftside, remove the left-margin from > #rightside, set "float:right" to #rightside instead. And, in the HTML source, move the entire 'leftside' <div> AFTER the 'rightside' one. Although this is far better structure, I'm still mystified as to why the original version didn't work, unless (could it be?), there's a bug in IE. Chris Beall > > Remove "float:left" from #leftside, remove the left-margin from > > #rightside, set "float:right" to #rightside instead. [quoted text clipped - 4 lines] > Although this is far better structure, I'm still mystified as to why the > original version didn't work, unless (could it be?), there's a bug in IE. Hm. Nope. Tried it, caused extra problems, fixed the extra problems, original problem is still there. Except maybe in reverse? Content of left column is dropped? At home without a windows machine, I forget. Originally I used the layout found here: http://www.nysfirm.org/documents/html/wmg/css-4-1-05/twocolumn/fixed.html (how can I put that in so it just shows up as [link]??) When I switched the float:left to the float:right, some wierd things happened. The photo stuck out the bottom of the div. I added on the original footer div with the navbar, and that solved the photo sticking out just fine, but the navbar was on two lines. I needed to resort to the html tag of 'br clear="all"' to get it to sit right, which I had thought (??) was replaced by the 'clear:both' tag in the navbar div. It cleared in the first version, but not in the second. And after all that, as I said, the content is still sunk, so the same problem is there. Oh yeah, and it looks insanely bad in IE/mac, but at this point that's beside the point, because the original problem page is still less flawed and needs fewer fixes than the new flawed page. Here's the link if you're currious: http://resume.mle4hire.sent.com/bk/badtest.html CSS isn't new to me, but pure css layouts are. This is a frustrating beginning, because it would be so easy to fix with a table. I want to be converted to the other side. If I can't make such a simple layout work, I'm terrified of bigger ones. > Originally I used the layout found here: > http://www.nysfirm.org/documents/html/wmg/css-4-1-05/twocolumn/fixed.html [quoted text clipped - 4 lines] > be converted to the other side. If I can't make such a simple layout > work, I'm terrified of bigger ones. I feel the same, and also don't normally have access to Windows Internet Explorer, which is where I run into the most problems. On your layout, I am a little confused by your HTML. Given your side text is the description, and your main content is the photo, why not have your right side photo div below the leftside div in your HTML? That would seem to me to be closer in structure to the original two column layout you were using as a basis. Signaturehttp://www.ericlindsay.com > When I switched the float:left to the float:right, some wierd things > happened. > http://resume.mle4hire.sent.com/bk/badtest.html Looks like you changed more than the float. Your DOCTYPE is triggering quirks mode rather than standards mode, so results can be even more, well, quirky. ;) > CSS isn't new to me, but pure css layouts are. This is a frustrating > beginning, You will have a lot less frustration if you give up the notion of pixel-perfect layouts and fixed-px-size elements (images excepted). <URL:http://www.allmyfaqs.net/faq.pl?AnySizeDesign> There is no reason why your left column must be exactly 250px wide, or the content area in general must be exactly 750px wide (or whatever). Consider your visitors that use large windows and/or large text. Your layout does not accommodate them at all. :( BTW, IE's overflow behavior is very broken, both Win and Mac versions. It often ends up doing exactly what you're complaining about (or something even worse) if the content overflows its box boundaries by even 1 pixel. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. >>>Remove "float:left" from #leftside, remove the left-margin from >>>#rightside, set "float:right" to #rightside instead. [quoted text clipped - 31 lines] > be converted to the other side. If I can't make such a simple layout > work, I'm terrified of bigger ones. Melanie, OK, here's what I did, starting with the URL you posted above: 1. Replace the obsolete Transitional DOCTYPE with (on one line): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> That (in IE 6) brought the picture back up alongside the text. It also gave me an error in the HTML validator, so... 2. Deleted '<BR clear=all>'. That satisfied the validator, but, using Netscape 7.1, caused the nav line to be stair-stepped onto two levels. 3. I removed 'margin-top: -8px' from the '#navcontainer UL' selector. This fixed the stair-stepped navigation. 4. I removed 'position: relative' from the same selector, 'cause I didn't understand why it was there. This had no apparent visible effect. At this point the page looked clean, however the spacing between the bottom of the image border and the double-line above the navigation was much larger in IE than in NN (where the two actually touched). It wasn't clear what you intended here, so I didn't feel confident trying anything more. [Whenever IE is different, I suspect an IE bug. If the difference is tolerable, i.e. it doesn't prevent communication of the page content, I let it go. I see no reason to exert effort to make IE look good when it clearly is not.] I do note a lot of pixel-specific properties in the CSS. That's seldom a good idea, because what looks good in one user environment may look horrible in another. You will be less stressed if you take a more casual approach to the relationships between on-screen objects (Example: 'X should be to the right of Y, unless the window is narrow, in which case X should follow Y', rather than 'X should be 4px to the right of Y'). Chris Beall Hi, thanks to all for your combined help. The little page works as intended now, solved by the problems of doctypes and pixels. Using the correct doctype and increasing the width of the div holding the picture just a bit on the original page did the trick. It would have been the simplest thing to try first and I feel a little moronic. Still, the experience of trying other fixes was valuable for the learning process. I appreciate also the advice to avoid fixed-dimsension and pixel based layouts. I had my reasons here, but still thank you for your advice. Generally I am in agreement. Chris and Spartanicus especially, thanks for taking the time to redesign the floats and the flow looking for the solution. Flipping the left and right floats never worked quite right -- Chris (only if you're currious), removing the 'margin-top: -8px' and 'position: relative' from '#navcontainer UL' broke the cute stolen navbar, and I couldn't get that to fix without the totally redundant and bogus '<BR clear=all>' tag. Also, the left and right divs went full-width and lay one beneath the other in IE/Mac. Maybe more time and energy would have gotten me through those problems, but it seems like a waste now that I have the layout I was aiming for. If you're currious to see the difference, the suggestions you made that almost worked (1), and the final fix (2) are both availble: http://resume.mle4hire.sent.com/bk/suggestion1.html http://resume.mle4hire.sent.com/bk/suggestion2.html Thanks again. > > Remove "float:left" from #leftside, remove the left-margin from > > #rightside, set "float:right" to #rightside instead. [quoted text clipped - 4 lines] > Although this is far better structure, I'm still mystified as to why the > original version didn't work, unless (could it be?), there's a bug in IE. Hm. Nope. Tried it, caused extra problems, fixed the extra problems, original problem is still there. Except maybe in reverse? Content of left column is dropped? At home without a windows machine, I forget. Originally I used the layout found here: http://www.nysfirm.org/documents/html/wmg/css-4-1-05/twocolumn/fixed.html (how can I put that in so it just shows up as [link]??) When I switched the float:left to the float:right, some wierd things happened. The photo stuck out the bottom of the div. I added on the original footer div with the navbar, and that solved the photo sticking out just fine, but the navbar was on two lines. I needed to resort to the html tag of 'br clear="all"' to get it to sit right, which I had thought (??) was replaced by the 'clear:both' tag in the navbar div. It cleared in the first version, but not in the second. And after all that, as I said, the content is still sunk, so the same problem is there. Oh yeah, and it looks insanely bad in IE/mac, but at this point that's beside the point, because the original problem page is still less flawed and needs fewer fixes than the new flawed page. Here's the link if you're currious: http://resume.mle4hire.sent.com/bk/badtest.html CSS isn't new to me, but pure css layouts are. This is a frustrating beginning, because it would be so easy to fix with a table. I want to be converted to the other side. If I can't make such a simple layout work, I'm terrified of bigger ones. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.