Bradley Cousins Bradley Cousins - 5 months ago 12
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

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

Comments