problem positioning layered divs in IE

designergav · February 15, 2008

Hi I'm having real trouble here. Why is IE so crap?.

Anyway here's the problem. After my topintro divs there is a massive white gap, probably equilivent to the -250px margin set on the textbox div. Firefox on pc and mac is fine (no gap) i'm sure i've done this before without needed to put such big -margins in. can anyone offer some advice?

here's the code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
font-family:Lucida Grande, Geneva, Verdana, Arial, sans-serif;
font-size:10px;
line-height:13px;
color:#000000;
font-weight:normal;
text-align:center;
}
H1 {
display:block;
font-size:20px;
font-weight:bold;
font-family: Myriad, Arial;
color:#333333;
}

H2 {
display:block;
font-size:12px;
line-height:15px;
font-weight:bold;
color:#333333;
}
div#container {
position:relative;
width:980px;
display:block;
background-image: url(images/shadow_pagecontent.gif);
background-repeat: repeat-y;
background-position: center top;
margin-left:auto;
margin-right:auto;
text-align:left;
}
div#header {
display:block;
width:980px;
height:120px;
background-color:#ff6600;
}
div#topintro {
position:relative;
display:block;
width:943px;
height:255px;
background-color:green;
margin:0px 18px;
text-align:left;
}
div#topintro_fullwidth_textblock {
position:relative;
top:-250px;
left:20px;
padding:10px;
height:210px;
width:475px;
display:block;
text-align:left;
float:left;
z-index:2;
background-color:yellow;
}
div#maincontent {
position:relative;
display:block;
width:943px;
background-color:#990000;
margin:0px 18px;
text-align:left;
}
div#mainblock_2column {
position:relative;
float:left;
background-color:#666666;
}
div#mainblock_1column {
position:relative;
float:right;
background-color:blue;
}
div#footer {
display:block;
width:980px;
height:120px;
background-color:#cc6600;
}

-->
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>

  <div id="topintro"><!-- there will be an image in here so that the text runs over it but it will be a big part of the page so no background image please--></div>
	  <div id="topintro_fullwidth_textblock"> 
	  <h1>H1 Page Headline </h1>
	  <h2>H2 Subhead has been operating ski & snowboard instructor training 
		courses in the world-class resorts of Sunshine Village, Banff and <br>
		Big White, British Columbia, also in snow-filled Cardrona, New Zealand.</h2>
	  <p>P. Our tried and tested instructor training courses have been specially 
		designed for those on a gap year as well as those taking a career break, 
		and all programmes lead to internationally recognised ski and snowboard 
		instructor qualifications. Skiing and snowboarding are our passions and 
		we want to make them yours too.</p>
</div>
<div id="maincontent">	
	<div id="mainblock_2column">left column contents</div>
	<div id="mainblock_1column">right column contents</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

dbrimlow · February 16, 2008

For starters, you need an HTML 4.01 doctype declaration (instead of just "html") - use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

After my topintro divs there is a massive white gap, probably equilivent to the -250px margin set on the textbox div.

1. Lose the "DIV" in your css; its a bad habit to get into. A "DIV" is NOT a css element at all; it is only an html markup level container within the body tag that should be styled (like any other markup tag) using either an #id or #class select element - designating "div" in your css before an ID or class requires that they only be used within a "div" tag in the markup. Don't limit them so.

2. avoid using the term "div" when referring to ids or classes in your markup, for example:

After my #topintro there is a massive white gap, probably equilivent to the -250px margin set on the #topintro_fullwidth_textblock.

Now, this is wrong:

position:relative;
top:-250px;
left:20px;
z-index:2;

For "relative" position there is no top, left or z-index because it is within the flow of the html and has no 3rd dimension. You can try position:absolute" if that's what you meant to do. Since #topintro uses position:relative and would contain #topintro_fullwidth_textblock - using position:absolute would make #topintro_fullwidth_textblock RELATIVE to #topintro (instead of the window size).

That's one of your major issues here.

Without a doctype and incorrect css, your page is invalid and strictly in "quirks" mode.

designergav · February 18, 2008

Wow. A real lesson there. I'd always learnt to use tag identifiers when defining styles as you can see. Not any more.

Many thanks for your help.

SOLVED

designergav · February 18, 2008

Thanks so far , I've amended the code, but now I've got further there's another problem :-\. Here's the code again.

The .2column_element and .1column_element are not picking up their styles. If I paste the exact styling code as an inline style on the div declaration in the html is works fine. That suggests a typo in the name or an unclosed style above these but I can't see anything.

!! Dreamweaver 'sees' the styling though, just not the browsers. !!

These elements are going to be everywhere so I don't want to use inline styles for obvious reasons.

Any thoughts?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
font-family:Lucida Grande, Geneva, Verdana, Arial, sans-serif;
font-size:10px;
line-height:13px;
color:#000000;
font-weight:normal;
text-align:center;
}
H1 {
display:block;
font-size:20px;
font-weight:bold;
font-family: Myriad, Arial;
color:#333333;
}

H2 {
display:block;
font-size:12px;
line-height:15px;
font-weight:bold;
color:#333333;
}
.container {
position:relative;
width:980px;
display:block;
background-image: url(images/shadow_pagecontent.gif);
background-repeat: repeat-y;
background-position: center top;
margin-left:auto;
margin-right:auto;
text-align:left;
}
.header {
display:block;
width:980px;
height:120px;
background-color:#ff6600;
}
.topintro {
position:relative;
display:block;
width:943px;
height:255px;
background-color:green;
margin:0px 18px;
text-align:left;
}
.topintro_fullwidth_textblock {
position:absolute;
top:20px;
left:20px;
height:210px;
width:475px;
display:block;
text-align:left;
float:left;
z-index:2;
background-color:yellow;
}
.maincontent {
position:relative;
display:block;
width:943px;
margin:0px 18px;
text-align:left;
}
.mainblock_2column_left {
position:relative;
top:0px;
left:20px;
height:300px;
width:649px;
display:block;
text-align:left;
background-color:#666666;
float:left;
}
.mainblock_1column_right {
position:absolute;
top:0px;
left:679px;
height:300px;
width:244px;
background-color:#ff6600;
text-align:left;
float:right;
}
.2column_element {
position:relative;
top:0px;
left:0px;
height:100px;
display:block;
margin-bottom:10px;
text-align:left;
background-color:#ff3300;
border:1px solid green;
}
.1column_element {
position:relative;
top:0px;
left:0px;
display:block;
margin-bottom:10px;
text-align:left;
background-color:#cccccc;
border:12px solid green;
}
.footer {
display:block;
width:980px;
height:120px;
background-color:#cc6600;
}

-->
</style>
</head>

<body>
<div class="container"> 
  <div class="header">header</div>
  <div class="topintro"> 
    <div class="topintro_fullwidth_textblock"> 
      <h1>H1 Page Headline </h1>
      <h2>H2 Subhead has been operating ski & snowboard instructor training 
        courses in the world-class resorts of Sunshine Village, Banff and <br>
        Big White, British Columbia, also in snow-filled Cardrona, New Zealand.</h2>
      <p>Our tried and tested instructor training courses have been specially 
        designed for those on a gap year as well as those taking a career break, 
        and all programmes lead to internationally recognised ski and snowboard 
        instructor qualifications. Skiing and snowboarding are our passions and 
        we want to make them yours too. </p>
    </div>
  </div>
    <div class="maincontent"> 
      <div class="mainblock_2column_left"> 
        <div class="2column_element">Life as an instructor & Course Locations</div>
        <div class="2column_element">Find a Course</div>
        <div class="2column_element">Time of your life & Trained by Professionals</div>
      </div>
      <div class="mainblock_1column_right"> 
        <div class="1column_element">TV, Leaving soon & Questions</div>
        
      <div class="1column_element">Live Laura</div>
      </div>
</div>
  <div class="footer">footer</div>
</div>
</body>
</html>

dbrimlow · February 18, 2008

LOL! You did it again!

You have fallen into the "DIV as a logical block level tag" trap ... A DIV is ONLY and SOLELY a placeholder ... it is not a replacement for any proper semantic, logical block level tag, markup (paragraph, lists, headers, etc.).

Text MUST be contained in the proper context. Don't think of DIVS as replacement for paragraph. It is just a blank container that does nothing but allow you to group proper markup elements together. This is WHY I mentioned that using "div" in your css and saying you have a "div" that isn't working right is a bad habit to fall into. A lot of css beginners get stuck in this trap.

Unfortunately, that said, your whole css layout is seriously flawed. After messing around with it for 15 minutes or so, I realized that you are making a "relatively easy to accomplish" layout MUCH more difficult than it has to be.

You need to rethink the whole thing over.

bronzemonkey · February 18, 2008

The .2column_element and .1column_element are not picking up their styles.

You cannot start a class or id with a number. That's the problem

dbrimlow · February 19, 2008

LOL! I didn't even notice that!!

Actually you should also avoid using underscore and dashes.

TheFilmGod · February 19, 2008

LOL! I didn't even notice that!!

Actually you should also avoid using underscore and dashes.

Partly disagree, sometimes it is necessary to have a detailed class name e.g. .login_left {} would be better than say, .login2 ??? what would that even mean?

bronzemonkey · February 19, 2008

Partly disagree, sometimes it is necessary to have a detailed class name e.g. .login_left {} would be better than say, .login2 ??? what would that even mean?

Personally, I don't like to put any positional meaning in a class/id because there is no guarantee that .login_left or .col_left is going to remain positioned on the left.

Using _ or - or camel case in a class/id is down to personal preference and consistency. If you use php, asp, js etc then you might prefer to camel case your class/id.

designergav · February 19, 2008

Thanks to bronzemonkey, the changing the numbers to letters in the class names worked a treat.

I like underscores because they make it easier to read the names when scrolling through the code, also means more to anyone else (non-programmer) to amend if they want to change things later.

I should probably explain that every page will use a different layout (common header/footer) hence the complicated css. I'm trying to create some reusable classes so my approach was BIG to small.

This company pays for google listings so i'm not too concerned to the strictness of the validity of the css, I hope to more than make up for that with good SEO practices in terms of copy <H1> tags etc etc, we also have an SEO expert on the case so we should be okay.

Thanks everyone.

DesignerGav

bronzemonkey · February 19, 2008

This company pays for google listings so i'm not too concerned to the strictness of the validity of the css

Valid CSS has nothing to do with SEO...it has everything to do with future-proofing and getting the site to display properly in most browsers. It is also a very easy thing to do...I'd recommend that you put your code through the w3c validators.

we also have an SEO expert on the case so we should be okay.

Well then hopefully he told you beforehand that writing semantic and accessible html is a major SEO concern

dbrimlow · February 19, 2008

I hope to more than make up for that with good SEO practices in terms of copy <H1> tags etc etc,

That was one of the first things I noticed when looking at your code. Which is why I was a little surprised when I saw you slapped some text standing out there alone and naked within a div tag.

STICK with that concept of using proper semantic markup. As the SEO person knows, bots LOVE to find well formed markup with a clear hierarchy of author created items of importance. Header tags are crucial for this (remember always use h1 ONLY once per page ... for the site title); I then personally use h2 for the page title.

The easiest thing to remember is if you can separate content from presentation you will never have to worry about fighting with the css AND the markup while debugging - fighting with the css is chore enough.

I tell my clients that instead of handing me all of their site's text with notes on how they want it to look, where they want this or that on the page, to design their whole website using nothing but text in a Word document, as if it were a corporate presentation to a board of directors.

1. main table of contents (this will be a sitemap)

2. section table of contents (this will be navbars and section navigation)

3. Clear headers, paragraphs and bulleted lists defining each concept clearly and in a proper contextual order of flow.

Now think about it. The whole website is now presented to me on a platter. All I have to do is concentrate on the layout/design and surrounded the existing headers, paragraphs, lists, etc. with the four main standard id containers they belong in - (page >> heading >> body >>footer).

For me, learning has always been easier to reverse-engineer an existing concept (in this case web template, css file, graphic construct, etc), break it all apart to see how it works, while researching the syntax and rules, then build it up from scratch as my own.

I would recommend that you find a template that closely matches what you are trying to accomplish and while keeping the same concepts of wire-frame construction, completely change everything else to make it unique to you.

You can find decent free templates here: http://www.ex-designz.net/template/tempcat.asp?cat_id=13

Don't take these as valid or correctly done on faith (most are, but some don't), use them as a yardstick - but stick with your own concept of good semantic markup.

Next, learn the rules by bookmarking this link (almost all professionals still have this link bookmarked):

css.maxdesign.com.au/selectutorial

Lastly, I also STRONGLY recommend that you buy, in my opinion, one of the best books out on website creation, Dan Cederholm's "Bulletproof Web Design - second edition". $39.99 retail or $26.99 (+ free shipping) at amazon via Dan's website link http://www.simplebits.com/publications/bulletproof/

This book shows how to make your web pages cross-browser/platform compatible AND has the added benefit of showing how to make it 100% flexible by using precision "em" based text/layout. Something every web crafter SHOULD know! (I just started using this myself and am amazed how easy it is).

Good luck,

Dave

Sign In

problem positioning layered divs in IE

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information