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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV layout issue in IE7/8

Status
Not open for further replies.
Gazzieh

Gazzieh

IS-IT--Management
Dec 18, 2006
117
GB
Okay, I know IE7 (and IE8 beta) has issues *how can they release a beta browser that cannot render map sites properly?).

Anyhow, difficult to describe and not yet uploaded but I'll try. I have a page div for containing everything, a header div that contains (yeah, you get it), there is a sidebar div and a central contents div. The sidebar and contents divs have z-indexes of 0 whilst the very bottom div (foot) has a z-index of 1.

In all other browsers (Firefox, Opera, Safari) all divs fit together beautifully, with the foot div lying over top of the other two. Yet, in IE7 the foot drops about 10px. Why???

And the age old one. autoflow-x: hidden but not in IE7/8!

AHHHHH!!!!!!!!!
 
Sort by date Sort by votes
Look at padding and margin. They are almost always the 2 main causes of such perceived "problems" - the other primary cause is whitespace (most likely not a problem in your instance).

Without looking at your code, there is little else we can hep with.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Yep, understand that. I do remember something about default margin and padding setting differences between IE and the rest of the world; just can't remember what.

And sorry for not listing the code. The CSS is as follows:

<code>
/* Basic Definitions */

body
{
font-size: 71%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
color: #ff9;
background-color: #666;
}

a, a:visited
{
text-decoration: none;
color: #fff;
}

a:hover
{
text-decoration: underline;
color: #ff6;
}

.fleft
{float: left}

.fright
{float: right}

/* End of Basic Definitions */
/* Div ID Definitions */

#page
{
width: 990px;
height: 540px;
margin-top: 0.5em;
margin: 0 auto;
border: 1px #333 solid;
background-color: #0255bd;
}

#header
{
width: 990px;
height: 50px;
z-index: 1;
}

#navbar
{
height: 25px;
width: 990px;
text-align: center;
}

#sidebar
{
position: absolute;
height: 440px;
width: 190px;
margin-left: 7px;
z-index: 0;
}

#content
{
width: 790px;
height: 440px;
}

#MainFrame
{
width: 790px;
height: 440px;
background-color: #0255bd;
overflow: auto;
}

#foot
{
position: absolute;
width: 990px;
height: 245px;
margin-top: 209px;
z-index: 2;
}

/* End of Div ID Definitions */
/* Horizontal Navigation Definitions */

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
font-size: 80%;
}

#navlist a
{color: #fff}

#navlist a:hover
{color: #ff6}

/* End of Horizontal Navigation Definitions */
/* Vertical Navigation Definitions */

#sidebar ul
{
padding: 0;
margin: 0;
}

#navlistv li
{
padding: 0;
list-style-type: none;
padding-bottom: 8px;
font-size: 80%;
}

#navlistv a
{color: #fff}

#navlistv a:hover
{color: #ff6}

/* End of Vertical Navigation Definitions */
</code>

I will play with the margins and paddings but if you spot it, fantastic!

Page code is:

<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Site</title>
<meta name="keywords" content="">
<link href="gnstyle.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="page">
<div id="header">
<img src="images/welcome.png" alt="Welcome">
</div> <div id="navbar">
<ul id="navlist">
<li><a href="main.html" target="pages">HOME</a></li>

<li><a href="music.html" target="pages">Music</a></li>
<li><a href="climbing.html" target="pages">Climbing</a></li>
<li><a href="running.html" target="pages">Running</a></li>
<li><a href="travel.html" target="pages">Travel</a></li>
<li><a href="designs.html" target="pages">Website Designs</a></li>
<li><a href="fav.html" target="pages">Favourites</a></li>

<li><a href="aboutme.html" target="pages">About Me</a></li>
<li><a href="links.html" target="pages">Links and Things</a></li> </ul>
</div> <div id="sidebar" class="fleft">
<ul id="navlistv">
<li><a href="main.html" target="pages">HOME</a></li>
<li><a href="music.html" target="pages">Music</a></li>

<li><a href="climbing.html" target="pages">Climbing</a></li>
<li><a href="running.html" target="pages">Running</a></li>
<li><a href="travel.html" target="pages">Travel</a></li>
<li><a href="designs.html" target="pages">Website Designs</a></li>
<li><a href="fav.html" target="pages">Favourites</a></li>
<li><a href="aboutme.html" target="pages">About Me</a></li>

<li><a href="links.html" target="pages">Links and Things</a></li> </ul>
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>
<script type="text/javascript">
var so = new SWFObject("player.swf", "mymovie", "190", "90", "7", "#0055bd");
so.write("flashPlayer");
</script>
</div>

<div id="content" class="fright">
<iframe id="MainFrame" name="pages" frameborder="0" src="main.html"></iframe>
</div>
<div id="foot">
<img src="images/foot.gif" alt="Climbing Wall">
</div>
</div>
</body>
</html>
</code>
 
Upvote 0 Downvote
I've not seen the problem, but this is certainly redundant:

Code: 
#page {
   width: 990px;
   height: 540px;
   [!]margin-top: 0.5em;[/!]
   margin: 0 auto;
   border: 1px #333 solid;
   background-color: #0255bd;
}

P.S. You use [ignore]
Code:
[/ignore] to post code, not <code></code>... I'm surprised you didn't notice when you previewed your post.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Unfortunately I was in a rush on replying and so clicked Post instead of Preview. As I clicked not only did I realise my clicking mistake but also my
Code: 
 error. Spending too long on websites me thinks!

And thanks for spotting the redundancy. It was originally in place to give a small gap between the top of page and browser window.

Hasn't sorted out IE7 but it always helps! :o)
 
Upvote 0 Downvote
If you really have to use absolute positioning for your layout (and I honestly believe that for your layout, it'll end up making things far worse), then at least use it somewhat properly...

You're giving your footer an absolute position, and then giving it a margin-top to anchor it to the bottom. Why not position it to the bottom so at least (as seems to be the case in IE) when there's a height discrepancy, it doesn't blow your layout up (see warning in above paragraph).

Give your "page" container a relative position so that the footer can be positioned relative to it, and then remove the top margin on your footer and replace with a "bottom" of "0".

That fixes your immediate problem... but as I said, I honestly believe you should find a far nicer, more scalable way of laying out your site. Currently, if your content grows past around 200px in height, or your users tweak their font size up, you lose the content & nav behind the footer.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for this. I am at present exploring every route I can think of to make it fully scalable but everytime I think I have secured it something new comes along and messes it up.

Still, the idea of the site was simply to play and explore. The site is now active (garynewport.com) though the music does not play (it works, I simply haven't converted my own personal music and the test music is copyrighted by others).

The content should be resolved by the fact that the main content is held within an iframe and expands with scrollbars when needed(except IE that cannot handle overflow: auto;).

I did originally have the content change through div content changes in php but this meant that the player had to restart everytime and the iframe solution seemed nicer.
 
Upvote 0 Downvote
I forgot to say that the reason it was originally given the position: absolute; was down to the z-index definition. It had to be defined and at the point of initial build I chose absolute. I will now rip it apart and try more relatives.
 
Upvote 0 Downvote
Ok, all solved!

Thanks.

The error was nothing to do with positioning but it has made more sense of the positioning. I made the page position relative so that the foot div is then positioned absolutely within the page div. Then I defined bottom as 0 (as you suggested) instead of the margin top statement. Now IE shows it at the bottom but I could still see the horizontal scrollbar by IE. Simple, the size of the iframe was tweaked to tuck it behind the foot. Now ALL browsers show as desired.

If you spot any other errors, places of improvement, ideas or suggestions, please let me know and thanks for those tips. Now duly noted.
 
Upvote 0 Downvote
Oh, if this was a purely IE8 issue I would have posted it straight to Microsoft. Since it appears in IE7 as well I was assuming it was an embedded issue that they will not fix.

After a little more hunting it is related to the margins and padding as defined by default within IE7/8, which is completely different to every other browser. That's probably because they all decided to stick to the agreed standard.

It's these kind of things that make people dislike IE, which, in many ways, is as good if not better than others.

Saying that, I use Firefox predominately.
 
Upvote 0 Downvote
I don't know if this would be useful to you at all, but...

If you put this in your head (or better yet the actual header return)

Code: 
<meta http-equiv="X-UA-Compatible" content="IE=7;FF=3;OtherUA=4" />

IE8 will automatically render that page as if it were IE7. While its often good to try to figure it out in the name of progressive coding, sometimes you just need to get stuff done and already works in IE7 and the other browsers you tested. It could also be a good way to 'lock' your site to the current version you intended for it until you can fix it for IE8 (assuming IE8 becomes public any time soon).

I tested the meta tag above on two of the sites I've created, one in particular using quite a bit of javascript was a mess on IE8 and it was quite unlikely that the client would pay for additional time to test for a beta browser (despite they would have needed to anyways by the time IE8 came out as I can only do so much lol), so the meta tag was put in place so that once people start using IE8 it won't be a complete disaster yet, and if they wana upgrade then so be it.

Karl Blessing
 
Upvote 0 Downvote
For the new site, IE7 and IE8 display the same but that code is useful. Thanks!
 
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
411
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
710
Chris Miller
Chris Miller
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
127
tyutghf
tyutghf
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
636
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
377
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top