making little bar display nice in IE

[jeddik]

Hello all.

I have the following css for making a little bar in Moz FF

.small_bar{
position:absolute;
left:38px;
top:626px;
height:4px;
width:60px;
background-color:black;
}

The positioning is wrong in IE so I have an additional css file which contains this :

.small_bar{
position:absolute;
top:615px;
height:4px;
background-color:black;
color:black;
}

The bar position is fine but the hieght seems to be about 10px instead of 4px.
I tried a valuer of 2px in the IE css but it made no difference.

Is there a different parameter for the hieght for IE ?

The results can be seen on the live site :

http://www.yodbod.com

On the index page just below the menu buttons you will see a black bar.
In Moz FF it fine, in IE its too fat !

Appreciate any guidance. :)

[Albatross]

If I read this right, you're trying to assign a heigh to an element that is smaller than the font size that any text in that element would otherwise contain. IE won't let you do this (one of its many bugs, which is associated with IE's lack of "layout"). You're going to have to set the font-size to a smaller value than the height of the element you want (for example, if you have an element that you want to be 10 pixels tall, yet the text that would normally be in it is 16px tall, then you'll have to set the font size to be no larger than 9px). Here's an example:

.test {
font-size: 0;
height: 5px;
}

[jeddik]

Thanks - that sorted it. :)

One other little thing.

The bottom two menu buttons "move up" a few pixels when viewed in IE
when the mouse is rolled over them :o

Problem on:

http://www.yodbod.com

Any ideas why ?

Thanks

[Albatross]

Don't take offense to what I'm about to say, but your code needs a TOTAL re-write. However, to "patch things up" so you can get on with a re-write using clean, semantic, and valid HTML and CSS (and the bare amount of each) replace your bottom menu (the one with the guide and contacts) with this:

<div class ="menu" >
<div class ="menu_h" >Guide</div>
<ul style="list-style: none;">
<li><a href="/index1.php">How to Use</a></li>
<li><a href="/index2.php">Who can Use</a><br></li>
<li><a href="/ad_contact.php?b=London&amp;c=f&amp;d=A&amp;e=homes&amp;f=loc_sht&amp;i=o&amp;r=N&amp;s=NN" >Contact us</a></li>
<li><a href="/ad_epostcard2.php?b=London&amp;c=f&amp;d=A&amp;e=homes&amp;f=loc_sht&amp;i=o&amp;r=N&amp;s=NN" >Tell a Friend</a></li>
</ul>
</div>

Also, strive for complete separation of the HTML from the CSS (put it all in an external stylesheet), and semantic markup as well. For example, a list of links is just that - a list, and should be marked up as such. Avoid absolute positioning for general layout as well. Floats can handle that very easily.

[jeddik]

OK - I changed both the menus to lists.

And it now works in IE without juping about. Thanks :)

Unfornuately I have not learnt about using floats :o

I allways use position absolute or relative.

Can you recommend a tute on floats ?

Thanks :)

[Albatross]

Not off the top of my head. I learned how to code by reading a book by Elizabeth Castro. The latest edition of that book is HTML, XHTML and CSS Visual Quickstart Guide, 6th Edition. If you want to pick it up, I suggest going to your local library and seeing if they have it first (or the previous edition, HTML for the World Wide Web Visual Quickstart Guide, 5th Edition: With XHTML and CSS).

If reading books is not your thing, you may want to try www.w3schools.com (no relation to the W3C).