0

I am having some issues with cross browser compatibility, mainly with my nav bar, I have checked through all of the CSS for the nav bar and cannot find anything which could be causing the nav mar become all messed up on Firefox, i am currently using Safari and it looks fine,

Here is the nav in Safari : enter image description here

Here is the nav in Firefox :

enter image description here

Here is my CSS: 

#header_wrapper {
 width:100%;
}
#pre_header {
 width:100%;
 height:30px;
 background-color:#202020;
 border-bottom:1px solid black;
}
#pre_header_content {
 margin:0 auto;
 max-width:1140px;
}
#main_header {
 width:100%;
 height:64px;
 background-color:#343434;
 transition: ease 500ms;
}
#main_header_content {
 margin:0 auto;
 max-width:1140px;
 min-width:1140px;
 position:relative;
}
#main_header_logo {
 height: 64px; 
 width:300px; 
 display:inline-block;
}
.logo {
 vertical-align: middle;
}
.helper {
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}
/* NAVIGATION LINKS */
#main_header_links_wrapper {
 display:inline-block;
 float:right;
}
#main_header_links ul {
 list-style-type: none;
 line-height:64px;
}
#main_header_links li {
 display: inline;
 font-family: 'Roboto', sans-serif; 
 font-size:18px;
 font-weight: 400;
 color:#fff;
 cursor:pointer;
}
.header_link_icon {
 padding-left:5px;
}
.header_link_padding {
 padding-left:25px;
}
#main_header_links a {
 text-decoration: none;
}
#main_header_links a:hover {
 text-decoration: underline;
 color:#fff;
}
#main_header_link_categories {
 font-family: 'Roboto', sans-serif; 
 font-size:18px;
 font-weight: 300;
 color:#fff;
 cursor:pointer;
 display: inline-block;
 min-height:64px;
}
.header_link_icon_rotate {
 padding-left:5px;
 transition: 100ms;
}
#main_header_link_categories:hover .header_link_icon_rotate {
 -ms-transform: rotate(90deg); /* IE 9 */
 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
 transform: rotate(90deg);
 margin-left:2px;
 transition: 100ms;
}
#slide {
 right:0;
 position:absolute;
 background-color:#fff;
 -webkit-box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
-moz-box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
display:none;
z-index: 999;
width:320px;
}
#touch {position: absolute; opacity: 0; height: 0px;} 
#touch:hover + #slide {
 display: block;
}
#slide:hover {
 display:block;
}
.slide_wrapper { 
/* margin:10px; */
z-index: 999;
}
.slide_wrapper ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
.slide_wrapper a {
 text-decoration: none;
}
#search_bar {
 display: inline-block;
}
#category_image {
 float:left;
 margin-left:5px;
}
#nav_categories tr {
 width:100%;
}
#nav_category_image {
 width:40px;
 max-width:40px;
 min-width:40px;
}
#nav_category_link {
 width:270px;
}
#nav_categories {
 font-family: 'Roboto', sans-serif; 
 font-size:14px;
 font-weight: 300;
 color:#000000;
 cursor:pointer;
 line-height: 25px;
 background-color:#fff;
 padding:4px 15px 4px 15px;
}
#nav_categories:hover { 
 background-color:#004d6e;
 color:#fff;
 font-size:15px;
}
#nav_categories img {
 max-width: 20px;
 max-height: 20px;
}
#nav_categories:hover img {
 -webkit-filter: invert(100%) !important;
 filter: invert(100%) !important;
 display: inline;
}
#category_arrow {
 float:right;
 display:none;
 margin-top:7px;
 margin-bottom:7px;
}
/* SEARCH */
#search_bar {
 margin-left:40px;
}
#search_bar input {
 width:320px;
 height:26px;
 border-radius: 3px;
 border: none;
 padding-left:10px;
 border:1px solid black;
}
#search_bar button {
 width:70px;
 height:26px;
 border-radius: 3px;
 margin-left:5px;
 border: none;
 padding: 0px;
 border:1px solid #ccc;
 background-color:#343434;
 color:#fff;
 font-family: 'Roboto', sans-serif; 
 font-size:12px;
 font-weight: 400;
}
#search_bar button:hover {
 background-color:#202020;
 cursor:pointer;
}
/* PRE HEADER */
#pre_header_content_left {
 float:left;
}
#pre_header_content_left ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 line-height:30px;
}
#pre_header_content_left li {
 display: inline;
 border-right: 1px solid #292929;
 border-left: 1px solid #292929;
 padding:6px 15px 5px 15px;
 margin-right:-2px;
 font-size:14px;
}
#pre_header_content_left a {
 text-decoration:none;
 color:#fff;
}
#pre_header_content_left li:hover {
 background-color:#4e4e4e;
}
#pre_header_content_right {
 float:right;
}
#pre_header_content_right ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 line-height:30px;
}
#pre_header_content_right li {
 display: inline;
 border-right: 1px solid #292929;
 border-left: 1px solid #292929;
 padding:6px 15px 5px 15px;
 margin-right:-2px;
 font-size:14px;
}
#pre_header_content_right a {
 text-decoration:none;
 color:#fff;
}
/*TEST */
#pre_header_content_right li:hover {
 background-color:#4e4e4e;
}
.navigation_icons {
 margin-right:5px;
}

HTML : 

<div id="header_wrapper">
 <div id="pre_header">
 <div id="pre_header_content">
 <div id="pre_header_content_left">
 <ul>
 <a href="#.php"><li><img class="navigation_icons" src="images/navigation/bookmark.png" width="12"></img>Stores</li></a>
 <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/plus.png" width="12"></img>Submit a code</li></a>
 <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Advertise</li></a>
 <a href="#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Contact Us</li></a>
 </ul> 
 </div>
 <div id="pre_header_content_right">
 <ul>
 <?php 
 if(!isset($_SESSION)) 
 { 
 session_start(); 
 } 
 if(isset($_SESSION['username'])) {
 echo '
 <a href="memberpage.php"><li><img class="navigation_icons" src="images/navigation/account.png" width="12"></img>' . ucfirst($_SESSION['username']) . '</li></a>';
 $loggedinname = $_SESSION['username'];
 $check = mysqli_query($user_conn, "SELECT priv FROM members WHERE username = '$loggedinname'");
 while ($row= $check->fetch_assoc()) {
 if ($row['priv'] == 1) {
 $admin = TRUE; 
 }
 else {
 $admin = FALSE;
 }
 }
 if($admin == TRUE) {
 echo '
 <a href="admin.php"><li><img class="navigation_icons" src="images/navigation/edit.png" width="12"></img>Admin</li></a> ';
 } 
 echo '
 <a href="logout.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Logout</li></a> ';
 }
 else {
 echo '
 <a href="login.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
 <a href="register.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li></a>
 ';
 }
 ?>
 </ul>
 </div>
 </div>
 </div>
 <div id="main_header">
 <div id="main_header_content">
 <div id="main_header_logo">
 <a href="index.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>
 </div>
 <form action="search_results.php" method="POST" id="search_bar">
 <input type="text" class="search_term" name="search" placeholder="Search for a store..." maxlength="20" autocomplete="off">
 <button type="submit" class="search_button" value="search">Search</button>
 </form>
 <div id="main_header_links_wrapper">
 <div id="main_header_links">
 <ul>
 <label for="touch"><div id="main_header_link_categories"><a href="user_all_categories.php"><li class="main_header_link_categories">Categories</li><img class="header_link_icon_rotate" src="images/navigation/arrow_right.png" height="12"></img></a></div></label>
 <a href="/pages/newest.php"><li class="header_link_padding">Newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
 <a href="/pages/stores.php"><li class="header_link_padding">Stores</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
 </ul>
 </div>
 </div>
 <input type="checkbox" id="touch"> 
 <div id="slide">
 <div class="slide_wrapper">
 <ul id="categories">
 <?php 
 $result=mysqli_query($conn, "SELECT count(*) as total from categories");
 $data=mysqli_fetch_assoc($result);
 if ($data['total'] == 0) {
 echo "No categories added.";
 } else {
 $res = $conn->query("SELECT category FROM categories ORDER BY category ASC");
 while($row=$res->fetch_array())
 {
 echo 
 '<a href="category_page.php?category=' . $row['category'] . '">' .
 '<table id="nav_categories">' .
 '<tr>' .
 '<li>' .
 '<td id="nav_category_image">' . '<img src="images/categories/' . $row['category'] . '.png">' . '</td>' . 
 '<td id="nav_category_link">' . ucfirst($row['category']) . '<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10">' . '</td>' .
 '</li>' .
 '</tr>' . 
 '</table>' . 
 '</a>';
 }
 }
 ?>
 </ul>
 </div>
 </div>
 </div>
 </div>
</div>

Complete Page Source from Firefox : 

<html>
 <head>
 <title>Home Page</title>
 <link rel="stylesheet" type="text/css" href="http://www.d">D</a>DEAL</div></div></div><br>
</div><div id="coupon">
<div id="coupon_wrapper"><div id="coupon_left"><div id="coupon_image"><img src="images/stores/british gas .png"></div><div id="coupon_expire_wrapper"><div id="coupon_expire_tag">Expires: </div><div id="coupon_expire_date">22 / Jun / 16</div></div></div><div id="coupon_right"><div id="design_coupon_title"><a href="http://www.sgsg" target="_blank">Best</a></div><div id="coupon_instruction">Copy this code and enter at the checkout</div><div id="coupon_code_wrapper"><div id="coupon_promo_code">SJHBJH</div><a href="http://www.sgsg" target="_blank"><div id="coupon_button">Go to<img src="images/navigation/arrow_right_bl.png" width="13" height="13"></div></a></div></div></div><br>
</div><br>
<h1>All Categories</h1>
<br> 
<a href="category_page.php?category=hi">hi</a><br><a href="category_page.php?category=high">high</a><br><a href="category_page.php?category=non">non</a><br><a href="category_page.php?category=test">test</a><br><a href="category_page.php?category=travel">travel</a><br><a href="category_page.php?category=World">World</a><br>
<a href="admin.php">Admin</a>
<h1>Store Links</h1>
 </div>
<div id="footer"></div>
 </body>
</html>

If anyone minds please giving me some suggestions or can have a quick browse through the CSS, it will be much appreciated. Thanks again

asked Jun 17, 2016 at 18:32
12
  • It helps to know the HTML structure as well. Also, why are you using ID's? maintainablecss.com Commented Jun 17, 2016 at 18:34
  • I have looked into this, and honestly just like writing the site from scratch rather using pluggins, ill add the html now Commented Jun 17, 2016 at 18:35
  • Will u able to provide url? Commented Jun 17, 2016 at 18:42
  • The site is not online yet, Commented Jun 17, 2016 at 18:42
  • If you provide the actual source code from view source we can see the complete output without the PHP. Commented Jun 17, 2016 at 18:54

1 Answer 1

3

Your text links are wrapping, coming in the way where the logo is suppose to be.

Vertical-align should be set to the wrapper of the logo to be interacting with content/ line-height around.

a {white-space:nowrap} for a first cure untill you find out why font are not displayed the same. a padding reset on ul maybe as well: http://codepen.io/gc-nomade/pen/YWGPvz 

#header_wrapper {
 width: 100%;
}
/*added */
#header_wrapper a {
 white-space: nowrap;
}
/* end added */
#pre_header {
 width: 100%;
 height: 30px;
 background-color: #202020;
 border-bottom: 1px solid black;
}
#pre_header_content {
 margin: 0 auto;
 max-width: 1140px;
}
#main_header {
 width: 100%;
 height: 64px;
 background-color: #343434;
 transition: ease 500ms;
}
#main_header_content {
 margin: 0 auto;
 max-width: 1140px;
 min-width: 1140px;
 position: relative;
}
#main_header_logo {
 height: 64px;
 width: 300px;
 display: inline-block;
 
/*added */
 overflow: hidden;
 vertical-align: middle;
 
/* end added */
}
.logo {}
.helper {
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}
/* NAVIGATION LINKS */
#main_header_links_wrapper {
 display: inline-block;
 float: right;
}
#main_header_links ul {
 list-style-type: none;
/*added */
 padding: 0; 
/* end added */
 line-height: 64px;
}
#main_header_links li {
 display: inline;
 font-family: 'Roboto', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #fff;
 cursor: pointer;
}
.header_link_icon {
 padding-left: 5px;
}
.header_link_padding {
 padding-left: 25px;
}
#main_header_links a {
 text-decoration: none;
}
#main_header_links a:hover {
 text-decoration: underline;
 color: #fff;
}
#main_header_link_categories {
 font-family: 'Roboto', sans-serif;
 font-size: 18px;
 font-weight: 300;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 min-height: 64px;
}
.header_link_icon_rotate {
 padding-left: 5px;
 transition: 100ms;
}
#main_header_link_categories:hover .header_link_icon_rotate {
 -ms-transform: rotate(90deg);
 /* IE 9 */
 -webkit-transform: rotate(90deg);
 /* Chrome, Safari, Opera */
 transform: rotate(90deg);
 margin-left: 2px;
 transition: 100ms;
}
#slide {
 right: 0;
 position: absolute;
 background-color: #fff;
 -webkit-box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
 -moz-box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
 box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
 display: none;
 z-index: 999;
 width: 320px;
}
#touch {
 position: absolute;
 opacity: 0;
 height: 0px;
}
#touch:hover + #slide {
 display: block;
}
#slide:hover {
 display: block;
}
.slide_wrapper {
 /* margin:10px; */
 z-index: 999;
}
.slide_wrapper ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
.slide_wrapper a {
 text-decoration: none;
}
#search_bar {
 display: inline-block;
}
#category_image {
 float: left;
 margin-left: 5px;
}
#nav_categories tr {
 width: 100%;
}
#nav_category_image {
 width: 40px;
 max-width: 40px;
 min-width: 40px;
}
#nav_category_link {
 width: 270px;
}
#nav_categories {
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 font-weight: 300;
 color: #000000;
 cursor: pointer;
 line-height: 25px;
 background-color: #fff;
 padding: 4px 15px 4px 15px;
}
#nav_categories:hover {
 background-color: #004d6e;
 color: #fff;
 font-size: 15px;
}
#nav_categories img {
 max-width: 20px;
 max-height: 20px;
}
#nav_categories:hover img {
 -webkit-filter: invert(100%) !important;
 filter: invert(100%) !important;
 display: inline;
}
#category_arrow {
 float: right;
 display: none;
 margin-top: 7px;
 margin-bottom: 7px;
}
/* SEARCH */
#search_bar {
 margin-left: 40px;
}
#search_bar input {
 width: 320px;
 height: 26px;
 border-radius: 3px;
 border: none;
 padding-left: 10px;
 border: 1px solid black;
}
#search_bar button {
 width: 70px;
 height: 26px;
 border-radius: 3px;
 margin-left: 5px;
 border: none;
 padding: 0px;
 border: 1px solid #ccc;
 background-color: #343434;
 color: #fff;
 font-family: 'Roboto', sans-serif;
 font-size: 12px;
 font-weight: 400;
}
#search_bar button:hover {
 background-color: #202020;
 cursor: pointer;
}
/* PRE HEADER */
#pre_header_content_left {
 float: left;
}
#pre_header_content_left ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 line-height: 30px;
}
#pre_header_content_left li {
 display: inline;
 border-right: 1px solid #292929;
 border-left: 1px solid #292929;
 padding: 6px 15px 5px 15px;
 margin-right: -2px;
 font-size: 14px;
}
#pre_header_content_left a {
 text-decoration: none;
 color: #fff;
}
#pre_header_content_left li:hover {
 background-color: #4e4e4e;
}
#pre_header_content_right {
 float: right;
}
#pre_header_content_right ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 line-height: 30px;
}
#pre_header_content_right li {
 display: inline;
 border-right: 1px solid #292929;
 border-left: 1px solid #292929;
 padding: 6px 15px 5px 15px;
 margin-right: -2px;
 font-size: 14px;
}
#pre_header_content_right a {
 text-decoration: none;
 color: #fff;
}
/*TEST */
#pre_header_content_right li:hover {
 background-color: #4e4e4e;
}
.navigation_icons {
 margin-right: 5px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/footer.js"></script>
</head>
<body onload="document.body.className += ' loaded';">
 <div id="header_wrapper">
 <div id="pre_header">
 <div id="pre_header_content">
 <div id="pre_header_content_left">
 <ul>
 <a href="#.php">
 <li><img class="navigation_icons" src="images/navigation/bookmark.png" width="12"></img>Stores</li>
 </a>
 <a id="hide" href="#.php">
 <li><img class="navigation_icons" src="images/navigation/plus.png" width="12"></img>Submit a code</li>
 </a>
 <a id="hide" href="#.php">
 <li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Advertise</li>
 </a>
 <a href="#.php">
 <li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Contact Us</li>
 </a>
 </ul>
 </div>
 <div id="pre_header_content_right">
 <ul>
 <a href="login.php">
 <li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li>
 </a>
 <a href="register.php">
 <li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li>
 </a>
 </ul>
 </div>
 </div>
 </div>
 <div id="main_header">
 <div id="main_header_content">
 <div id="main_header_logo">
 <a href="index.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>
 </div>
 <form action="search_results.php" method="POST" id="search_bar">
 <input type="text" class="search_term" name="search" placeholder="Search for a store..." maxlength="20" autocomplete="off">
 <button type="submit" class="search_button" value="search">Search</button>
 </form>
 <div id="main_header_links_wrapper">
 <div id="main_header_links">
 <ul>
 <label for="touch"><div id="main_header_link_categories"><a href="user_all_categories.php"><li class="main_header_link_categories">Categories</li><img class="header_link_icon_rotate" src="images/navigation/arrow_right.png" height="12"></img></a></div></label>
 <a href="/pages/newest.php">
 <li class="header_link_padding">Newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img>
 </a>
 <a href="/pages/stores.php">
 <li class="header_link_padding">Stores</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img>
 </a>
 </ul>
 </div>
 </div>
 <input type="checkbox" id="touch">
 <div id="slide">
 <div class="slide_wrapper">
 <ul id="categories">
 <a href="category_page.php?category=hi">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/hi.png"></td>
 <td id="nav_category_link">Hi<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 <a href="category_page.php?category=high">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/high.png"></td>
 <td id="nav_category_link">High<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 <a href="category_page.php?category=non">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/non.png"></td>
 <td id="nav_category_link">Non<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 <a href="category_page.php?category=test">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/test.png"></td>
 <td id="nav_category_link">Test<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 <a href="category_page.php?category=travel">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/travel.png"></td>
 <td id="nav_category_link">Travel<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 <a href="category_page.php?category=World">
 <table id="nav_categories">
 <tr>
 <li>
 <td id="nav_category_image"><img src="images/categories/World.png"></td>
 <td id="nav_category_link">World<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
 </li>
 </tr>
 </table>
 </a>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div id="wrapper">
 <div id="tile_wrapper">
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=Th asx sdaidj jsdiasdjo jsd">
 <div id="tile_inner_wrapper"><img src="images/stores/Th asx sdaidj jsdiasdjo jsd.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=rolex">
 <div id="tile_inner_wrapper"><img src="images/stores/rolex.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=zzzzzzzzzzzzzzzz">
 <div id="tile_inner_wrapper"><img src="images/stores/zzzzzzzzzzzzzzzz.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=hi">
 <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=E">
 <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=e">
 <div id="tile_inner_wrapper"><img src="images/stores/e.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=hi">
 <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=X">
 <div id="tile_inner_wrapper"><img src="images/stores/X.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=W">
 <div id="tile_inner_wrapper"><img src="images/stores/W.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=bt">
 <div id="tile_inner_wrapper"><img src="images/stores/bt.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=bitcoin">
 <div id="tile_inner_wrapper"><img src="images/stores/bitcoin.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=E">
 <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=d">
 <div id="tile_inner_wrapper"><img src="images/stores/d.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=roman">
 <div id="tile_inner_wrapper"><img src="images/stores/roman.png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=british gas ">
 <div id="tile_inner_wrapper"><img src="images/stores/british gas .png"></div>
 </a>
 </div>
 <div id="tile_image_wrapper">
 <a href="storepage.php?name=J">
 <div id="tile_inner_wrapper"><img src="images/stores/J.png"></div>
 </a>
 </div>
 <span class="stretch"></span>
 </div>
 <br>
 <h1>Random Coupons</h1>
 <div id="coupon">
 <div id="coupon_wrapper">
 <div id="coupon_left">
 <div id="coupon_image"><img src="images/stores/bt.png"></div>
 <div id="coupon_expire_wrapper">n/a</div>
 </div>
 <div id="coupon_right">
 <div id="design_coupon_title"><a href="http://www.d">D</a>DEAL</div>
 </div>
 </div><br>
 </div>
 <div id="coupon">
 <div id="coupon_wrapper">
 <div id="coupon_left">
 <div id="coupon_image"><img src="images/stores/british gas .png"></div>
 <div id="coupon_expire_wrapper">
 <div id="coupon_expire_tag">Expires: </div>
 <div id="coupon_expire_date">22 / Jun / 16</div>
 </div>
 </div>
 <div id="coupon_right">
 <div id="design_coupon_title"><a href="http://www.sgsg" target="_blank">Best</a></div>
 <div id="coupon_instruction">Copy this code and enter at the checkout</div>
 <div id="coupon_code_wrapper">
 <div id="coupon_promo_code">SJHBJH</div>
 <a href="http://www.sgsg" target="_blank">
 <div id="coupon_button">Go to<img src="images/navigation/arrow_right_bl.png" width="13" height="13"></div>
 </a>
 </div>
 </div>
 </div><br>
 </div><br>
 <h1>All Categories</h1>
 <br>
 <a href="category_page.php?category=hi">hi</a><br><a href="category_page.php?category=high">high</a><br><a href="category_page.php?category=non">non</a><br><a href="category_page.php?category=test">test</a><br><a href="category_page.php?category=travel">travel</a><br>
 <a
 href="category_page.php?category=World">World</a><br>
 <a href="admin.php">Admin</a>
 <h1>Store Links</h1>
 </div>
 <div id="footer"></div>

also, take a look at 

#main_header_links_wrapper {
 float: right;
 line-height:64px;
}

and get rid of the lonesome ul that's seems forgotten in there ...

answered Jun 17, 2016 at 19:18
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.