Member Avatar for mheher

Hi there, So I just keep having little problems with my website in IE and I just don't know what to try anymore. This is the first website I've made and any help would be appreciated. The website is Bombfootbags.com. The problems are... on the home page, the left border on the "pellet footbags" box down at the bottom is not showing. AND on the sand footbags, pellet footbags, and faq pages, the mainContent div is getting pushed down below the sidebar div. I've been having problems with this for a while. What I don't understand is that I'm not having that problem on the other pages on the site when the basic structure is the same....

Any help much appreciated figuring out these little things takes me more time than putting the whole site together and it's obviously frustrating.

  • 3 Contributors
  • 4 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Symptom set (mainContent dropping below the sidebar on only some pages; one box losing its left border) usually points at markup/CSS differences between pages rather than a single global browser bug. Because your FAQ (no images) also breaks, the most likely causes are: unclosed/mismatched tags, a float containment problem, or an IE-specific layout quirk on those pages.

Quick checklist to isolate the cause

  • Compare the raw HTML of a working page and a broken page (view source side-by-side) and look for missing/extra </div> or stray characters before the <!DOCTYPE>.
  • Run the problem pages through the W3C HTML validator: W3C Markup Validation Service. Fix any structural errors first.
  • Use IE’s developer tools (F12) to inspect the computed box sizes for the container, sidebar and mainContent. Check whether the sum of widths + paddings + borders exceeds the parent width.

Common fixes to try (safe, reversible)

  • Contain floats (preferred over hacks): add a clearfix to the parent container so floated columns don’t collapse. Example micro-clearfix:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix { zoom: 1; } /* helps old IE */
  • Alternatively, briefly test overflow: auto on the parent to see if that stops the drop:
.container { overflow: auto; }
  • Visual debug: temporarily outline boxes to see exact sizes and overlaps:
#sidebar, #mainContent { outline: 1px solid red; }

About the missing left border: inspect the box in IE devtools—if the element’s width is zero, clipped, or covered by a sibling with background, the border can appear absent. Also check for page-specific CSS or conditional comments that might override the border only on those pages.

Background reading: the IE “hasLayout” behavior explains many old-IE surprises; a clear primer is here: . If the minimal test case (copy only header/sidebar/mainContent+CSS) renders fine, progressively reintroduce pieces from the real page until it breaks — that will reveal the offending element or rule. This builds on the good suggestions already given by and .

Recommended Answers

All 4 Replies

Member Avatar for Plyswthsqurles

This is just some suggestions without looking at your code, ill look at it later when i have time.

Do you use firebug? If not i suggest you find it and download it, it will make your life so much easier. Also download the web development tool bar for firefox as well since there are options from a drop down menu to validate HTML and CSS without googling for it.

One thing i need to know is what version of IE are you using that causes this problem. I would recommend running your website through Browsershots.org. This will allow you to see what your web page (that particular URL) looks like in numerous different broswers.

The other thing is, is this page made with div's or with tables?

If its divs, make sure the div size is no large then it needs to be. For instance if you have a 500 width pixle image in its own single div as your header then the width of the div needs not excess more then 500px. It will render correctly in Firefox if you dont follow this rule but in IE it will start pushing things downward because it thinks it needs all that room.


In short, download Firebug for Firefox, Webdeveloper Toolbar for Firefox, and Validate Validate Validate. Dont give in to CSS Hacks. If you still have problems, sometimes its easier to design a more friendlier layout rather then give into CSS Hacks. That is just my opinion however.

Hope this helps somewhat

Member Avatar for mheher

Hey for the reply, awesome advice thus far. The website is all divs, and I'm wondering if it is a picture size thing because 2 of the pages that are sliding down have all of the images of the footbags and maybe that is causing a problem.... but then the FAQ page also which has absolutely no photos is sliding as well.

Yeah I'm not trying to use hacks to solve the problem, just was running out of ideas and have been wasting lots of time essentially doing nothing productive.

I will check that website and get back to you on the IE version

Member Avatar for mheher

Using Browsershots, it looked fine in IE 7 and IE 8, I have a less than a year old mac with windows on it so I assume that IE is pretty new as well, but it the mainContent div shifts down past the sidebar div on the pages mentioned in my first message. And a friend was taking a look and said the same thing...

What else can I give you to help??? Thanks a bunch.

Member Avatar for MidiMagic

This may be a case of stuff not fitting on different screen resolutions.

Also realize that IE renders margins, borders, and padding differently than other browsers do. This can make things not fit in certain cases.

Do not use pixels, points, cm, or inches to define sizes if you want multi-computer compatibility. Use percent and em instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.