Css problem with inline-block div

Question

Created Mar ’16

Replies 10

Boosts 0

Views 14k

Participants 3

Hi guys

I'm developing a new website and I've found a strange behaviour with two inline-block divs. In all other browsers it works without problems.

The problem is that there is in safari a space above the first div and I can't understand why.

Here is the simple code:

<html>

<head>

</head>

<body>

</div><div class='contactDetails'>

</div>

</body>

.test {

background: red;

}

.contactsColumn {

width: 45%;

background: #ffffff;

overflow-y: auto;

height: 87%;

display: inline-block;

}

.alphabetLetter {

height: 20px;

background: #848484;

border: 1px solid #ffffff;

vertical-align: middle;

line-height: 20px;

color: #ffffff;

padding-left: 10px;

}

.contactDetails {

background: blue;

width: 54.9%;

height: 87%;

display: inline-block;

overflow-y: auto;

border-left: 1px solid #58B0F4;

}

Any suggestion?

Thanks in advance

Boost

Answer 1

OOPer OP

Mar ’16

The problem is that there is in safari a space above the first div and I can't understand why.

Use Web Inspector to find what's happening.

If you mean margins around body with `a space above the first div`, you should know every browser have default styles for each html elements.

In the latest Safari, `body` element have this style:

display: block;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;

These default styles may differ between implementations or versions of browsers, and you may need to add so-called `resetting.css` to make the difference smaller.

Try adding this to your .css:

body {
  margin: 0;
}

I may be missing your point, and if so, please try to describe your issue more presicely.

0

Answer 2

KMT OP

Mar ’16

You haven't supplied enough to test bed your example, but so far, I don't see a space as you mention.

Which version Safari, on what platform, are you testing with? What flavor is the server?

0

Answer 3

giamma84 OP

Mar ’16

I've shot a couple of images. This is in chrome:

http://i66.tinypic.com/18bx9c.png

and this is in safari:

http://i68.tinypic.com/116qn2p.png

as you can see, in safari there is a red space over the first div and simply it is the background color of the container div. In other words it seems that the first div is moved bottom by something. I've done some tests and I think the problem is caused by overflow-y: auto...

I'm using safari 9.0.3 on os x 10.11.3 and wildfly as application server.

Thanks

0

Answer 4

OOPer OP

Mar ’16

With your html and css both Safari and Chrome shows exactly the same result, which are different from both of your images.

Please show enough code to reproduce your issue.

0

Answer 5

giamma84 OP

Mar ’16

The code I attached in my first post is the code that shows me the problem. Pay attention that the problem is visible only with the dev console closed

0

Answer 6

OOPer OP

Mar ’16

Of course, I checked the output while the dev console is closed. Have you tested your code with other brand new setup Macs?

0

Answer 7

giamma84 OP

Mar ’16

No, I didn't 😟

I've also tried with ie edge and firefox and the problem affects only safari

0

Answer 8

OOPer OP

Mar ’16

Copy the html code (in your opening post) and save it as "test.html", copy the css code and save it as "test.css". And open "test.html" with Safari.

Is it the same as the png image "this is in safari:" ?

0

Answer 9

giamma84 OP

Mar ’16

same problem.

Here you are:

http://i64.tinypic.com/11w6lg0.png

http://i65.tinypic.com/2j3o8z8.png

http://i63.tinypic.com/29268o7.png

Safari version: Versione 9.1 (11601.5.17.1)

0

Answer 10

OOPer OP

Apr ’16

With this experiment, one thing clear is that the problem hides in YOUR client side, not server side.

And I updated my system to work with Safari 9.1 and the result is nearly the same as what you have shown as Chrome output, just the background color filling the right side of the window is red, not blue.

By the way, I can see an unknown icon at the left end of the tab bar in your screen shot. Aren't you using some extensions in your Safari? Disable (or remove) all of them and see what happens.

0