1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE ignores div height if content is bigger

         

FlyingsCool

2:25 am on Apr 18, 2011 (gmt 0)

10+ Year Member



Hi,

I don't know if this is compliant, but I'm trying to place objects on my page using divs. I have a situation where I have a div across the top containing a menu bar. I have a div below that which contains a logo image. I'd like the logo image to overlap the menu bar, so I set the image within its div with position: relative; and a top: -y; value, which moved the image outside of its containing div. Then I set the containing div to be shorter than the image so I don't get a big whitespace under the logo. This works fine in Chrome and Firefox.

But, not in IE. As the title notes, IE ignores div height if the content is bigger than the requested height. I was able to fix a similar issue I was having with an empty div by using a font-size declaration. But this div isn't empty, it's got the image in it.

Are there any ways to fix this? Setting overflow: hidden; doesn't work, because I want it to overflow the div (I'm not psyched about splitting the image into multiple images). I added height: 160px !important;, that didn't work.

Any other thoughts? 

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Party Plan-It Mobile DJ Services</title>

<style type="text/css">

body, html {
 text-align: center;
 body-top: 0;
 margin: 0;
 padding: 0; 
}

body {
 background: url(images/master03_800.jpg) white center top no-repeat fixed;
 background-color: #EEDDDD;
 min-width: 800px;
}

#wrapper {
 width: 800px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}

#menuwrapper {
 float: left;
 Width: 800px;
 height: 50px;
 padding: 0;
 margin: 0;
}

.menubutton {
 float: left;
 width: 135px;
 height: 35px;
 padding: 0;
 margin: 0;
}

#logo {
 float: left;
 width: 200px;
 height: 160px !important; /* IE is ignoring this line, thie image the div contains is about 200px tall */
 padding-left: 0;
 padding-right: 0;
 padding-top: 0;
}

</style>


</head>

<body>

...

<div id="menuwrapper">
 <div id="menuspace" style="float:left; width: 800px;height: 4px; font-size: 2px;"></div>
 <div id="menuspace" style="float:left; width: 240px;height: 38px;"></div>
 <div class="menubutton">
<div class="cssbutton"><a href="indexnew2.htm"><img src="images/buttons/CosmicGelLa0.gif" alt="Events" /><span>Events</span></a></div>
 </div>
...

</div>

<div style="z-index: 21;" id="logo">
<span><img src="images/PPlanitLogo.png" style="position: relative; width: 200px; top: -35px; left: 30px" alt="text"/></span>
</div>

lucy24

3:02 am on Apr 18, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Height may not be your only problem. Some versions of MSIE also get snarky about negative values. (I've had unhappy experiences with margins.) Splitting the image is never a first choice, but why not try it and see what happens. If it instantly solves all your problems, you will probably find a way to overcome your own objections.

!important
If you take the image-splitting route you will have to throw in some more boilerplate like

img {margin: 0; padding: 0; border: none; text-decoration: none;}

--in other words, do exactly what you would expect a sensible browser to do if you hadn't said anything-- just to make sure it doesn't try any funny business.

alt131

5:08 am on Apr 18, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi flyingscool, and welcome to WebmasterWorld :)

Any other thoughts?
Always Plenty ;)
I'm trying to place objects on my page using divs
To me, this is the root cause of the troubles: Css styles html elements. While it is quite possible to create and style a page filled with "containers" (imagine a page styled to look like a chess board), that's not much help as the goal is to deliver your content.

So, turning to your provided code, without dimensions for the images it "broke" depending on resolution and browser version which made it difficult to suggest improvements. I'm not sure why you are coding xhtml and deliberately forcing quirks mode as am not sure if you really want all the issues created by quirks, especially in ie6.

Soooo.... putting all that together, I wonder if your menu is a really a list, and can be marked-up as such in the html. That provides the opportunity to create a taller <ul> to create a "bar", then position the logo image over that bar. All wrapped in a div to lock it together. Something like this to get you started:


css

div {
/*styles for example*/
width:90%;
margin: 0 auto;
background-color:#aaa;
/* set a position to make it easy to position the logo */
position:relative;
}

ul {
/*create the bar */
width:90%;
height:50px ;
margin: 0 auto;
/*styles for example */
background-color:#ccc;
list-style-type:none;
}

li {
/*styles for example */
width:30%;
float:left;
text-align:center;
line-height:30px;
border:3px solid #eee;
}

img {
/* position the image*/
position:absolute;
/* move as desired*/
margin-left:100px;
margin-top:-10px;
}

html

<div>
<ul>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
</ul>
<img src="myimage.jpg" width="100" height="40" alt="My alt" >
</div>

Just remember this is an example only. It is "rough and ready" and may not work exactly for your layout, but it illustrates one way to do this using less html elements and css. (And avoid the issues you've identified for ie)

FlyingsCool

4:20 pm on Apr 18, 2011 (gmt 0)

10+ Year Member



Hi flyingscool, and welcome to WebmasterWorld :)

Thank you :)
And thank you for such a detailed reply.

To me, this is the root cause of the troubles: Css styles html elements. While it is quite possible to create and style a page filled with "containers" (imagine a page styled to look like a chess board), that's not much help as the goal is to deliver your content.

Hmm, being quite the newbie, I'm not sure I understand what you mean. What do you mean by "the goal is to deliver the content"?

I guess I should learn more about the differentiation between html elements and CSS styling, and what the demarcation is between their use for what.

Creating containers was the easiest way for me to think about how to orient my objects on the page without having to look at each object and calculate its absolute location. Not to mention the fact that absolute doesn't work relatively from the location of its container, and relative doesn't always work absolutely from the coordinates of the container, (I think it takes other objects in the container into account?). And you can't mix a relative dimension with a float, like float left 4px from the top of the container.

I'm trying to avoid a newspaper column textual layout; My goal here is to plop some stuff on the page where I want it to go. So, to get this to work, my thought was to create a bunch of boxes and then place elements in those boxes and locate them with respect to the boxes. Possibly adding some empty boxes here and there to fill space. So my main struggle has been trying to get this to work consistently across IE, Chrome, and FF. Obviously I have a lot to learn.

Please don't slap me too hard :).

As an example of the layout the user sees - Imagine a group of balloons like you'd see somebody holding for sale at a fair, and each balloon links to a different page and has an image on it. To start with it's 2D, but I can even imagine extending this concept to a 3D layout.

My main programming experience is Fortran, though I am familiar somewhat with C and C++ and java. I can't write with those very well, but I can modify it and make it do what I want. And I know how to research how functions work once I know the function exists.

I'm not sure why you are coding xhtml and deliberately forcing quirks mode as am not sure if you really want all the issues created by quirks, especially in ie6.

Regarding XHTML-I'm not sure either; I got the code as the basis of an example of how to center my background on the page, and it said to use that Doctype declaration. It seemed relatively modern and supportable by today's browsers. I don't know a whole lot about Doctype, only that everyone wants me to declare it nowadays.

Would something else be better?

What do I need to avoid about IE6 quirks mode?

Soooo.... putting all that together, I wonder if your menu is a really a list, and can be marked-up as such in the html. That provides the opportunity to create a taller <ul> to create a "bar", then position the logo image over that bar. All wrapped in a div to lock it together.

I was seperating the logo from the menu container because my plan is to keep the menu across all my pages, but the logo might change in size and location across pages.

Is there an advantage to using a list over the method I used? Basically, I was looking for a good way to make a container, and then be able to easily add or remove buttons and have them start at a location and evenly place themselves after that, which I can see the list method can do, too.

I'm feeling like I've got a hammer and everything's a nail with the way I understand the application of CSS.

Thanks again.

FlyingsCool

2:21 am on Apr 19, 2011 (gmt 0)

10+ Year Member



You were right, I removed the quirks line and it fixed some issues.

Although I must say, in my mind, I think that padding should shrink the container, not expand the container around the contents. If I'm going to give a container a width, it should use that width. The contents shouldn't inherit the value. To me, I'm specifying the width of the container, not the contents.

alt131

3:39 am on Apr 19, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi FlyingsCool, what a interesting post you made - and I am coming back to try to answer all those good questions - no slapping required ;) - but a quick response to the doctype issue:

I removed the quirks line and it fixed some issues
I'll bet it did :)
In terms of xhtml, if you don't know why you should use it (for reasons other than fixing layout issues), then you don't need it, and I'd suggest start with html4.01 strict. You may ultimately decide on html5, but 4.01 and strict is a solid start.
Without getting too deep in theory these threads that provide more background - older but still good advice:
FAQ: Choosing the best doctype for your site [webmasterworld.com]
Why most of us should NOT use XHTML [webmasterworld.com]

That also relates to this comment:
Regarding XHTML-I'm not sure either; I got the code as the basis of an example of how to centre my background on the page, and it said to use that Doctype declaration.
Excellent example of the implications of not separating content (marked up by html) and style (css): The solution you copied adjusted the html (by triggering quirks mode) to deal with a layout (style) issue.

If the example also used a containing div and text-align:center, then it is likely based on an old (and comon) mis-understanding that ie6 did not understand the following margin solution, or was dealing with really old legacy browsers (pre ie6) that are usually very rare and not accomodated now. In any other case, coding strict (html) allows to be centered (styled) by setting a width (style) then setting the (style) margin: 0 auto; (shorthand for top/bottom and right/left) - and leaving the browser to perform the calculations. As a programmer you'll appreciate computers have been known to perform complex mathematical calculations slightly faster than the average human ;)

However, the solution then went on to change the rendering mode a second time by changing to xhtml: What a lot of work (and down-stream problems) created when the style issue could have been achieved with a width and a margin.

Although I must say, in my mind, I think that padding should shrink the container, not expand the container around the contents.
The subject of much heated argument for years! Not much can be done about legacy versions, but after all the debate, css3 introduces box-sizing - so you can choose and use whichever you prefer :)

FlyingsCool

4:40 am on Apr 19, 2011 (gmt 0)

10+ Year Member



The subject of much heated argument for years! Not much can be done about legacy versions, but after all the debate, css3 introduces box-sizing - so you can choose and use whichever you prefer :)

Cool!

alt131

10:44 am on Apr 20, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OK, where to start .... Your description sounds exciting!

The issue of xhtml versus html and a "better" suggestion is covered and you've already figured how to avoid quirks - and the benefits. 3 down. ;)

What do you mean by "the goal is to deliver the content"?
Most sites exist to deliver content (text/images) to users. So the goal is to deliver that content to as many users as possible. When starting it is common to think in terms of design, not the (text and image) content. That's the basis of using tables-for-layout, or "grid" designs that use positioned divs to divide up the page into "squares" like a chess-board then dump content into the "cells/chess-board squares" to get the desired layout. It works, but is often heavy and horrible to maintain. When something breaks (and it will), users can be served gibberish or things that don't function. A search on "semantic html" accessibility and usability will bring up lots of background.

I guess I should learn more about the differentiation between html elements and CSS styling ...
Good on you - and look how many different html elements [w3.org] there are. Unlike divs, all convey a real meaning! I expect by now you'll understand the demarcation: HTML to mark-up the content in a meaningful way, css (style) to suggest how the content should be displayed to the user.

Creating containers was the easiest way for me to think about how to orient my objects on the page without having to look at each object and calculate its absolute location.
At first that sounded like the "grids" approach, now I wonder if the language is drawn from your programming background. If so, think of html elements (a para of text, image) as the "objects". You're right to avoid trying to code a location for each one - it's fairly impossible given all the possible combinations of platform/device and user agent anyway. So reduce the workload by marking-up with semantic html to utilise the intrinsic meaning and default styles. To manipulate the "objects" efficiently, put them in "containers" - as you say.

That explains my suggested changes to the original html: Using the object/container metaphor, the "containers" (divs) were actually being used to create "objects". Instead, mark up each object (menu item) as an <li>, then group in a "container" - the <ul>. The image and the <ul> are related, so also grouped - using the handy <div>.

My goal here is to plop some stuff on the page where I want it to go. So, to get this to work, my thought was to create a bunch of boxes ...
If you build boxes, then add elements, then apply style and things don't "work", you have to delete the css, remove the elements and rebuild the boxes to start again. I suggest the opposite: Html elements are already boxes/rectangles. Mark-up the html semantically, then open your style sheet editor and push the existing elements around. If the design doesn't work, change the css.

The programming mantra "Write once, use many times" = code the html once. Use css to style the html as many different ways as you want.

Some notes on positioning:
Not to mention the fact that absolute doesn't work relatively from the location of its container ...
Correct, but it does if the containing block (your "container") has position:relative - see it working in the posted example.
... and relative doesn't always work absolutely from the coordinates of the container, (I think it takes other objects in the container into account?).
Yes - the element remains in the flow and is positioned "relative" to it's original location "relative" to those other elements.
And you can't mix a relative dimension with a float, like float left 4px from the top of the container.
Yes, and two important points: top/left/etc only work if there is a position other than the default static. Floats are quite different but do obey margins that can be used to "position" them in relation to other elements.

.. and finally your code:
Is there an advantage to using a list over the method I used?
... Basically, I was looking for a good way to make a container, and then be able to easily add or remove buttons ...
As above, <ul> is a natural container for <li>'s and they can be added/removed and styled as you want. However, given the design description, now I'm not sure: If you have a "balloon" affect another approach might be needed. Links aren't really encouraged, but this sounds really interesting and fun - could you sticky me a url to a draft so I can take a look and bring back the relevant html?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026