catfish Posted July 26, 2009 Report Share Posted July 26, 2009 (edited) Browser shots shows my right column falling down below the left. All other browser are good. Here is a link, I wonder if someone could help me with this. Thankyou http://www.catfishwebcreations.com/Bowie/homepage.html Edited July 26, 2009 by catfish Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted July 26, 2009 Report Share Posted July 26, 2009 I would not worry about ie5 or ie6 unless there is a very good reason to. Quote Link to comment Share on other sites More sharing options...
catfish Posted July 26, 2009 Author Report Share Posted July 26, 2009 (edited) Thank you so much for replying. The only reason I checked was because the client told me about this. The only other one I see an issue with is Dillo 2.1.1 which I never even heard of. I've tried to figure out how to fix it with no luck. Edited July 26, 2009 by catfish Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 26, 2009 Report Share Posted July 26, 2009 (edited) I've only had a quick look and haven't tested anything. Your #page div id 889px wide. Your #left div is 200 + 3 + 1 = 204px wide Your #right div is 675 + 8 = 683px Total 887px which is OK for IE7 and Firefox where I looked and found no problem, but I guess that there is a problem in IE6. This is because IE6 doubles side margins which are on the same side as a float an dyou have float: left; and margin-left in #left and float: right; and margin-right in #right so reduce the div widths or margins until IE6 works, then put the different styles in a conditional comment just for IE6 and leave the original sizes as they were for other browsers. I suggest that you reduce the margin-right for #right to 0 just for the test. If you reduce the div widths there might not be enough width for the divs inside. There may be other problems, but look at the above first. Edited July 26, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
catfish Posted July 26, 2009 Author Report Share Posted July 26, 2009 In my right column I have .content_col1 (floated left in my css) and .content_col2 (floated right) I thought I would check the right column without them, uploaded and did another browser shot. The left column remains at the top in 5.5 and 6 so it is my css for these classes that is throwing it off. My problem is that I still am fairly new with it all. Any ideas? Here is my new link http://www.catfishwebcreations.com/Bowie/trial.html Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 26, 2009 Report Share Posted July 26, 2009 (edited) I've looked at your trial.html page in IE6 and couldn't see a problem so I looked at your first link to the full homepage and could see that the right column had dropped below the left. I tested on IE6 and found that editing the #right margin-right to 7px instead of 8px solved the problem. I tried 4px and gradually increased until it failed at 8px, so I went down one to 7px. Since other browsers are OK, put this conditional comment after the last stylesheet link and just before the closing tag:- lt ie 7 means less than IE7. The reason it's only 1px difference is that IE6 only has the double margin bug with float: left combined with margin-left, not with the right side. See http://www.positioniseverything.net/explorer/doubled-margin.html and you have margin-left: 3px for #left which has float: left but there was 2px space 887px to 889px so only 1px of the 3px margin was causing the problem, not the margin-right on the right side. Edited July 26, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted July 27, 2009 Report Share Posted July 27, 2009 The only reason I checked was because the client told me about this. That is reason enough to fix it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.