Div are with different browser

Question

Hello everyone my div area height is displayed different with these browsers: Firefox and Internet Explorer. In Chrome and Safari my div area looks fine could you help me please.

Here is my div area

.openmeclis 
{
    position:relative; 
    margin-left:4px;
    background:#66B3E3; 
    width:90px; 
    height:370px; 
    display:inline-block;
    overflow:hidden;    
}

Here is a caps what I mean This is from Firefox

enter image description here

Here is from Chrome

enter image description here

<div id="subMenu">
    <div class="openbaskan" style="float:left">
        <a href="/Home/Baskan/45">Başkandan</a> <br />
        <a href="/Home/Baskan/46">&#214;zge&#231;mişi</a> <br />
        <a href="/Home/Baskan/47">Haberler</a> <br />
        <a href="/Home/Baskan/58">Videolar</a> <br />
        <a href="/Home/Baskan_foto">Fotoğraf Galerisi</a>
    </div>

    <div class="openmeclis" style="float:left">
    <a href="/Home/Sehir_Rehberi/93">Meclis &#220;yeleri</a> <br />
    <a href="/Home/Sehir_Rehberi/99">Meclis G&#252;ndemi</a> <br />
    <a href="/Home/Sehir_Rehberi/100">Meclis Kararları</a> <br />
    </div> 
</div>

CSS:

#subMenu
{        
    width:964px;
    margin-left:auto;
    margin-right:auto;
    display:none;
    font-size:14px;
    font-style:normal;
    height:336px;  
    font-family: 'Museo300Regular';         
}

Add the html too please. Are you using any form of a css reset such as eric meyers reset or normalize? — Jared, Oct 23 '12 at 14:42
Since I dont know what you dont like about one or the other, I dont know what you trying to change? Can you tell us what exactly you would like to fix about the firefox div? is it the extra horizontal space? — gbtimmon, Oct 23 '12 at 14:42
Try adding `padding: 0;` and `margin: 0;` to see if your CSS has random padding/margins. — SMacFadyen, Oct 23 '12 at 14:42
Give your html things too... so we can provide the answer live with fiddle or something... — Sri, Oct 23 '12 at 14:43
yes extra horizantal space can you see Firefox image that under the "Meclis" menu the blue area bigger than Chrome — learnmore, Oct 23 '12 at 14:44

Sri · Answer 1 · 2012-10-23T15:10:29.970

Check this edited answer

Edited Demo

Note the edited CSS below:

.openmeclis 
{
    position:relative; 
    margin-left:4px;
    background:#66B3E3;
    width:90px; 
    height:370px; 
    overflow:hidden;
    float: left;
    list-style: none;
}

#subMenu {
    width:964px;
    margin-left:auto;
    margin-right:auto;
    font-size:14px;
    font-style:normal;
    height:336px;
}

HTML:
----------
<div id="subMenu">
    <div class="openmeclis">
        <ul>
            <li><a href="/Home/Baskan/45">Başkandan</a></li>
            <li><a href="/Home/Baskan/45">&#214;zge&#231;mişi</a></li>
            <li><a href="/Home/Baskan/45">Haberler</a></li>
            <li><a href="/Home/Baskan/45">Videolar</a></li>
            <li><a href="/Home/Baskan/45">Fotoğraf Galerisi</a></li>
        </ul>
    </div>

    <div class="openmeclis">
        <ul>
            <li><a href="/Home/Sehir_Rehberi/93">Meclis &#220;yeleri</a></li>
            <li><a href="/Home/Sehir_Rehberi/99">Meclis G&#252;ndemi</a></li>
            <li><a href="/Home/Sehir_Rehberi/100">Gündemi</a></li>
            <li><a href="/Home/Baskan/45">Meclis Kararları</a></li>
        </ul>
    </div> 
</div>

Do not add unnecessarily <br/> tag. Instead of that you can use the <ul> methods. You do not need to add style tags in your html when you have the CSS. I don't know what you add in the #sub menu... I just edited the HTML and CSS for openmeclis

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Just use line-height to your css. Because every browser renders different line-height,that's why your div is showing problem with different browsers. Here is the link for the same problem that you have asked

FireFox 3 line-height

CSS line-height issue across browsers

edited May 23 '17 at 12:03

Community

1
1

answered Oct 23 '12 at 14:55

NewUser

12,713
39
142
236

Div are with different browser

2 Answers2