Firefox, IE8, and opera work fine, but in safari, it makes the two DIVs in the middle of the page go into one DIV.

I already tried to make a "master" DIV where i put both DIVs into it but it still doesn't work.

Then I put float:left on the left one, and float:right on the right. but they just flew all over the page.

I've posted my html and css. Someone please tell me what im doing wrong.

thx in advance.

UPDATE by o.k.w:
Here are the screenshots of the problem on the 2 browsers:

Screenshot on Safari/Chrome
Safari

Screenshot on Firefox
Firefox

2 answers

o.k.w 2355
0
points
This was chosen as the best answer

Ok, I just spent 30min of my christmas on this question. Haha. Anyway, the main issue is the CSS styles are too 'messy'. I can't really put it in words, you can compare the codes I did and see for yourself.

It's not a Safari issue too, but webkit-based browser. Chrome too has problem rendering your codes.

I've merged the CSS into an the HTML as an inline one. I'll post the screenshot in awhile. Here we go:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" ZEROENCRYPTION.com is a web design service that creates sites for a price that will fit right into your budget!"/><meta name="keywords" content="html, web design, css, cheap web designers, affordable web designers, web site creator"/>
<title>ZEROENCRYPTION Web Design</title>
<style type="text/css">
body, html{
    background-color: black;
    font-family: "times new roman", times, arial, serif;
    margin: 0;
    padding: 0;
}
#header{
    background-color:#6D7B8D;
    width: 100%;
    height: 75px;
}

#heading{
    font-size: 52px;
    color: #98AFC7;
    font-style: italic;
    letter-spacing: 20px;
    font-weight: 400;
}

#nav {
    background-color: #646D7E;
    width: 100%;
    height: 30px;
    text-align: center;
}

#nav a { /*format all nav links with margins*/
    margin-left: 30px;
    margin-right: 30px;
}

a:link {color: #F88017; text-decoration: none; font-size: 23px;font-weight: 100;}
a:active {color:  #F88017; text-decoration: none; font-size: 23px;}
a:visited {color:  #F88017; text-decoration: none; font-size: 23px;}
a:hover {color:  #F88017; text-decoration: underline; font-size: 23px;}

#master{
    background-color: green ;
    width: 100%;
    margin-top: 10px;
}

#welcome{
    font-size: 26px;
    color: #616D7E;
    font-style:italic;
    font-weight: 900;
    margin-top: 20px;
}

#paragraph{
    font-size: 20px;
    color: black;
    margin-top: 80px;
    word-spacing: 1px;
    clear: both;
    padding: 80px 20px;
}

#right{
    background-color: silver;
    width: 600px;
    height: 600px;
    overflow: hidden;
    float: right;
}

#left{
    height: 400px;
    width: 350px;
    background-color: silver;
    overflow:hidden;
    float: left;
}

#around {
    height: 100%;
    margin: 0 auto;
    width: 970px;
}

#prev {
    padding: 30px;
    clear: both;
}
#prev div { /* format both 'previous boxes' */
    height: 223px;
    width: 253px;
    background-color: white;
    border: 2px solid #2B547E;
}
#previous {
    float: left;
}

#previous2 {
    float: right;
}
/* all styles from this point down are not modified*/
#comingsoon{
    font-style:italic;
    margin-top: -28px;
    margin-left: 240px;
    font-weight: 400;
}

#inside{
    height: 80%;
    width: 80%;
    background-color: white;
    border:#2B547E 2px solid;
}

#inside2{
    width: 100%;
    height: 34px;
    background-color: red;
    margin-top: 80px;
}

#leftcomingsoon {
    font-size: 30px;
    color: white;
    font-style: italic;
    margin-top: -10px;
}

#copyright{
    font-size: 11px;
    color: white;
    margin-top: 3%;
    font-weight: 900;
    margin-left: 670px;
}

#updates{
    font-size: 24px;
    color: #616D7E;
    font-style: italic;
    margin-top: 18px;
}
</style>
</head>

<body>

<div id="around" align="center">

<div id="header">
<h1 id="heading">ZEROENCRYPTION</h1>        
</div>

<div id="nav">
<a id="home" href="http://www.ZEROENCRYPTION.com">Home</a>
<a id="contact" href="http://www.ZEROENCRYPTION.com">Contact</a>
<a id="about" href="http://www.ZEROENCRYPTION.com">About</a>
<a id="portfolio" href="http://www.ZEROENCRYPTION.com">Portfolio</a>
<a id="blog" href="http://www.ZEROENCRYPTION">Blog</a>
<a id="computer" href="http://www.computersquirrel.com">Computer Repairs</a>  
</div>


<div id="master" align="center">

  <div id="left"><p id="updates">UPDATES</p>
    <div id="inside">
      <div id="inside2"><p id="leftcomingsoon">coming soon!</p>
      </div>
    </div>
  </div>

  <div id="right"><p id="welcome">Zeroencryption's Portfolio</p><p id="comingsoon">coming soon!</p>
  <div id="prev">
    <div id="previous"></div>
    <div id="previous2"></div>
  </div>
    <p id="paragraph">Want a website? Starting a business? ready to take your already existing
business to the web? No matter what the case is, you've found the right 
place. Here at Zeroencryption, we offer affordable web design to fit your
budget. To learn more, visit our about page.</p>
</div>
</div>

<div id="bottom">
</div>



</div>
</body>
</html>
Answered almost 7 years ago by o.k.w
  • I just tried it on my laptop but i cant tell what it looks like as i dont have safari. but i think itll work. thank you so much and merry christmas. ive been trying this ffor a while and i couldnt understand how to fix it. so what did you do exactly? canyonchase1 almost 7 years ago
  • @canyonchase1: You can check the screenshot I posted in the other answer. It is not an exact replical in terms of layout (i.e. margin/padding) but you can tweak it yourself. Good luck! o.k.w almost 7 years ago
o.k.w 2355
2
points

Somehow I can't edit my post anymore, I suspect the HTML I posted conflicted with the scripts? :P

Anyway here's the screenshot on Safari ousing my modified codes:

New Codes

Tested it on Chrome/FF/IE8 as well.

Answered almost 7 years ago by o.k.w