Problem with CSS on display of elements

Question

<p style="float: left; position: relative; left: 130px; top: 80px; display: none;" id="homehref"><a href="" style="color: white;">Home Page</a></p>

I have this as my hidden element on the header of my site.

Whenever i mouseover over the header logo i show this element.

In firefox its working fine. But in IE 7 it shifts navigation below it. Can somebody suggest how i can keep my Home Page link truly floating in ie7 as well.

please show us the complete code (the header, too) and your css - otherwise it's almost impossible to tell whats wrong. — oezi
– oezi, Commented Nov 11, 2010 at 7:43
@sushil , is there any reason why you are using "p" instead of a div — kobe
– kobe, Commented Nov 11, 2010 at 7:43
Can somebody please tell me generally as to how to make a element float on a page. So that there is no effect on element below it. I mean it can move over a layer above. I cant bring the entire code here. — sushil bharwani
– sushil bharwani, Commented Nov 11, 2010 at 7:45
no there isnt a reason i have replaced p with a div. But there isnt any effect. Any small hint will be a big help. — sushil bharwani
– sushil bharwani, Commented Nov 11, 2010 at 7:46
if you want to float some element over another you can give negative margin like margin-top:-20px; , so that it will come on top of other element , other option will be absolute positioning — kobe
– kobe, Commented Nov 11, 2010 at 7:48

kobe · Accepted Answer · 2010-11-11 07:51:42Z

1

You can do something like this

#divtofloat{
position : absolute
top:10px;
left:10px
}

its stays 10px from left and 10px from top of the page. if you want to come over another element you can give z-index higher than the elements on the page.

With absolute positioning , you can place the div anywhere on the page ...with top,left ,bottom properties.

answered Nov 11, 2010 at 7:51

kobe

15.9k15 gold badges67 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

desh · Accepted Answer · 2010-11-11 07:56:46Z

0

The floating works depending on the container-content relationship, so I need to know how html is structured. Anyhow, doesn't seem floating is best solution here. Besides, you have to separate structure (html) from presentation (css). You may need: HTML:

<div id="header">
   <a href="link_to_home">
      <img src="logo_url" />
      <span class="tooltip">Home Page</span>
   </a>
</div>

CSS:

#header a { position: relative;}
#header a span { display: none; position: absolute; left:130px; top: 80px; }
#header a:hover span { display: block;}

How's it working now?

answered Nov 11, 2010 at 7:56

desh

11 bronze badge

Comments

kst · Accepted Answer · 2010-11-11 07:59:51Z

0

I haven't seen your fully source code but I think you would like to do tooltip on your header logo.If whatever you do here is jquery tooltip would cool style.

answered Nov 11, 2010 at 7:59

kst

1,5184 gold badges20 silver badges35 bronze badges

Comments

Ankheg · Accepted Answer · 2010-11-11 08:30:10Z

0

@sushi, you could make test page and put it somewhere, then show us :|

Anyway, we're all a little blind here without actual code of situation, but I can assume that maybe you need to put in markup float:left element above over header elements, or use overflow:hidden on it, or somth.

But as @gov already proposed earlier, maybe it's easier to make it absolute positioned. Don't forget to make header element positioned relative in that case.

answered Nov 11, 2010 at 8:30

Ankheg

411 bronze badge

Collectives™ on Stack Overflow

Problem with CSS on display of elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related