problem displaying navbar properly in E6

Forum Moderators: not2easy

Message Too Old, No Replies

problem displaying navbar properly in E6

new to css and trying to write using div

maxiesdemon

5:25 pm on Jun 16, 2008 (gmt 0)

Hi, I'm new to all of this and am trying to create my site using div instead of tables and frames. It's all going well, except that I can't get the navbar (leftbar) to display properly in IE6. If I use float:left; it disappears altogether; if i use position:absolute; it is 'underneath' the main text.

swa66

12:45 am on Jun 17, 2008 (gmt 0)

Welcome.

To try to help you, I think it's easiest to go a few steps back first. I kinda hope you do know it and this is all redundant, but to make sure. It'll make your life a lot easier.

div instead of tables and frames

I'm afraid there's a small but important missing element there. You can use CSS to style any tag you like, anyway you like. The trick is to choose the tags so that without the CSS the page still makes sense. (Think about those using e.g. a screenreader, they don't get read your visiual representation). Since <div> has little meaning in HTML aside of "division", try to use it as a last resort: if there's no better tag. You'll need them in the end all too often (in (x)html 5 there are more tags for sections in the page navigation menus etc, so it'll diminish if and when the standards and the browsers get there.)
Try to make sure to think of you page on it's own, usign <p>, <h1>-<h6>, <ul>, <dl>, ... so that it makes sense on it's own.

This might be the purist approach, but it'll save you a lot of frustration. There's one div I'd always add: a wrapper encompassing all content in the <body>, it's a way out of some bugs("features") of IE.

I've the impression (I might be mistaken) you're trying to develop CSS using IE. That's like swimming upstream, not the best way to learn.
I think the easiest and the least frustrating path is to develop in any browser but IE (choices are plenty: safari, firefox, opera, ...).

But then it'll look horribly broken in IE: yes. But IE has another feature to allow us to save it without having to expose the trouble it created to the rest of the browsers: conditional comments.
It's basically a -fully ignored- comment for all browsers but the versions of IE that you target.

While it's not a vertical menu: try here to see some of the points I touched in action: [webmasterworld.com...]

in IE6. If I use float:left; it disappears altogether

floated items (partially) disapearing is a known bug in IE6 (you can still select the text, it's just not displayed properly): it's called the guillotine bug, you could search for that for some inspiration on how to fix, but ...
[I explained first that the proper fix is conditional comments, so that means take care with hacks you'll find to solve it, there is a big chance they'll come back and haunt you (e.g. when IE8 is released).]
I think the preferred method is to give the parent "haslayout". There are a number of ways to trigger it, I've used "zoom:1" (a non-standard tag (so dump it in the IE6 stylesheet only)

If that doesn't do it, please try posting some (minimal) code to see where you're at that's still got the problem in it.

maxiesdemon

5:51 pm on Jun 17, 2008 (gmt 0)

Wow! I've just read through your 'tutorial' and I' stunned.

I'm now not sure what I want to do so here goes.

I'm an old-co cobol developer with an interest in other things. I've developed a web-site for a small business I run. I developed it in firefox & seamonkey in linux & firefox, seamonkey, IE7 & opera in windows. i don't have a version of IE6 at home.It all looked fine until I showed it to my boss at work in IE6!

Now I have no CSS, HTML, Javascript experience. Everything I got I got from google and W3C. My code is unashamedly cribbed (in places). I try to understand as much as possible, but I make mistakes.

So here is (roughly) what I have.

My stylesheet is

body {
background:#FFFFFF;
margin:9px 9px 0 9px;
padding:0;}
p {background-color: transparent;
color: 663366;
font-family: sans-serif;
font-size:11pt;
margin-left: 15px}
#level0 {
background:#FFFFFF;
width:99%;}
#level1 {
padding-left:9px;
background:#FFFFFF;}
#level2 {
background:#FFFFFF;
position:relative;}
#main {
margin-right:9em;
margin-left:215px;
padding-right:9px;
background:#FFFFFF;}
#topBar{
background:#FFFFFF;}
#lftBar {
float:left;
line-height: 1.2em;
width:200px;
left:9px;}
#rgtBar {
position:absolute;
width:9em;
top:0;
right:0;}
#main h1 {
margin:0;
padding-left:.3em;
font: Georgia, "Times New Roman", Times, serif;
color:#609;
background:#FFFFFF;}
#main {
font: Verdana, Helvetica, Arial;}
#main dt {
font-weight:bold;
font-size:120%;
font: Georgia, "Times New Roman", Times, serif;
margin-top:.8em}
#rgtBar h3 {
margin:0;
padding:0px;
background:#FFFFFF;
font-weight:bold;
font-size:1em;
color:#FF0000;
font: Georgia, "Times New Roman", Times, serif;
text-align:center;}

I have a set of pages, all with the same basic layout and a different main content. It seemed the easiest way to do what i wanted. The main page looks pretty much like this

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

</head>

<body>

<div id="level0">
<div id="level1">

<div id="topBar">
<p>
<img src="" width="200" height="150">
<img src="" width="50%" height="150" >
<img src="" width="200" height="150">
</p>
</div>
<div id="level2">
<div id="lftBar">

<ul>
<br></br>
<li><a href="</a></li>
<br></br>
<li><a href="</a></li>
<br></br>
<li><a href="</a></li>
<br></br>
<li><a href="</a></li>
<br></br>
<li><a href="</a></li>
<br></br>
</ul>
</div>

<div id="rgtBar">
<h3>New for July 2008</h3>
<p> <a href="</a><p>
<br><br>
<h3>Special Offer for Autumn 2008</h3>
<p> <a href="</a></p>

</div>
<div id="main">
<h1></h1>
<h3></h3>
<p> </p>

I've tried downloading IE6 to my laptop but it won't install alongside IE7 - don't know how to get round that.

I'm more than happy to take comments and criticisms of my code. I've had to guess most of the way through.
I would like to learn properly and am open to (v. cheap) suggestions as to how to do this.