Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

site appears fine on all browsers except IE9 and Safari

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
US
Currently my site appears fine on all browsers except IE9 and Safari. The address for the site is I've attached my code, but believe it has something to do with the height of my wrapper CSS background and using the overflow: hidden in the splash CSS, when I take that away the page appears fine but my spry menu then doesn't fit on the same line. Any help would be appreciated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Companies Transportation Brokerage</title>
<style type="text/css">
<!--

ul.MenuBarHorizontal li ul li {
clear:left;
}


.wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(images/testbanner9.png);
background-repeat: no-repeat;
}
.news .Associations {
font-size: 20px;
padding-left: 35px;
}
.menu {
background-repeat: no-repeat;
height: 35px;
padding-top: 10px;
}

.top a {
color: #060;
font-size: 14px;

}

.top a:hover {
color: #060;
}

.menu .top {
height: 40px;
width: 700px;
float: right;
}
.about .mission {
color: #FFF;
text-align: left;
padding-left: 25px;
font-size: 15px;
}
.about ul {
color: #FFF;
text-align: left;
padding-right: 200px;
font-size: 14px;
}


.menu .Spry {
float: right;
width: 655px;
clear: both;
}
.top {
text-align: right;
padding-right: 10px;
}

.splash {
height: 400px;
background-image: url(images/gettycropped2.jpg);
overflow: hidden;
}

.splash h1 {
color: #FFF;
font-size: 18px;
text-align: right;
padding-top: 75px;
padding-right: 40px;
}
.splash .welcome {
font-size: 20px;
color: white;
text-align: right;
padding-right:25px;
}
.splash .main {
text-align: right;
color: white;
padding-right: 25px;
padding-left: 350px;
}
.about .About.Us {
font-size: 20px;
color: white;
padding-left: 10px;
}
.news .News.and.Events {
font-size: 20px;
color: #000;
padding-left: 35px;
}

.splash .deals {
color: #FFF;
font-size: 16px;
text-align: right;
padding-right: 175px;
}

.content {
height: 400px;
overflow: hidden;
}

.about {
float: left;
height: 100%
width: 400px;
background-image: url(images/leftcolumn_background2_new.png);
height: 485px;
width: 488px;
}

.news {
border: 2px solid gray;
float:right;
width:408px;
height:100%;
background-image: url(images/rightcolumn_background3.png);
}
.about .support {
padding-left: 150px;
color: WHITE;
padding-top: 25px;
}
.about .equipment {
height: 150px;
width: 170px;
float: right;
margin-right: 10px;
margin-top: 55px;
background-image: url(images/bigstockphoto_Red_Truck_1970809_cropped_new_CSS.png);
}
.about .dropdown {
margin-top: 60px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/test%20background.png);
}
-->
</style></head>

<body>
<div class="wrapper">
<div class="top"><p><a href=" Your Equipment</a> <a href=" Quote Request</a> <a href=" Booking</a> <a href=" Loads</a> <a href=" Services</a> <a href=" top>
<div class="menu">
<div class="Spry">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>
</div spry>
</div menu>
<div class="splash"><h1>A FRESH NEW LOOK AT TRANSPORTATION</h1><p class="deals">"No Bad Deals"</p><p class="welcome">Welcome to Our Website</p><p class="main">With over two decades of service, Meadow Lark has offered innovative solutions to any transportation needs with on-demand operational services and advanced technology. Customers, contractors, and agents alike benfit from association with our company. Family owned and operated, Meadow Lark is the permier choice for your shipping requirements</p></div>

<div class="content">
<div class="about">
<div class="equipment"></div equipment>
<h1 class="About Us">About Our Company</h1>
<p class="mission">Mission Statement</p>
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare our selves to any other cusiness, only to how WE were yesterday</li>
<li>Our word is our bond</li>
</ul>
<p class="support">SUPPORT CENTER <BR />24 Hours / 7 days a week <br />1-800-736-5233</p>
<div class="dropdown"><form name="form1" id="form1">
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
<option>open for online requests..</option>
<option value="index.htm">home</option>
<option value="flatbedservices.htm">flatbed services</option>
<option value="vanservices.htm">van services</option>
<option value="heavyhaulservices.htm">heavy haul services</option>
<option value="globalservices.htm">global services</option>
<option value="ltlservices.htm">ltl services</option>
<option value="crossborderservices.htm">cross border services</option>
</select>
<input type="button" name="Button1" value="Go" onclick="MM_jumpMenuGo('menu1','parent',0)" />
</form></div dropdown>

</div about>
<div class="news"><h1 class="News and Events">News and Events</h1><script type="text/javascript">

/***********************************************
* IFRAME Scroller script- © Dynamic Drive DHTML code library (* This notice MUST stay intact for legal use
* Visit Dynamic Drive at for full source code
***********************************************/

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="400px" height="150px" marginwidth="0" marginheight="0" hspace="5" vspace="20" frameborder="1" scrolling="no"></iframe>')
</script><h2 class="Associations">Associations</h2></div news>
</div content>
</div>
</div><! wrapper ->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Sort by date Sort by votes
ok, if I adjust the width of my .menu.spry from 655 to 670 px this fixes it but then my menu is not completely aligned to the right would this need to be adjusted in the spry menu itself?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
477
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
137
lmcate
lmcate
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
103
pendle666
pendle666
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
94
jason.lex
jason.lex
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
371
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top