<h1> margin fails when placed under <ul>

[vasox56]

hi, gettin the same strange problem on new ie and ff.

basically i have a h1 element.. and in my style sheet i have set margin-top as 25px

when i use that h1 class in my page it looks fine..

the only problem is that i also have a css rollover menu (u ordered list)

and when i place the h1 directly under this <ul> the margin doesnt work..

you can see the page here.. the orange heading should have a margin like it does half way down the page.. but it doesnt on the top of the page..

http://www.londonheathrowcars.com/o...ode=EC1%20-%20City,%20Clerkenwell&FCar=Saloon

anyone suggest anything without me pasting all my code?

 

[vasox56]

ok i can see what it happening.. i just increased the h1 top margin.. and the heading moved slightly down..

this tells me that the heading is positioning itself based on the top of the menu..

here is my menu css.. would i need to add some kind of buffer to tell the elements below it to start after a certain distance.. thanks..

* {
  margin:0;
  padding:0;
}

body {
 background-color:#EBEBEB;
 text-align:center;
}


div#wrap {
 width:750px;
 margin:auto;
 position:relative;
 border:1px solid #666666;
 background-color:#ffffff;
 text-align:left;
}

ul#nav {
 list-style-type:none;
}

ul#nav li.outerLi {
 border-width:1px 1px 1px 1px;
 border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
 border-style:solid;
 position:relative;
 font-family:arial;
 float:left;
 font-size:80%;
 color: #666666;
 width:73px;
 background:white;
 text-align:center;
}

a {
 color: #666666;
 text-decoration: none;
}

a.baitlink {
 color:#fff;
 text-decoration: underline;
}

ul#nav li ul {
 list-style-type:none;
 display:none;
 position:absolute;
 left:-1px;
 top:23px;
 width:75px;
}

ul#nav li {
 position:relative;
}

ul#nav li li {
 line-height:23px;
 border:1px solid #ccc;
}

ul#nav li ul ul{
 position:absolute;
 left:74px;
 top:0px;
 background:#fff;
 width:74px
}

ul#nav li  a {
 display:block;
 line-height:17px;
 padding:3px 0 3px 0 ;
}

/* mac hide \*/

ul#nav li  a {
 height:1%
 }

/* end hide */

div#menu ul li ul {
 display:none;
 }

ul#nav li ul li a {
  background: #EBEBEB;
  display:block;
}

ul#nav li ul li a:hover {
  background-color:#666666;
  font-family:arial;
  color: #F99C08;
}

ul#nav li:hover ul ul, ul#nav li.over ul ul {
 display:none;
 }

ul#nav li:hover ul, ul#nav li.over ul,
ul#nav li li:hover ul, ul#nav li li.over ul {
 display:block;
}

.text {
 float:left;
 margin-top:30px;
 width:600px;
}

/* clear without structural mark-up */
.clearfix:after {
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden;
}

.clearfix {
  display:inline-block;
}

 /* mac hide \*/

 * html .clearfix {
  height: 1%;
  }

.clearfix {
 display: block;
 }
 /* End hide */

 

[traingamer]

You don't have any <h1> tags in your menu - it is a <p> tag. Could that be the source of the confusion?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

Your margin for h1 begins at the top of the menu because the menu is zero px high -- it only contains elements that are floated and as such do not contribute to its height and it's height is not defined. If you add [tt]overflow: auto;[/tt] to the ul declaration, the problem should go away in IE7 and FF. IE6, AFAIK, does not work with that command, so you will have to use something like holy hack with height: 1%; for IE6. Of course a simple alternative of just adding appropriate height to the ul would be an option too, but that would then work only for the solution at the moment (if you change option sizes, or font sizes or anything, you would have to change the size of ul again).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[vasox56]

hi.. i used overflow auto on the actual page itself..

<ul style="overflow: auto;" id="nav">
...
</ul>

and the margin problem is fixed but the dynamic menu doesnt work now.

if i was to add a height or an overflow to the css.. because there are so many <ul> elements in my stylesheet im not sure which one to add it to..

you can see what the page looks like here.. the heading underneath the menu looks good but when you mouse over services..the tree menu should load..

http://www.londonheathrowcars.com/o...A3112&Postcode=SW1%20-%20Westminster&FCar=MPV

 

[vasox56]

yes... sorry about the late reply.. i used a height for the ul and its working..

i know its a quick fix.. but it will do for now.. thanks.