Hi, im having a problem with a site, its http://nicaragua.lasnite.com in internet explorer 7.0 and FF the site looks fine, but on internet explorer < 6.0 the entire center div falls all the way down, can anyone help??? please?
| SitePoint Sponsor |
Hi, im having a problem with a site, its http://nicaragua.lasnite.com in internet explorer 7.0 and FF the site looks fine, but on internet explorer < 6.0 the entire center div falls all the way down, can anyone help??? please?
Last edited by AutisticCuckoo; Sep 4, 2007 at 22:17. Reason: Fixed broken URL
this is urgente for me :$ ; im willing to pay for some help
It looks to me like the 11px padding on .gutter is adding to the width of #content.
So you're trying to squeeze 200px + (560px + (2 x 11px)) into 760px.
Because you're trying to fit 782px into 760px; something has got to give, so #content is pushed down so that its width fits below #sidebar.
I hope this makes sense.
I always try and steer clear of horizontal padding for this reason.
My rule of thumb is that instead of using horizontal padding on an element, try and use a margin on its children.
You'll get the same effect but without the IE problem.
Hope this helps!
If he's using a complete and proper DOCTYPE (I haven't looked at the code since I'm still trying to update Windows on my new hard drive), then yes, the borders, margins and padding will add to the base width in Internet Explorer 6/7 and every other major modern browser. The best thing to do in this case would be to deducte the width (left and right) of the borders, margins and padding from the width (since the W3C box model is additive) and use the simplified box model hack to support IE 5.x (if IE 5 support is required that is, otherwise don't worry about it).
Oh, and as a side note, SitePoint HQ requires that all "offers to pay" be done through the Looking to Hire section of the SitePoint marketplace. It's a simple policy that helps ensure that the boards don't get cluttered with job offers.
Off Topic:
*goes back to updating XP Pro*
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
It would be better to do it without hacks; you shouldn't need the box-model hack in this case.
Like I said.
I stated that the BMH would be needed only if supporting any builds of IE 5 or 5.5 was required. Of course I'd be more worried about the ROUS than the BMH in this case.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Rodents Of Unusual Size?
You got it.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
should I make #content 760 bigger than 782
u should cut down your width from 560 to 538 (minus 22) to allow for the 22 pixels added by the 2 11px paddings.
Steve Davis
Steve's right. Cut down on the size of the content so the padding can be applied to it to give you the desired width you really want.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
that means that I would have to fit all the picture, flyers, etc.. on a 538 div, rather than 560???
yep, if u want the 11 pixel padding.
Steve Davis
would making the sidebar instead of 200 170 work?
Bear in mind that if you do it this way, then it will appear different in IE7 and FireFox than it does in IE6.Originally Posted by CraniumDesigns
IE6 will add the padding 22px padding to the width, making it appear as you want it to, but IE7 and FireFox will make that middle column appear 22px narrower than you want it to.
Did you understand what I suggested in my comment further up in this thread?
Instead of using any horizontal padding at all on your .gutter class, you should get rid of it, and instead apply a left (and/or right) margin to all of the elements inside #content.
You should try to eliminate any horizontal padding if you can.
Cheers,
Dan.
more or less; I have no idea how to code this though :S
I wish I had the time to help you out... if I do find the time to take a closer look at it, I'll let you know.
thanks d_B - appreciate it ; perhaps someone else with a bit more time can help me out?
Hello,
You've got white space above the doctype - it needs to be the very first thing in the document otherwise Internet Explorers will render things in quirks mode.
Try removing this and see if IE6 displays the page as you are wanting.
This isn't true - only when you use an incomplete doctype does IE6 display the box model differently.Bear in mind that if you do it this way, then it will appear different in IE7 and FireFox than it does in IE6.
hi mark; i tried removing the whitespace but still no luck before the docttype,
Posting Permissions
Bookmarks