CODEWITHSUNDEEP
htmlcsspositioning
Abhi
Abhi

Reputation: 350

CSS: text position not correct in mozilla browser

My question is that i have these buttons Item 1, Item 2 etc. on my site, now the text position inside the box/button element are at correct position for Chrome but on Firefox they show some problem and gets placed somewhere above the box where the text is not properly visible.

Could someone please help with the CSS or whatever else im going wrong so that i can place the text inside the box element at the correct position. 

<div class="contents grid_26 push_24">
            <ul class="ca-menu">
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 1<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 2<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 3<img src="images/image_1.png" width="22" height="22" class="arrow1"></h2>

                        </div>
                    </a>
                </li>
</div>

<style>
.ca-main{
font-size: 14px;
position: absolute;
top: -17px;
height: 80px;
width: 120px;
left: 70%;
margin-left: -88px;
opacity: 0.8;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}

.container_24 .grid_26 {
margin-top: -20px;
}

.container_24 .push_24 {
 margin-left: 0px;
}

.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;

}

.ca-menu{
padding: 0 0 0 48px;
margin: 62px auto;
width: 1020px;
cursor: pointer;
}

.ca-menu li{
top: 28px;
left: -140px;
width: 140px;
height: 28px;
border: 3px solid #333;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-left:-48px;

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
/* -webkit-border-radius: 125px; */
-moz-border-radius: 125px;
border-radius: 125px;
}

</style>

Upvotes: 0

Views: 816

Answers (3)

Adrift
Adrift

Reputation: 59779

You have position: relative; with left: -140px; on each list-item, which is pushing the it 140px to the left of the viewport (outside of the screen) because no other element has a position property set on it (it is relative to the root <html> element in this case)

You also have not cleared the floated <li> elements which is why your container div has no height .. floated elements are taken out of the flow and ignored unless they are followed by an element with a clear property set on it ..

Also consider validating your page - but I think the two above problems are causing the issue you speak of. You really need to learn about good CSS practices ..

Upvotes: 1

Santiago Baigorria
Santiago Baigorria

Reputation: 696

I would suggest you to try this:

.ca-menu li a {
    text-align: left;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #333;
    position: relative;
}

However, to build menus I suggest you use Superfish. It's the best way tp create nice and interactive menus with animations and full browser compatibility.

I'll even leave you the link to make you thing more easy: https://github.com/joeldbirch/superfish/

Believe me, it's great. Look what I made: www.santz.net and santz.freeiz.com

I developed both menus using this plugin and it's great.

Hope I have helped, any doublt contact me through here or with my Facebook page.

Upvotes: 1

pixeltracer
pixeltracer

Reputation: 60

first is you are missing a ul closing tag on your html.

then You might want to add a css reset on our style. The purpose of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

heres a link on a CSS Tools: Reset CSS

Upvotes: 1

Related Questions