Width problem

[fierdor]

I am trying to have a 10 pixel width fill color below my top menu..My CSS looks like this:

#header {
background-image:url(../images/header-bg.jpg);
background-repeat:repeat-x scroll left top #B9CAE3;
height: 143px;
width: 856px;

}
#menufiller {
background-color: #000;
height: 10px;
width: 856px;

#navmenu {
position:relative;
width:700px;
left: 367px;
top: 37px;

}

#navmenu ul{
float:left;
margin: 0px;
padding: 0px;
display: inline;
}
#navmenu ul li{
display:inline;
}

#navmenu ul li a{
background-image:url(../images/menubg.gif);
background-repeat:no-repeat;
text-decoration:none;
outline:none;
color:#000;
float:left;
margin-right:1px;
height:45px;
h\eight:30px;
width:100px;
display:block;
text-align:center;
padding:11px;
display: inline;
}

}

 

So basically for visual purposes:

****************************header************************************

                                                                                          *tab*tab*tab*tab

*****************menufiller*********************************************

 

It should look like this and it does in Firefox and IE 7.0

But in IE 6 the width of the filler is greater than 10px around 13-14px i think and it is displaced  down along with the tabs

 

 

*******************************header*******************************

******************displacement empty*********************************

                                                                              ***tabs***tab****tab***

******************menufiller****************************************

 

Can you suggest some fix for IE 6 ??

#header is the top

#menufiller is the filled color

#navmenu is where there is a list of menu items

 

[haku]

CSS without HTML is like icing without a cake!

[fierdor]

Sorry my bad...

<div id="wrapper">
<div id="header" >
  <div id="logo">
  <div id="sublogo"><img src="images/sublogo.gif"></div></div>
  

<div id="title">Title</div>
<div id="navmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
<div id="menufiller"></div>

 

And also the CSS for logo and wrapper

#logo {
background-image: url(../images/logo.gif);
position: relative;
left: 700px;
top: 40px;
background-repeat: no-repeat;
height: 40px;
width: 67px;
}
#wrapper {

width:856px;
background-color: #ffffff;
height:700px;
margin:auto;

}

#sublogo
{
position:relative;
left:-700px;	
}

:

[fierdor]

*bump*

Am running out of ideas...Any thoughts??

 

 

[fierdor]

Ok I have been trying a few things and these are the strange results:

 

1) I changed the width of the menu filler to 2px..The change got reflected in Firefox But not in IE..The width remained the same as before

 

2) So i tried increasing the width to 100px and that change got reflected alright in both browsers

 

3)Also to be more clear about the error in IE:

I get the header alright...Ideally I should get a 10px black line below it (#menufiller)...

But in IE I get a line of height more than 10px of colour #DCEAF5(am not sure if it is relevant but still!) and below that I get my black line of the same width...

So as a result my navmenu looks all screwed up..

 

 

[haku]

Where is that color coming from? I don't even see it in your code.

[fierdor]

My header image is a gradient of blue...Even then this strip is of a distinctly different shade of blue...

Even I dont know where that colour is coming from

 

 

[haku]

Why don't you show all your code - There must be something you aren't showing us.

 

Also, you keep saying 'width', but I'm pretty sure you mean 'height'.

[fierdor]

Oh damn! Yes I do mean height...I feel like a big fool right now 

I am sorry for  all the confusion...

 

[fierdor]

Ok Instead of posting the entire code I stripped the HTML and CSS to a bare minimum where the problem is recreated..

The problem is in the navmenu div

 

So instead of troubleshooting the div (which has been disastrous!) I just removed the nested navmenu div from the header div and put it below it

And yup...The stupid HEIGHT problem has gone....

Thanks Haku for helping me think out loud  

 

However there is this minor little thing I would like a more elegant solution to

 

Now that my navmenu div is out of header div I am facing a bit of problem positioning it:

 

***********************************************************************

                                                      HEADER AREA

***********************************************************************

#########################################################

                                                      EMPTY AREA

#########################################################

                                                                            *********************************

                                                                                            NAV MENU

                                                                            *********************************

 

Basically I wan the nav menu in the header area...I want to eliminate the empty area

My current solution is I have given it a negative top margin to position it appropriately...Is that an acceptable solution?

As an effect I will have to give a negative top margin to all the elements below it also right?

 

HTML:

<div id="wrapper">
<div id="header" >
  <div id="logo">
  <div id="sublogo"><img src="images/sublogo.gif"></div></div>
<div id="title">Home</div>
</div>
<div id="navmenu">
<ul>
<li id="home"><a  href="index.php">Home</a></li>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="item3"><a  href="#">Item 3</a>
<li><a  href="#">Item 4</a>
<li id="aboutus"><a href="#">About Us</a></li>
</ul>
</div>

 

Corresponding CSS for navmenu:

 

#navmenu {
position:relative;
left:200px;
width:700px;
margin:0px;
padding:0px;
top:-100px;       /*THIS IS THE PART I AM TALKING ABOUT*/
}

 

 

 

[haku]

All I can really say is... what?

 

Is that diagram what you have now, or what you want? What are you trying to do? What is it not doing now?

[fierdor]

1) The diagram in the previous post is what I have now.

 

2) What I want is the empty area to be eliminated and this:

*************************************************************************

                                                                Header

                                                                                        ######################

                                                                                                      navmenu

                                                                                        ######################

************************************************************************

3) My solution to this problem is giving it a negative margin

top:-100px

But this makes the elements below the menu  further go down and there is a empty space in between

 

4) Is there a better way to handle this?

 

5) I solved or rather worked around the HEIGHT problem by removing the navmenu div from the header (i.e. the nesting) and put the navmenu div below the header

 

Am i clear now?

[haku]

Why don't you just move your navmenu inside the header if you want it there?

[fierdor]

1)Originally it was inside.

2)But that caused the height problem where I was getting some weird colour 10px height line below the header and my navmenu was getting displaced in Internet Explorer.

[haku]

Do you have an image of what you are trying to achieve?

[fierdor]

Never mind..The negative top margin solves the problem and I am not getting any other side-effect error..

Thank you!