Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE not sizing a DIV correctly

Status
Not open for further replies.
LouisCyphre

LouisCyphre

Programmer
Jun 14, 2005
7
US
Hi All,

I've got a site that displays perfectly in Firefox, but the 'content' DIV is causing problems in IE.

- When it adds a scrollbar because the content won't all fit on the screen, the scrollbar isn't against the right hand edge of the browser. It is positioned about one scrollbar's width in from the edge, with blank space to the right.

- IE isn't calculating the height of the 'content' DIV correctly either. Although the 'content' DIV is correctly positioned below the 'head' DIV, IE seems to be calculating the height from the top of the browser window, which means the bottom of scrollbar and some of the page's content is beyond the bottom edge of the browser window.

All help greatfully received.

DOCTYPE of content pages is
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Page layout CSS:
Code: 
html {height: 100%; max-height: 100%;
      padding: 0; margin: 0; border: 0;
      background: #fff;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      /* Hide overflow: hidden from IE5/Mac */
      /* \*/
      overflow: hidden;
      /* */}

body {height: 100%; max-height: 100%;
      padding: 0; margin: 0; border: 0;
      overflow: hidden;}

/* Define the page's 'header' section. */
#head {position: absolute; z-index: 5; height: 80px; width: 100%;
       top: 0; left: 0;
       margin: 0;
       display: block;
       background: url(images/background/headback.jpg) #FFFFFF;
       background-position: 0 0; background-repeat: no-repeat;
       font-size: 3.5em;
       color: #003C56;
       overflow: hidden;}

/* Define the page's 'content' section. */
#content {position: absolute; z-index: 3;
          top: 80px; left: 200px; bottom: 25px; right: 0;
          background: url(images/background/contback.jpg) #FFFFFF;
          background-position: 0 0; background-repeat: no-repeat;
          overflow: auto;}

* html #content {position: absolute; z-index: 3;
                 height: 100%; max-height: 100%;
                 top: 0; left: 0; right: 0; bottom: 0;
                 border-top: 80px solid #FFFFFF;
                 border-left: 200px solid #FFFFFF;
                 border-bottom: 25px solid #FFFFFF;
                 background-attachment: fixed;
                 overflow:auto;}

/* Define the page's 'left' navigation section. */
#left {position: absolute; z-index: 4; width:200px;
       top: 80px; left: 0; bottom: 25px;
       background: url(images/background/leftback.jpg) #FFFFFF;
       background-repeat: no-repeat;
       font-size: 1.2em;
       overflow: auto;}

* html #left {height: 100%;
              top: 0; bottom: 0;
              border-top: 80px solid #FFFFFF; border-bottom: 25px solid #FFFFFF;
              color: #FFFFFF;}

/* Define the page's 'footer' section. */
#foot {position: absolute;  z-index: 5; width: 100%; height: 25px;
       left:0; bottom:0;
       margin: 0;
       display: block;
       background: url(images/background/footback.jpg) #FFFFFF;
       background-position: 0 0; background-repeat: repeat-x;
       font-size: 1em;
       color: #003C56;
       overflow: hidden;}

Hope someone can help.

Greg.

--
Since light travels faster than sound, is that why some people appear bright until you hear them speak?
 
Sort by date Sort by votes
Actually, the problem is more your confusing css code than the browser quirks. Here's how I interpreted your problems:

1. Rathen than having a scrollbar on the body (like normal), you have in only on the div (content) and the body scrollbar is hidden. Since IE does not hide the scrollbar of the body per se (it only disables it) it still holds that place for the scrollbar, which is out of 100% of the page. The remaining 100% is taken by your div and within those 100% is your scrollbar. There, scrollbar is right where you asked it to be -- Geckos don't have that problem since they rather hide the scrollbar when not used.

2. When given a proper doctype (which you have), IE (6) will employ correct box model. Correct box model states that width/height relates to the dimensions of the content, while in order to get the dimensions for the whole box, one needs to add padding and borders to that (and margins, however that is rendreded outside the border of the box). If we look at your code, your #content's content height is 100%, added to that is a top border of 80px and bottom border of 25px. Now, if I ask you a logical question: How much is 100% + 80px + 25px? We cannot answer for sure, however we can safely claim it is more than 100%. And so it falls off.

So, IE does it as good as it can with the code you give it.
 
Upvote 0 Downvote
Vragabond,

Thanks for your swift reply.

The thing is, I based my site on (basically copied) which works in both Firefox and IE, and I can't understand why it is that it doesn't work in IE for me.

One difference is that the site I copied from is CSS and XHTML, while mine is CSS and HTML. But if that's the problem, I'm even more confused.

Greg.

--
Since light travels faster than sound, is that why some people appear bright until you hear them speak?
 
Upvote 0 Downvote
IE, being very reluctant to render things in standards-compliance mode because of the doctype will do everything to avoid that. One of the things is, it will completely ignore the doctype and revert to quirks mode if any text will exist before the doctype declaration. The site you showed has such text, a deliberate comment that shifts IE into quirks mode. In quirks mode, the second problem goes away due to the incorrect box model used. I suppose it somehow eliminates the first one as well.

That said, I would suggest you not follow their example. Omitting the doctype (even if it is just in IE) is not good practice and can cause unexpected results in future browsers (IE7 for that matter).
 
Upvote 0 Downvote
Thanks Vragabond.

Putting that comment line in does cure the content height problem I've been having. I have been trying to write a standards-compliant site that works in both Firefox and IE and it's a real pain. At least for the moment, I can put that comment line back in and keep my IE users happy while I work on a proper solution.

My site still has the problem in IE with the offset scrollbar for the content DIV, but from your first reply, it sounds like I may not be able to get around that one in a standards-compliant way. Oh well, it should help me get more people using Firefox! :)

Thanks again for taking the time to reply.

Greg.

--
Since light travels faster than sound, is that why some people appear bright until you hear them speak?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
677
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
615
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
174
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
144
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top