'Cannot margin <legend> on a top of a fieldset

I got a fieldset working - here is the code:

                            <fieldset>
                            <legend>Signed In Users (220)</legend>
                            <div>
                                <div class="new_user"><span>Welcome to the new user:&nbsp;<strong>Name_name</strong></span></div>
                                <div class="logusers">Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin</div>
                                <div class="ranks">
                                    Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins 
                                </div>
                            </div>
                        </fieldset>

in css:

fieldset {
display: table-cell;
width: 100;
border: 1px solid gray !important;
border-radius: 5px;
border-top-right-radius: 0 !important;
background-color: #d3e1e5 }
legend {
    width: inherit !important;
    padding: 0 5px !important;
    background-color: #d3e1e5;
    border-style: none none !important;
    text-align: right !important;
    border-left: 1px solid gray !important;
    border-right: 1px solid gray !important;
    border-top: 1px solid gray !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: -1px !important;
    margin-top: -9px !important;
}

I got it working in firefox and it this is how it looks and how I want it to look in all browsers - Firefox And this is how it looks in different browsers, eg. Chrome. Chrome

I really appreciate any help :) Thank you all so much!

  • THANK YOU ALL SO MUCH. I knew I should of used position: absolute. I appreciate the help so much :>
htmlcss


Solution 1:[1]

I update your CSS in fiddler see if it's ok 

fieldset {
 display: table-cell;
 width: 100;
 border: 1px solid #808080 !important;
 border-radius: 5px;
 border-top-right-radius: 0 !important;
 background-color: #D3E1E5;
 position: relative;
 margin-top:25px;
} 
legend {
 width: inherit !important;
 padding: 0 5px !important;
 background-color: #D3E1E5;
 border-style: none none !important;
 text-align: right !important;
 border-left: 1px solid #808080 !important;
 border-right: 1px solid #808080 !important;
 border-top: 1px solid #808080 !important;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 margin-right: 25px !important;
 margin-top: -25px !important;
 position: absolute;
 right: 0;
}

Demo

Solution 2:[2]

Try this: few workarounds in CSS will solve your problem

i will Suggest do not use negative values in CSS, it will definitely result in cross browser issues, use it only if you does not have options.

   

 fieldset {
	display: table-cell;
	width: 100;
	border: 1px solid gray !important;
	border-radius: 5px;
	margin-top: 15px !important;
	border-top-right-radius: 0 !important;
	background-color: #d3e1e5 
}

legend {
    width: inherit !important;
    padding: 0 5px !important;
    background-color: #d3e1e5;
    border-style: none none !important;
    text-align: right !important;
    border: 1px solid gray !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: -1px !important;
    margin-top: 2px !important;
    position:fixed;
    right:7px;
    top:0px;
}
<fieldset>
	<div>
		<legend>Signed In Users (220)</legend>                              
		<div class="new_user">
			<span>Welcome to the new user:&nbsp;
				<strong>Name_name</strong>
			</span>
		</div>
		<div class="logusers">
			Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin
		</div>
		<div class="ranks">
			Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins 
		</div>
	</div>
</fieldset>

Solution 3:[3]

You should then use some other HTML attribute for rendering the text of the legend visually, span or div... And use the legend with sr-only CSS class for semantics and screen-readers. That's how I solved this issue :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Manjunath Siddappa
Solution 3 Stevan Stojanovic

Related Questions