I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered in spaces. I am unsure of how to ensure uniform appearance across different browsers.
You can observe the contrast between Chrome on Windows and Safari on OSX in the following link: . My goal is for the design to mirror that of Chrome, but I am struggling to identify the issue within my code.
<div id="right-preview"><div id="background1"><div id="contentarea">
<h4 id="time">01:59 AM</h3><br/><h4 class="username">Enter a name..</h3><div id="conversation"><div class="gBoxTall">
<div class="right">
<p class="message"> Your mom and I are going to divorce next month.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div><div class="wBoxTall">
<div class="right">
<p class="message"> Why ? Call me please.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div><div class="gBoxTall">
<div class="right">
<p class="message"> I wrote Disney and this phone changed it.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div></div>
</div></div>
Below, you will find my CSS code:
* {
margin: 0;
padding: 0;
}
h1 a {
color: black;
text-decoration: none;
}
#background1 {
background-color:#09F;
height: 720px;
margin: 0px auto 0;
overflow: hidden;
position: relative;
width: 480px;
}
...