CSS - Msie6 Puts My Navbar To The Right, All Other Browsers Work Fine.

http://www.refinethetaste.com/step3.htm

Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help.....

s.o.s

Code:

style>
/*review order*/
#checkoutprocess	{ width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .th	{ float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .color	{ float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .noncolor	{ float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .intprice	{ font-weight:bold; }

#checkoutprocess .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

</style>

I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/

Hi all,

I recently started making a site is css and I had no problems until I came to making the navigation bar. Now I want to have like a button effect on the text so I made this:

Code:

a.navbar:link {
	display:block;
	position:absolute;
	height:25px;
	width:150px;
	background-color:#FFCC99;
	top:40px;
	left:0px;
	z-index:1;
}

The only problem is that if I apply this to all my navbar links they overlap each other because the positioning is always the same.

Any help much appreciated!

Jack.

Firstly I'm a new member here so hi to everyone.

I am fairly new to css. I am trying to create a navbar menu with css, I have used ul and li for the links and its positioned on the left hand side of the page, just where i want it, but my problem is I cant seem to get my text paragraphs to lie at the side of the navbar, they either are above it or below it, obviously im doing something wrong but not sure what.



Many Thanks.

I found a horizontal Dropdown menu I really want to emulate he Austin360.com

What I like about it is that the widths of the top level list items adjust to the widths of their text -- rather than all being the same width. Also the top level list appears to "stretch" horizontally, filling up the entire width of the container. (Although I can't see any widths anywhere in the stylesheet!) How'd they do that?

www. cooperworkskilns.com

The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it.

This isn't working in IE. Lol, its created a rather interesting stairstep effect.

Is there a way to make it span evenly across the page without adjusting the width of each <li>?


Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line.

#navbar ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navbar li { margin: 0 0 0 0; }

#navbar a
{
float:left;
display: block;
text-align:center;
color: #000;
background-color: #FFF;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

#navbar a:hover
{
background-color: #003366;
color: #FFF;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

Hello,

This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway...

I finally got my buttons to work! It's time for the Smirnoff!

But my button are still giving me ...!

Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking...

Everything checks out with W3C except my buttons. Here's the html:
Code:

<div>
<span id="navcontainer1" class="button1">
<ul>
<li>
<a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span>

<span id="navcontainer2" class="button2">
<ul>
<li>
<a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer3" class="button3">
<ul>
<li>
<a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer4" class="button4">
<ul>
<li>
<a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer5" class="button5">
<ul>
<li>
<a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li>
</ul>
</span></div>

Don't laugh...they work! Here's the stylesheet:
Code:

.button1 {
position: relative;
bottom: 100px;
right: 40px;
}

#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}

#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}

.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}

#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}

.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}

#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}

.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}

#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}

.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one. 
left: 520px;
}

#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}

#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}

W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!)

I was just thinking if they could somehow "validate" then maybe they would be more predictable.

Any suggestions?
Thanks

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif.

what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css.

should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated.

Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS.

Here's my CSS for the navbar formatting:
Code:

#navbar ul { 
		margin: 10px auto auto auto; 
		padding: 6px; 
		list-style-type: none; 
		text-align: left; 
		background-color: #000;
		font-family: arial;
        } 

#navbar ul li {  
		display: inline; 
		font-family: arial;
        } 

#navbar ul li a { 
		text-decoration: none; 
		padding: .2em 1em; 
		color: #ffffff; 
		background-color: #000000; 
		font-family: arial;
        } 

#navbar ul li a:hover { 
		color: #000000; 
		background-color: #ffffff; 
		font-family: arial;
        } 

And here's the code I have in the body of my HTML that adds each of the items to the navbar:
Code:

<div id="navbar"> 
	<ul> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="irc.html">IRC</a></li>
		<li><a href="about.html">About</a></li>		
		<li><a href="contact.html">Contact</a></li> 
	</ul> 
</div>

Anyone have any ideas on how I would do this?

Thanks.

I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example:

www . cooperworkskilns . com

The Home button should be at the bottom left of the header.

Here's the pertinent css:

#header{
margin:0px 0px 10px 0px;
padding:0px;
width: 700px;
height: 125px;
border-bottom: 1px solid #666;
background-image:url(../img/header.gif);
}

#navbar{
margin:0px 0px 0px 0px;
padding:0px;
width: 700px;
}

..

Thanks to the forum I've worked out a prior issue but 2 remain in regards to the secondary navigation bar.

1. Width - If I use a value of 25% for the pages with 4 sub-links (i.e. "The Music" main) it spans the full width of the right column but in IE6 it pushes the box below it down abot 10px. In OP7, NS6, NS7 & Mozilla1.7 it displays properly.

2. a:hover - I can't seem to figure how to make the hover effect respond to mousing over all parts of the box. It only activates when hovering over the text portion. Works properly in the main-nav but not for the sub-nav (note - this is also ONLY IE related). Really not important unless it is an easy fix.


I have tested this site in IE6, NS6.2, NS7.1, OP7.5, Moz1.7. I know v4 browsers are a lost cause but if you could confirm success/failure in others I would appreciate it.

Regards,
Golem2

Hi all,

I'm pretty new to CSS and html, and I've run into a problem with a navbar I've created for a website. I want the navbar to extend the length of the content on each page, but I can't seem to set it for that. All I've been able to do so far is get it to fit the content of the navbar itself (too small), or set the height for a higher number of pixels than I need on most of the pages. This lets me accommodate the content on my lengthiest page, but it leaves the others with a lot of white space on the screen.

Could someone please take a look at the code and help me? Bolded line is the problem, but setting it to a percentage doesn't work, either. Thank you for answering what's probably painfully obvious!:

#navigation {
background: #CCCCCC;
float: left;
width: 18%;
height: 750px;
border-right: #990033 2px solid;
border-left: #990033 2px solid;
font-family: arial, sans-serif;
line-height: 150%;
background-image: url (navbar.jpg);
background-repeat: repeat-y;
}
#navigation ul{
list-style: none;
background-color: #CCCCCC;
padding: 5px;
margin: 0px;
text-align: left;
}
#navigation li a {
display: block;
color: #000000;
text-decoration: none;

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!