Two problems, one of which is in IE6

**deronsizemore** · May 4, 2007 08:44

Hi - Here is the layout I'm working on: http://www.oxtalk.com/ksba

1. You can see that the header doesn't enclose the tabbed navigation at the top. In Firefox the tabs overlap the content below it and in IE7 the tabs are simply cut off. I can fix this by giving #header a height of 138px but I didn't know if this is the best option or not? I assumed that I didn't have something cleared properly?

2. I've only checked the site in FF, IE6/IE7, and Opera thus far but if you check it out in IE6 the #header-right isn't displaying correctly. It's the same height as the header for some reason. Here is an image of what I'm seeing in IE6:

The site does validate, so I don't really know what else to do.

**Raffles** · May 4, 2007 08:54

Actually, in Firefox the text underneath overlaps the tabs and it looks a bit bad, so I'm not actually sure what it's supposed to look like. Are those tabs supposed to be a part of the rounded blue thing, like in the screenshot? Or does Firefox have it almost right?

**deronsizemore** · May 4, 2007 09:00

Originally Posted by Raffles

Actually, in Firefox the text underneath overlaps the tabs and it looks a bit bad, so I'm not actually sure what it's supposed to look like. Are those tabs supposed to be a part of the rounded blue thing, like in the screenshot? Or does Firefox have it almost right?

Hi - Sorry for the confusion here. Here is a screen shot of what I'm wanting it to look like (this is in FF with the width on #header set to 138px).

Here is what I see in FF:

Here is what I see in IE7:

**BonRouge** · May 4, 2007 09:03

Edited...: Sorry... I misunderstood the problem.

**Raffles** · May 4, 2007 09:17

I think you have the structure wrong. Too many divs involved in that header. I would use this structure:

HTML Code:

<div id="header">
  <a>logo</a>
  <div>search area</div>
  <address>address info</address>
</div>
<ul>tabs</ul>
<div id="content">
...
</div>

If you float the UL right and then give it a negative margin-top equal to the height of the tabs, it should work. Don't give #header a fixed height. Instead, float the search area and address to the right and clear them by giving #header overflow:auto. Also give #header a padding-bottom equal to the height of the tabs and probably you'll need to give the <address> a bit of margin-bottom too. I'm not sure how nicely the <address> thing will behave cross-browser, but it's probably the most semantically relevant thing to use there.

**deronsizemore** · May 4, 2007 11:07

Well I've tweaked the html a little and fixed a few things and broken some others. lol I'm sorry Raffles, I couldn't change everything to your specifications as I was a little confused on what you were telling me to do.

Here is my updated code: http://www.oxtalk.com/ksba/index2.html

FireFox looks almost right except for the large space between the search area and the address. I can't find where this space is coming from. It's almost like the logo is spanning across the entire width of the header (if you remove the html anchor which I've used for the logo from the html, you'll see the site react correctly in FF).

Internet explorer is close to right also, it just does not have the gap between the search area and the address that Firefox and Opera have. Although in IE6 an IE7, the nav manu is not displaying correctly, it's all jumbled up on the right side of the header instead of separated nice and neat. I can fix this by setting a width on the nav ul, but I shouldn't have to do that for this to work I don't think?

**Raffles** · May 4, 2007 13:42

The big space was because you were clearing both, when you only needed to clear right. Anyway, I had a play about with my idea and removed what I thought was unnecessary code both in the HTML and CSS:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css" media="screen">
/*-------------------------------------------------
Styles for www.ksba.org
Version:        1.0
Author:            Deron Sizemore
Author URI:        http://www.randomjabber.com/
-------------------------------------------------*/
* {
padding: 0;
margin: 0;
}

body {
text-align: center;
background: #f3f1e9;
border-top: 15px solid #00529c;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: small;
min-width: 870px;
}

* html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}

/* Page Structure
----------------------------------------------------------------*/

#wrapper {
width: 850px;
margin: 0 auto;
text-align: left;
background: #f3f1e9 url(contentbg.gif) repeat-x left top;
}

#content {
float: left;
width: 515px;
}

#secondary {
float: right;
width: 310px;
}

/* Header
----------------------------------------------------------------*/

#header {
background: #dbd5c5;
overflow:auto;
}

* html #header {
  height:1&#37;; /* haslayout in IE6 */
}

#header a.logo {
float: left;
width: 202px;
height: 113px;
background: url(logo.gif) no-repeat;
display: block;
color:#dbd5c5;
font-size:0.1em;
margin-top: 10px;
}

#search {
float: right;
background: #00529c url(headerrightbottom.gif) no-repeat left bottom;
height: 27px;
width: 500px;
margin-right:50px;
}

#search ul {
float: left;
list-style: none;
font-size: 85%;
padding: 5px 0 0 10px;
}

#search ul li {
float: left;
text-transform:uppercase;
}

#search ul li.borderleft {
border-left: 1px solid #fff;
}

#search ul li a {
display: block;
padding: 0 .8em;
line-height: 1em;
text-decoration: none;
color: #fff;
} 
#search ul li a:hover {
text-decoration: underline;
}

address {
margin:20px 50px 55px 0;
clear: right;
color: #666;
text-align: right;
font-size: 85%;
float: right;
font-style:normal;
}

/* Search
--------------------*/

input.search {
border: none;
background: #fff url(magnifier.gif) no-repeat .2em .3em;
padding: 1px 2px 1px 18px;
vertical-align: middle;
color: #666;
width: 165px;
}

input.go {
margin-left: 3px;
vertical-align: middle;
border: 0;
background: transparent;
color: #fff;
font-size: 85%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
cursor: pointer;
padding-top: 1px;
}


/* Navigation
----------------------------------------------------------------*/

ul#main-nav {
list-style: none;
float: right;
margin:-2.6em 50px 0 0;
position:relative;
z-index:2;
}

ul#main-nav li {
float: left;
}

ul#main-nav a {
float: left;
display: block;
margin-left: 3px;
padding:0.6em;
color: #fff;
text-decoration: none;
background: #00529c;
}

ul#main-nav a:visited {
background: #00529c;
}

ul#main-nav a:hover {
background: #1570c1;
}

/* Main Content
----------------------------------------------------------------*/

#content p {
padding-left: 15px;
}

/* Secondary Content
----------------------------------------------------------------*/

#secondary p {
padding-right: 15px;
}

/* Footer
----------------------------------------------------------------*/

#footer {
clear: both;
}

</style></head><body>

<div id="header">
    <a href="#" title="Kentucky Schoool Boards Association" class="logo">Kentucky Schoool Boards Association</a>        
    <div id="search">
      <ul>
            <li><a href="#">career opportunities</a></li>
            <li class="borderleft"><a href="#">contact</a></li>
        </ul>
        <input name="keywords" maxlength="50" class="search" size="25" type="text">
        <input name="go" value="SEARCH" class="go" type="submit">
    </div>
    <address>
        260 DEMOCRAT DRIVE<br>
        FRANKFORT, KENTUCKY 40601<br>
        PHONE: 502-695-4630
    </address>    
</div>

<ul id="main-nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">ASK KSBA</a></li>
    <li><a href="#">DEPARTMENTS</a></li>
    <li><a href="#">LINKS</a></li>
</ul>

<div id="wrapper">
    <div id="content">
    <p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Ut sagittis dolor
sit amet eros. Morbi at mauris. Proin accumsan malesuada eros. In
lacinia. Phasellus id nulla id felis elementum nonummy. Donec dapibus
ipsum sed nisi. Cras et odio vel velit nonummy rhoncus. Praesent mi
nisi, volutpat at, tincidunt sit amet, consequat dignissim, risus. Nunc
odio metus, porta ut, aliquet a, gravida id, neque. Nulla felis. Cras
blandit mi vitae massa. Donec euismod nisl quis mauris. Aenean pharetra
dolor convallis ipsum. In tincidunt, lorem sit amet imperdiet accumsan,
erat leo cursus quam, quis luctus erat lorem non urna. Morbi diam enim,
euismod ut, gravida vel, dapibus a, dui. Nulla mauris. Ut facilisis
faucibus massa. Nullam hendrerit volutpat elit. Mauris feugiat, ipsum
et facilisis tristique, erat nulla blandit lectus, vitae tempor risus
lorem in leo. Pellentesque sed libero at est euismod placerat. Praesent
vel dui a eros dignissim hendrerit. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed adipiscing vestibulum tortor. Etiam
eu nisi eget massa porttitor ullamcorper. Quisque elit purus, congue
sed, congue eu, ultricies quis, elit. Nullam metus elit, hendrerit
eget, pharetra ut, eleifend nec, orci. Sed convallis velit eu dui.
Suspendisse adipiscing nisl sed erat. Sed in sem. Fusce at enim. Aenean
ut ante sit amet nibh ultrices porta. Praesent nibh quam, lobortis a,
placerat ac, rhoncus eu, turpis.</p>
    </div>

    <div id="secondary">
    <p>Nulla
mauris. Ut facilisis faucibus massa. Nullam hendrerit volutpat elit.
Mauris feugiat, ipsum et facilisis tristique, erat nulla blandit
lectus, vitae tempor risus lorem in leo. Pellentesque sed libero at est
euismod placerat. Praesent vel dui a eros dignissim hendrerit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing
vestibulum tortor. Etiam eu nisi eget massa porttitor ullamcorper.
Quisque elit purus, congue sed, congue eu, ultricies quis, elit. Nullam
metus elit, hendrerit eget, pharetra ut, eleifend nec, orci. Sed
convallis velit eu dui. Suspendisse adipiscing nisl sed erat. Sed in
sem. Fusce at enim. Aenean ut ante sit amet nibh ultrices porta.
Praesent nibh quam, lobortis a, placerat ac, rhoncus eu, turpis.</p>     
    </div>

    <div id="footer">
    <p>footer</p>
    </div>
</div>

</body></html>

It works all right, though I'm not so sure now about the nav being outside the header. Maybe it should be in there after all.

BTW the code seems to be HTML but you have an XHTML doctype. I'd change the latter.

**deronsizemore** · May 4, 2007 16:48

Originally Posted by Raffles

The big space was because you were clearing both, when you only needed to clear right. Anyway, I had a play about with my idea and removed what I thought was unnecessary code both in the HTML and CSS:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css" media="screen">
/*-------------------------------------------------
Styles for www.ksba.org
Version:        1.0
Author:            Deron Sizemore
Author URI:        http://www.randomjabber.com/
-------------------------------------------------*/
* {
padding: 0;
margin: 0;
}

body {
text-align: center;
background: #f3f1e9;
border-top: 15px solid #00529c;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: small;
min-width: 870px;
}

* html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}

/* Page Structure
----------------------------------------------------------------*/

#wrapper {
width: 850px;
margin: 0 auto;
text-align: left;
background: #f3f1e9 url(contentbg.gif) repeat-x left top;
}

#content {
float: left;
width: 515px;
}

#secondary {
float: right;
width: 310px;
}

/* Header
----------------------------------------------------------------*/

#header {
background: #dbd5c5;
overflow:auto;
}

* html #header {
  height:1%; /* haslayout in IE6 */
}

#header a.logo {
float: left;
width: 202px;
height: 113px;
background: url(logo.gif) no-repeat;
display: block;
color:#dbd5c5;
font-size:0.1em;
margin-top: 10px;
}

#search {
float: right;
background: #00529c url(headerrightbottom.gif) no-repeat left bottom;
height: 27px;
width: 500px;
margin-right:50px;
}

#search ul {
float: left;
list-style: none;
font-size: 85%;
padding: 5px 0 0 10px;
}

#search ul li {
float: left;
text-transform:uppercase;
}

#search ul li.borderleft {
border-left: 1px solid #fff;
}

#search ul li a {
display: block;
padding: 0 .8em;
line-height: 1em;
text-decoration: none;
color: #fff;
} 
#search ul li a:hover {
text-decoration: underline;
}

address {
margin:20px 50px 55px 0;
clear: right;
color: #666;
text-align: right;
font-size: 85%;
float: right;
font-style:normal;
}

/* Search
--------------------*/

input.search {
border: none;
background: #fff url(magnifier.gif) no-repeat .2em .3em;
padding: 1px 2px 1px 18px;
vertical-align: middle;
color: #666;
width: 165px;
}

input.go {
margin-left: 3px;
vertical-align: middle;
border: 0;
background: transparent;
color: #fff;
font-size: 85%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
cursor: pointer;
padding-top: 1px;
}


/* Navigation
----------------------------------------------------------------*/

ul#main-nav {
list-style: none;
float: right;
margin:-2.6em 50px 0 0;
position:relative;
z-index:2;
}

ul#main-nav li {
float: left;
}

ul#main-nav a {
float: left;
display: block;
margin-left: 3px;
padding:0.6em;
color: #fff;
text-decoration: none;
background: #00529c;
}

ul#main-nav a:visited {
background: #00529c;
}

ul#main-nav a:hover {
background: #1570c1;
}

/* Main Content
----------------------------------------------------------------*/

#content p {
padding-left: 15px;
}

/* Secondary Content
----------------------------------------------------------------*/

#secondary p {
padding-right: 15px;
}

/* Footer
----------------------------------------------------------------*/

#footer {
clear: both;
}

</style></head><body>

<div id="header">
    <a href="#" title="Kentucky Schoool Boards Association" class="logo">Kentucky Schoool Boards Association</a>        
    <div id="search">
      <ul>
            <li><a href="#">career opportunities</a></li>
            <li class="borderleft"><a href="#">contact</a></li>
        </ul>
        <input name="keywords" maxlength="50" class="search" size="25" type="text">
        <input name="go" value="SEARCH" class="go" type="submit">
    </div>
    <address>
        260 DEMOCRAT DRIVE<br>
        FRANKFORT, KENTUCKY 40601<br>
        PHONE: 502-695-4630
    </address>    
</div>

<ul id="main-nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">ASK KSBA</a></li>
    <li><a href="#">DEPARTMENTS</a></li>
    <li><a href="#">LINKS</a></li>
</ul>

<div id="wrapper">
    <div id="content">
    <p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Ut sagittis dolor
sit amet eros. Morbi at mauris. Proin accumsan malesuada eros. In
lacinia. Phasellus id nulla id felis elementum nonummy. Donec dapibus
ipsum sed nisi. Cras et odio vel velit nonummy rhoncus. Praesent mi
nisi, volutpat at, tincidunt sit amet, consequat dignissim, risus. Nunc
odio metus, porta ut, aliquet a, gravida id, neque. Nulla felis. Cras
blandit mi vitae massa. Donec euismod nisl quis mauris. Aenean pharetra
dolor convallis ipsum. In tincidunt, lorem sit amet imperdiet accumsan,
erat leo cursus quam, quis luctus erat lorem non urna. Morbi diam enim,
euismod ut, gravida vel, dapibus a, dui. Nulla mauris. Ut facilisis
faucibus massa. Nullam hendrerit volutpat elit. Mauris feugiat, ipsum
et facilisis tristique, erat nulla blandit lectus, vitae tempor risus
lorem in leo. Pellentesque sed libero at est euismod placerat. Praesent
vel dui a eros dignissim hendrerit. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed adipiscing vestibulum tortor. Etiam
eu nisi eget massa porttitor ullamcorper. Quisque elit purus, congue
sed, congue eu, ultricies quis, elit. Nullam metus elit, hendrerit
eget, pharetra ut, eleifend nec, orci. Sed convallis velit eu dui.
Suspendisse adipiscing nisl sed erat. Sed in sem. Fusce at enim. Aenean
ut ante sit amet nibh ultrices porta. Praesent nibh quam, lobortis a,
placerat ac, rhoncus eu, turpis.</p>
    </div>

    <div id="secondary">
    <p>Nulla
mauris. Ut facilisis faucibus massa. Nullam hendrerit volutpat elit.
Mauris feugiat, ipsum et facilisis tristique, erat nulla blandit
lectus, vitae tempor risus lorem in leo. Pellentesque sed libero at est
euismod placerat. Praesent vel dui a eros dignissim hendrerit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing
vestibulum tortor. Etiam eu nisi eget massa porttitor ullamcorper.
Quisque elit purus, congue sed, congue eu, ultricies quis, elit. Nullam
metus elit, hendrerit eget, pharetra ut, eleifend nec, orci. Sed
convallis velit eu dui. Suspendisse adipiscing nisl sed erat. Sed in
sem. Fusce at enim. Aenean ut ante sit amet nibh ultrices porta.
Praesent nibh quam, lobortis a, placerat ac, rhoncus eu, turpis.</p>     
    </div>

    <div id="footer">
    <p>footer</p>
    </div>
</div>

</body></html>

It works all right, though I'm not so sure now about the nav being outside the header. Maybe it should be in there after all.

BTW the code seems to be HTML but you have an XHTML doctype. I'd change the latter.

Ahh! Thank you. The help is very much appreciated! I'm still learning with a lot of techniques in CSS and I didn't realize the clearing: both would do that. I thought that even if I only needed to clear one, I could still right "both" and it'd be the same either way.

Can you explain what you mean with my code being HTML and not XHTML? The code validates XHTML Strict, therefore doesn't that make it XHTML? What am I doing wrong?

Thanks.

User Tag List

Thread: Two problems, one of which is in IE6

Thread Tools

Display

Two problems, one of which is in IE6

Bookmarks

Bookmarks

Posting Permissions