Bradley Cousins Bradley Cousins - 1 year ago 49
CSS Question

Issues with cross browser compatibility (firefox)

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="css/template.css">
<link rel="stylesheet" type="text/css" href="css/admin.css">
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/dropdown.css">
<link rel="stylesheet" type="text/css" href="css/coupon.css">
<link rel="stylesheet" type="text/css" href="css/tile.css">
<link rel="stylesheet" type="text/css" href="css/storepage.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/coupons_wrapper.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">

<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>
</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

Answer Source

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 ...