|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: IE6 / Firefox Discrepency
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 6
|
|
| Author |
|
danny_southern
Stranger Joined: Mar 4, 2008 Post Count: 15 Status: Offline |
Hey, Can someone give me a pointer or show me what I'm doing wrong with this web page I'm working on. I did the design in firefox first, ie next thing, but I'm having difficulty with IE. The bottom portion of the page is oddly centered in IE6. Here how it looks in Firefox (the correct way):  Here is how its displayed in IE6:  I've included the html file and images (46kb) at the following link: http://www.sendspace.com/file/5si985 Also, how do I go about donating to this site? Thanks again in advance. |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
IE7 is OK, as is Firefox, but as you say, IE6 displays incorrectly. Edit by adding a nil-height clearing div between right_column2 and productinfo:- ..............<div class="right_column2"> </div> <div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;"> </div> <div class="productinfo">.................. Which forms an invisible barrier and starts the lower divs on the left instead of in any space above and further right. Sometimes it's enough to add clear: both in the first div you want on a new line (in this case .productinfo) but I tried that and although productinfo went to the left on a new line, the next div class="related" found space up above, so a full-width clearer stops all following divs from moving up too far. It works in IE6 and is still OK in IE7 and Firefox. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. ---------------------------------------- [Edit 1 times, last edit by Wickham at Nov 3, 2008 5:10:56 AM] |
||
|
|
danny_southern
Stranger Joined: Mar 4, 2008 Post Count: 15 Status: Offline |
Sorry for the delay, I'm the owner and sole employee, I'm busy with a lot of hats. I googled and couldn't find any examples on nil-height. How does the tag look? <nil-height></nil-height> //I know the above may be unbelievably incorrect. EDIT: I just read your last paragraph again. Can you please post the code segment that contains your changes? Thanks bro. ---------------------------------------- [Edit 2 times, last edit by danny_southern at Nov 23, 2008 12:48:50 AM] |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
I did that in my last post; I unzipped your files and tested test.htm. Find the code ..............<div class="right_column2"> </div> and put this nil-height clearer div after it:- <div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;"> </div> before continuing with:- <div class="productinfo">.................. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Just to be clear, when Wickham talks about a "nil-height clearing div", he is referring to a div with no height, as he showed in his example. <nil-height> isn't valid. ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
danny_southern
Stranger Joined: Mar 4, 2008 Post Count: 15 Status: Offline |
I did that in my last post; I unzipped your files and tested test.htm. Find the code ..............<div class="right_column2"> </div> and put this nil-height clearer div after it:- <div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;"> </div> before continuing with:- <div class="productinfo">.................. Thanks, this helped give me a more polished look. Just to be clear, when Wickham talks about a "nil-height clearing div", he is referring to a div with no height, as he showed in his example. <nil-height> isn't valid. Thanks for clarifying/dissolving the language/idiom barrier. I was like what the hell is a nil, I had a feeling it was foreign, I think nil is used in the German language also |
||
|
|
|
|
Current timezone is GMT Mar 20, 2010 4:20:35 AM |
