CSS - Why Does My Css Based Site Look Funny In Ie 6?

Hi everyone.

I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element.

The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css.

Here's the CSS...
Code:

#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}

#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}

#hdnav {
margin: 0;
padding: 0;
}

#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}

#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}

#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}

And the HTML...

Code:

<div id="hd">
<div id="hdlogo">
<img src="images/logo.gif" alt="Home" title="Home"/>
</div>
<div id="hdnav">
<ul>
<li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li>
<li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li>
<li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li>
<li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li>
<li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li>
</ul>
</div>
<div id="hdbar">
<img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high -->
</div>
</div>

Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site...

Code:

body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}

body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}

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

#content {
width: 780px;
margin: 0 auto;
padding: 0;
}

#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}

#content centers everything and #allwrap is a container for all it's child elements.

I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline.

Does anyone have any ideas?

Thanks a bunch..

-Brian

Hello!
I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button.

The menu is CSS based, and uses ul and li tags.
Here is the CSS Code:

Code:

@charset "ISO-8859-1";

#nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* This keeps the menu from interfering with the main content. */
#nav + *{
	clear: left;
}


#nav ul {
	padding: 0;
	margin:0;
	list-style: none;
	z-index:99;
	position:relative;
	overflow:visible;
	display:inline;
}

#nav > li ul {
	text-align: center;
	display:inline;
	list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
	position: relative;
	background: #E7E7E7;
/*	background: url(trans/white80.png);*/
	color: #00F;
	border: solid 1px #AAA;
	height: auto;
	width: 6.5em;
	max-width: 6.5em;
	overflow: hidden; 
	font-weight: normal;
}
#nav ul ul {
	width: 8em;
}
#nav > li {
	margin: 0;
	float: left;
	text-align: center;
	height: 3em;
	overflow:hidden;
}


#nav a {
	text-decoration: none;
	padding: 0 0.5em; 
	line-height: 1.2em;
	background: transparent;
	color: inherit;
	overflow: hidden;
}
#nav li li a {
	line-height: normal;
/* TEST: Is This Better?
/*	padding: 0.25em 0.5em; */
}

/* #nav ul, #nav li, #nav a{
	 * display: block;
}


#nav ul{
	visibility: hidden;
}



/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
	position:absolute;
	top: 0;
	left: 95%;
	visibility: hidden;
}



/* Shadow! */

#nav li:hover {
/*	border-style: outset;*/
/*	background: #D7D7D7;*/
	background: #1AD;
	color: white;
}
#nav > li ul {
/*	background: #666;*/
	background: transparent url("trans/black40.png");
}
#nav > li > ul {
	margin: -1px;  /* This is to make the width equal to parent li width. */
	position: relative;
	top:  4px;
	left: 4px;
}
#nav > li ul li {
	position: relative;
	top:  -4px;
	left: -4px;
}
/* end shadow */


/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
	margin: -0.2em;
	padding: 0.2em;
	z-index: 2;  /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
	margin: -0.2em;
	padding: 0.2em 0.7em;
}
/* end enlarger */


/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
	visibility: hidden;
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
	visibility: visible;
}




.skipnav {
	display: none;
}

#nonav {
	display: block;
	background: transparent;
	height: 1px;
	border: 0;
	margin: 0 0 -1px 0;
	padding: 0;
}

Here is the other file:

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/style/MainMenu.css">
<title>Main Menu</title>
</head>
<ul id="nav">
<li><a href="index.php">Nova Health Center Home</a></li>
<li><a href="drtoufigh.php">About Our Doctor</a></li>
<li><a href="approach.php">About Our Approach</a></li>
<li><a href="clients.php">Client Testimonials</a></li>
<li><a href="nutrition.php">Nutrition Information</a></li>

<li><a href="faq.php">Questions And Answers</a></li>
<li><a href="directions.php">Directions & Office Hours</a></li>
</ul>
</html>

Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here.

I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF.

Thanks in advance for any assistance you can provide!
Regards,
Riley F. Marquis III

Hi All,

I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages.

There are three main issues:

1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE)

2. The links for the nav buttons are not rendering

3. The rollover states for the nav buttons are not rendering

Here's the relevant code as it's presently constituted:
Code:
CSS

.twoColLiqLtHdr #mainContent {
	margin: 5px 20px 0 291px;
	background-image: url(../assets/structure/main_background.png);
	width: 638px;
	height: 622px;
	background-repeat: no-repeat;
	position: relative;
}
#mainContent #navMenu {
	width: 636px;
	height: 60px;
	background-image: url(../assets/navigation/navigation_buttons.png);
	background-repeat: no-repeat;
	}
#mainContent #navMenu ul {
	margin: 0;
	padding: 0;
	float: left;
	}
#mainContent #navMenu li {
	float: left;
	}
#mainContent #navMenu li a {
	display: block;
	}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
	background-position: 0 0;
	}
#mainContent #navMenu li#faq a:link {
	background-position: -167px 0;
	}
#mainContent #navMenu li#about a:link {
	background-position: -272px 0;
	}
#mainContent #navMenu li#contact a:link {
	background-position: -422px 0;
	}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
	background-position: 0 -60px;
	}
#mainContent #navMenu li#faq a:hover {
	background-position: -167px -60px;
	}
#mainContent #navMenu li#about a:hover {
	background-position: -272px -60px;
	}
#mainContent #navMenu li#contact a:hover {
	background-position: -422px -60px;
	}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
	background-position: 0 -120px;
	}
#mainContent #navMenu li#faq a:active {
	background-position: -167px -120px;
	}
#mainContent #navMenu li#about a:active {
	background-position: -272px -120px;
	}
#mainContent #navMenu li#contact a:active {
	background-position: -422px -120px;
	}

Code:
XHTML

<div id="mainContent">
    <div id="navMenu">
    	<ul>
			<li id="services"><a href="services.html"></a></li>
   			<li id="faq"><a href="faq.html"></a></li>
			<li id="about"><a href="about_us.html"></a></li>
			<li id="contact"><a href="contact_us.html"></a></li>
		</ul>
	</div>
</div>

I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that).

Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one.

Sam

I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav.

Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16

If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16

In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from
a list apart.

Here are the things I'm struggling with:

1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left.

2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area.

The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css

The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list)

Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless.

Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute.

Thanks!

i'm considering moving my site to an em based layout but all the info i can find on the topic is a year or two old. this is fine for accomplishing the task but i'm curious what the current benefits are. it seems than most browsers have moved toward page zooming rather than just text zooming.

thoughts?

IE seems to have a lot of trouble with percentage based heights. In certain circumstances they seem to be okay, other times they seem be completely ignored. Pixel based DIV heights seem to work, but I don't know if it is just the circumstance or what not. Does anyone know what the actual "rules" are about this as it applies to IE?

Hey everyone.

I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu.

The menu is text based, vertically stacked and has two main criteria:

1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options.

2. When the above occurs, the text of the Work menu changes to a specific colour.

Eg:

Work - HIMALAYAS | LIONS EDITORIAL
About
Links
Blog


At the moment I am using the following code to show and hide:

<a href="#"onmouseover="showhide('script'); return(false); ">WORK</a>

<div style="display: none;" id="script">
<a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a>
</div>

<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

Can anyone help me out?

Ray.

I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case...

With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach.

Thanks.

I'm attempting a page layout that contains a scrolling div for the main content (overflow: auto. I want this div to be placed a fixed position from the top of the browser window but to expand vertically to fill up the rest of the window space.

I can get something working in IE6 using an MS expression for the height of the DIV
Example 1

But obviously this doesn't work on Firefox.

I tried a different method to avoid the expression.
Example 2

This one is odd, in that at first site it doesn't look as though it works in IE6... BUT if you re-size the window (even slightly) it then appears how I would expect. However this version still doesn't give a scrolling div in Firefox, it seems the height of 100% given to the div #bottomHalf is over ridden.

Is there actually a way I can achieve what I'm after that will work across the latest browsers? (I'm not worried about IE5, NN4 etc).

Good morning.

I'm in the procces of changing my old table based site to css/ divs layout. Instead of using a "position: absolute" setup, I was trying to get the page to fit dynamicaly with different screen resolution (I placed the initial divs with "left: 20%;" and "right:20%;" which seems to work fine in FF, but fails completely in IE). So, in the end I had to resort to fixed positions and sizes... not what I wanted... but it'll do in the meantime (Until I find the propper tutorials to get this done).

Meantime, I have a problem with two small divs I'm trying to place at the center and bottom of the page. They do display at the right position with FF, but are placed on the left with IE.

text-align: center doesn't seem to do the trick... and since the "align" tag is going to be deprecated... I don't want to use it. How do I set these to be placed in the bottom/center?


The page: http://www.onpoi.net/ah/

(Note that only the index.php has been redone, the rest is still with the old table layout).

Thanks in advance

If you take a look at the following site...

http://www.impulsive-solutions.co.uk/test/test.htm

In the central column you will see a grey border. On the left of that border there is a gap between the left border and the connecting top and bottom bits. Why is this happening? and secondly why is it only happening on the left hand side. Furthermore, in firefox it works fine, there is no gap.

Andy

Like many PHP programmers, I've been migrating from table-based design to CSS for a few websites now, but there's still a problem I've yet to get around.

Most dynamic websites have at least one page that displays a number of dynamic results that need to be displayed in a tabular format. That is, you need to display variable results in orderly columns and rows. Traditionally, this has been done with html tables. No problem. Tried and true.

But WC3 has recommend the migration away from tables. Thus, I feel like I'm a "bad" web developer when I resort back to using tables for the dynamic results on my otherwise CSS-based page.

Question: since this is a problem that many PHP programmers currently face, has anyone found a good resource for information on this problem? Is it even possible?

I've purchased several CSS books and have combed through many websites, but I've never found information relevant to the dynamic design that we PHP programmers face.

In fact, the O'Reilly book seems to indicate that it's not possible to achieve tabular layout without using tables:


Quote:
Tables are unique, compared to the rest of document layout. As of CSS2.1, tables alone possess the unique ability to associate element sizes with other elements--all the cells in a row have the same height, for example, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. There is no other situation in layout where elements from different parts of the document tree influence each other's sizing and layout in so direct a way.

- p.331, Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A . Meyer, (c) 2004, O'Reilly Media, Inc.


So before I give up my search, I thought I'd post to this forum to see if anyone has found a good solution.

Many thanks,
Steve Stringer

Colleagues,

I seem to be having an issue on a page I am developing, where I am using CSS to position many of my elements.

I have a banner at the top, and then have used absolute positioning of a couple of flash movies, a graphic and a javascript menu. I have used Xara Webstyle for creating the JS-based Menu.

The problem I am experiencing, is that these are positioned in the order I mentioned, from the top to the middle of the page. I also then have some CSS positioned items below the menu. This menu is a tiered, or flyout menu of sorts, and when it drops down is should overlap the absolutely positioned items in the bottom of the page, but those items are overlapping the menu, I assume, because they are absolutely positioned. What I would like is to make the bottom items "go to the background" so to speak, so the javascripted menus writes over them.

Is there some setting I am missing that would allow these bottom elements to be in background, so to speak, so that the menu drops will be on top??

Thanks for your help, in advance.

Kork