I tried to add an image (137×30) next to the search bar, but I cannot do it properly. It is supposed to look like this:
The code for search bar is like this:
<?php get_search_form(); ?>
Adding the image gave me this result:
How do I make this image align properly?
The code for this webpage as reference if you need to look at it:
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?> class="no-js">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '-', true, 'right' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css">
<![endif]-->
<script type="text/javascript">
!function(){function t(){var t=r("utm_content");if(t){var e=new Date;e.setDate(e.getDate()+30),document.cookie=t+";expires="+e.toGMTString()+";path=/"}else if(document.cookie)for(var o=document.cookie.split(/; */),n=0;n<o.length;n++)if(0===o[n].toLowerCase().trim().indexOf("utm_content=")){t=o[n];break}return t}function e(t){try{console.log(t)}catch(e){alert(t)}}function r(t){var e=top.location.search?top.location.search.substring(1):null;if(e)for(var r=e.split("&"),o=0;o<r.length;o++)if(0===r[o].toLowerCase().trim().indexOf(t+"="))return r[o];return null}var o="",n=r("mctest");if(n)e("dnr tag version: 20160125"),o="http://localhost:8080/rip/library/dnr/mcDnrTag.debug.js";else{var a=t(),c="";a&&(c=top.location.search?0<=top.location.search.indexOf("utm_content")?top.location.search:top.location.search+"&"+a:"?"+a,o="https://script.advertiserreports.com/redirector/dnr"+c)}if(o){var i=document.createElement("script");i.src=o,i.type="text/javascript",scriptTag=document.getElementsByTagName("script")[0],scriptTag.parentNode.appendChild(i)}}();
</script>
<?php
wp_head();
if(function_exists('ot_get_option'))
echo ot_get_option( 'cnkt_google_analytics' );
?>
</head>
<body <?php body_class(); ?>>
<?php
$cats = '';
foreach(get_the_category() as $category)
$cats .= $category->slug . ' ';
?>
<div id="container" class="<?php echo $post->post_name; echo ' '. $cats; ?>">
Skip to main content
<div id="wrapper">
<header class="site-header" role="banner">
<div class="row">
<div class="large-12 columns">
<ul class="secondary hide-for-medium-down">
<li class="mailinglist">Join our Mailing List</li>
<li class="quote">Request a Quote</li>
</ul>
<div class="nav-wrap">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" />
</div>
<div class="sub-wrap hide-for-medium-down">
<nav id="utilitynav" role="navigation">
<ul id="menu-utility" class="menu">
<li id="menu-item-2398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2398 menu-item-news">
News & Events
</li>
<li id="menu-item-2397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2397 menu-item-contact-us">
Contact Us
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/company/shaver-industries-inc<?php echo '-' ?>" target="_blank">
<em class="fa fa-linkedin-square"></em>
<span class="offscreen">LinkedIn</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/shaver_inc" target="_blank">
<em class="fa fa-twitter"></em>
<span class="offscreen">Twitter</span>
</a>
</li>
<li class="facebook">
<a href="https://www.facebook.com/ShaverIndustriesInc?fref=ts" target="_blank">
<em class="fa fa-facebook"></em>
<span class="offscreen">Facebook</span>
</a>
</li>
<li class="youtube">
<a href="https://www.youtube.com/channel/UC6zDe4BG-OAuV4_JLrmu-JA" target="_blank">
<em class="fa fa-youtube"></em>
<span class="offscreen">YouTube</span>
</a>
</li>
</ul>
<?php /*if ( has_nav_menu('utility-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'utility-menu', 'container'=>'' ) );
dynamic_sidebar('social-media'); ?>
<?php endif;*/ ?>
<?php
if ( function_exists( 'ot_get_option' ) ) {
if (ot_get_option('cnkt_phone')) {
echo '<span class="number">'.ot_get_option('cnkt_phone').'</span>';
}
}
?>
</nav>
<?php get_search_form(); ?>
</div>
</div>
<nav id="mnav" class="hide-for-medium-down" role="navigation">
<?php if ( has_nav_menu('primary-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container'=>'' ) ); ?>
<?php endif; ?>
</nav>
</div>
</div>
<div id="mnav-toggle" class="nav-toggle hide-for-medium-up" aria-hidden="true">
<a href="javascript:void(0);">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</a>
</div>
</header>
<div id="mobile-nav"><div class="wrap"></div></div>
<?php if(!is_page('home')){
get_template_part('includes/page-banner');
} ?>
<!-- #page-content -->
<div id="page-content">
Add an ID outside of your input and img and add below css. Demo example added like this. See at fiddle http://jsfiddle.net/wD5T9/
HTML
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
CSS
#searchWrapper img {
vertical-align: middle;
}
Here is the solution of your problem....
Your Html
<div class="searchform">
<form method="get" action="http://www.shaverinc.com">
<label for="search" class="offscreen">Search Products</label>
<input type="search" placeholder="Search Products" id="s" name="s" value="">
<button type="submit"><i class="fa fa-search"></i><span class="offscreen">Submit</span></button>
</form>
</div>
<div class="flags">Hello</div>
Your CSS Here.....
.searchform {
position: relative;
overflow: hidden;
height: 34px;
width: 90%;
display: inline-block;
float: left;
}
.flags{
display: block;
width: 9%;
height: 34px;
position: relative;
float: left;
background: #ccc;
}
Manipulate the width according to your need...
I figure it out by myself, I should use div+table to figure this out
<div style="position: relative; width: 600px;">
<table style="width: 100%">
<tr>
<td width="80%"><?php get_search_form(); ?></td>
<td width="20%"><img src="<?php echo get_template_directory_uri(); ?>/img/flags.png"></td>
</tr>
</table>
</div>
Related
i'm having trouble with my code, i want it to send a user their username via email when they have forgotten it.
What it does:
Retrieves user information from database
Send HTML Email to User's email
What it doesn't do:
Display the user's login username when sent to the email.
The PHP code is below for the page "forgot-username.php"
<?php
require_once('../../Connections/localhost.php');
require('../../PHPMailer/PHPMailerAutoload.php');
if(isset($_POST) & !empty($_POST)){
$username = mysql_real_escape_string($_POST['username'], $localhost);
$sql = "SELECT * FROM database.users WHERE users.email = '$email'";
$res = mysql_query($sql, $localhost) or die(mysql_error());
$count = mysql_num_rows($res);
if($count == 1){
$r = mysql_fetch_assoc($res);
$username = $r['username'];
$to = $r['email'];
$subject = "Your Recovered Username";
$message = file_get_contents("email_template.html");
$headers = 'From: Your name <info#address.com>';
if(mail($to,$subject,$message,$headers)){
header('Location: username-sent.html');
}else{
echo "Failed to Recover your email, try again";
}
}else{
echo "email does not exist in database";
}
}
?>
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<!-- ====== Basic Page Needs ====== -->
<meta charset="utf-8">
<title>Forgot Username</title>
<!-- ====== Mobile Specs Meta ====== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- ====== CSS ====== -->
<link rel="stylesheet" href="../../css/base.css">
<link rel="stylesheet" href="../../css/vendor.css">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/zerogrid.css">
<!-- ====== Java Scripts ====== -->
<script src="../../js/modernizr.js"></script>
<script src="../../js/pace.min.js"></script>
<!-- ====== Favicon ====== -->
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
<link rel="icon" href="../../favicon.ico" type="image/x-icon">
</head>
<body id="top">
<!-- ====== Header Begin ====== -->
<header>
<div class="header-logo">
Logo
</div>
<a id="header-menu-trigger" href="#0">
<span class="header-menu-text" style="color: white">Menu</span>
<span class="header-menu-icon"></span>
</a>
<nav id="menu-nav-wrap">
<span>Close</span>
<img alt="KBG" src="../../images/logo.png" style="height: 100px;width: 100px;" />
<ul class="nav-list">
<li class="current"><a class="" href="../../index.html">Home</a></li>
<li><a class="" href="../../about.html" title="">About</a></li>
<li>
<a class="" >Services</a>
<div>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
<li>Service 4</li>
</ul>
</div>
</li>
<li><a class="" href="../../Service5.html" >Service 5</a></li>
<li><a class="" href="../../competition.html" >Competition</a></li>
<li><a class="" href="../../login.php" >Sign In</a></li>
<li><a class="" href="../../signup.html" >Sign Up</a></li>
<li>Contact Us</li>
</ul>
</nav> <!-- end #menu-nav-wrap -->
</header>
<section id="services">
<div class="overlay"></div>
<div class="zerogrid">
<div class="row">
<!--Start Box-->
<div class="col-1-3 offset-1-3">
<div class="wrap-col">
<div class="row">
<div class="animate-this">
<h1 style="color: white">Forgot username?</h1>
<p class="lead" style="color: white">Fill in your email below and we will send you your username.</p>
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<form method="post">
<div class="form-field">
<input name="email" style="color: white" class="full-width" type="text" id="email" placeholder="Email" value="" minlength="5" required>
</div>
<div class="form-field">
<input type="submit" class="submitform full-width" style="background-color: white; color: black" value="Send" name="forgotusername">
</div>
Go Back
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-bottom">
<div class="row">
<div class="col-full">
<div class="copyright">
<span>© Copyright Company 2017.</span>
</div>
</div>
</div>
</div>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#top">
<i class="fa fa-long-arrow-up" aria-hidden="true"></i>
</a>
</div>
</footer>
<div id="preloader">
<div id="loader"></div>
</div>
<!-- ====== Java Scripts ====== -->
<script src="../../js/jquery-2.1.3.min.js"></script>
<script src="../../js/plugins.js"></script>
<script src="../../js/main.js"></script>
<script src="../../js/cookiechoices.js"></script>
<script>
cookieChoices.showCookieBar({
linkHref: '../../cookie-policy.html',
language: 'en'
});
</script>
</body>
</html>
this is the code that is sent to the users email "email_template.html"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="https://www.website.com/favicon.png" type="image/x-icon">
<link rel="icon" href="https://www.website.com/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://www.website.com/css/base.css">
<link rel="stylesheet" href="https://www.website.com/css/vendor.css">
<link rel="stylesheet" href="https://www.website.com/css/main.css">
<link rel="stylesheet" href="https://www.website.com/css/zerogrid.css">
</head>
<body style="max-width: 100%">
<section style="background-color: black; text-align: center; height: 20%; min-height: 5%"><img src="https://www.website.com/images/logo.png" alt="logo" style="max-height: 150px; max-width: 150px; margin-top: 1%" /></section>
<section id="services">
<div class="overlay"></div>
<div class="zerogrid">
<div class="row">
<!--Start Box-->
<div class="col-1-3 offset-1-3">
<div class="wrap-col">
<div class="row">
<div class="animate-this">
<h1 style="color: white">Forgot Your Username?</h1>
<p class="lead" style="color: white">Not a problem, we've searched our database for your username.</p>
<p class="lead" style="color: white">Your username is:</p>
<div class="form-field">
<input type="button" class="full-width" style="background-color: white; color: black" value="$username">
</div>
<br />
<br />
<p class="lead" style="color: white">Regards,<br />Support Team</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Everything does as it should but the username doesn't show up, instead "$username" shows up in the email.
Someone please help. Thanks in advance.
First of all, email_template.html is an .html file, you need to change it to .php file.
Second, you are getting the file contents to variable how would you expect $username variable to be in same scope ?
Probable solution would be :
Get the file content and then replace the $username in your .html file content with $username value.
$message = file_get_contents("email_template.html");
$message = str_replace('$username', $username, $message);
file_get_contents() function does not parse the contents. SO you have to add this line after you get contents into $message :
$message = str_replace('$username', $username, $message);
And I suggest that you replace $username in your html by something like %USERNAME% and you use it like that :
$message = str_replace('%USERNAME%', $username, $message);
You can't use PHP code inside a HTML document. Any PHP code in HTML document will parse as a string.
Change file extension for 'email_template.html' to. Php:
email_template.php
Note that now you will have to use PHP echo to print any HTML. I suggest to read how php works: http://www.php.net
The div id = "retrieve" is the div where I am retrieving my data from a database. But then the footer below appears in the div id ="retrieve".
Where am I going wrong?
Retrieval happens properly but it displays footer inside it too.
<!DOCTYPE html>
<html>
<head>
<title>Shreegurudev Datta | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin-ext" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Advent+Pro" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<style>
body{
background:url("bg.jpg");
background-size: cover;
font-family: 'Dosis', sans-serif;
}
slider{
width:100%;
height:auto;
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom:-100px;
opacity:0
}
to {
bottom:0px;
opacity:1
}
}
#keyframes animatebottom {
from{
bottom:-100px;
opacity:0
}
to{
bottom:0;
opacity:1
}
}
</style>
</head>
<body>
<!-- Corousel-->
<div class = "navbar">
<nav class="orange">
<div class="nav-wrapper">
<image src = "dattaguru.jpg" style = "padding-top : 10px; padding-left:10px;"/>
<i class="material-icons" style = "color:indigo;">menu</i>
<ul class="right hide-on-med-and-down" >
<li class = "active"><i class="material-icons left">home</i>Home</li>
<li><i class="material-icons left">stars</i>History</li>
<li><i class="material-icons left">equalizer</i>Festivals</li>
<li><i class="material-icons left">widgets</i>Sevas</li>
<li><i class="material-icons left">wallpaper</i>Gallery</li>
<li><i class="material-icons left">today</i>Projects</li>
<li><i class="material-icons left">contacts</i>Contact</li>
<li><i class="material-icons left">payment</i>Donations</li>
</ul>
<ul class="side-nav" id="mobile-demo" style = "color:white;">
<img src="logo.png">
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div style="" id="main" class="animate-bottom">
<div class = "header">
<h3 style="text-align:center; color: #b91100; font-weight: bolder">|| श्रीगुरूदेव दत्त ||</h3>
<marquee scrollamount="7" behavior="infinite" hspace="70"><h5 style="text-align:center; color: #b91100; font-weight: bold">|| दिगंबरा दिगंबरा श्रीपाद वल्लभ दिगंबरा ||</h5></marquee>
</div>
<div class = "cover">
<img src="banner.jpg" style="padding-left:250px; width:1100px; height:420px;">
</div>
<div class="row">
<h2 style="text-align:justify; padding-left:60px; color:green;">Shree Gurudev Datta</h2>
<hr width="90%">
<h5 style="text-align:justify; padding-left:60px; color:green;">|| Digambara Digambara Shreepad Vallabh Digambara ||</h5>
<div class="col s9" style="text-align:justify; padding-left:50px;">
<p style="font-size:20px; color:maroon; padding-left:5px; padding-right:5px; border-radius:10px;"> Shree Saunsthan Dattawadi, Sankhali, The Holy Abode of Shree Dattaguru - the trinity of Lord Brahma, Lord Vishnu and Lord Mahesh - evokes deep devotion in the heart of every devotee residing not only in Goa but other parts of the world as well.
Situated in beautiful sylvan surroundings, the heavenly and serene ambience pervading within the precincts of the temple catapults visiting devotees to world full of divine bliss.
The precincs normally referred to as 'Dattawadi', is the pilgrimage centre visited by thousands of devotees and legend has it that their prayers are answered by the Almighty. It is also famous as a centre for miraculous cure for mental troubles. This beautiful structure was established way back in the year 1925 ('shakey' 1804 according to the Hindu almanac).
The Dattatray temple completed 125th anniversary of it's inception in April 2007 with great pomp and splendour. The centenary celebrations in 1982, too, had witnessed similar grandeur.</p></div>
<div id = "retrieve" class="col s3" style="text-align:justify; background-color:orange; width:250px; height:300px; margin-top:23px; border-radius:10px;">
<?php
$host="localhost";
$user="root";
$password="";
$db="db_name";
$con=mysqli_connect($host,$user,$password,$db);
$sql_query="select * from Notifications";
$result=mysqli_query($con,$sql_query);
//echo '<h1>News Flash</h1>';
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center>
";
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
echo '
<tr>
<td>'.$row['date'].'</td>
<td>'.$row['news'].'</td>
</tr>
';
}
?>
</div>
</div>
<!--this footer comes in the div id ="retrieve"-->
<div class="footer-copyright" style="padding-left:100px;">
<p style="text-align:center; background-color:#004d40; width:auto; height:50px; padding-top:15px;color:#ffffff;">In memory of late Sau Sunanda & late Avadhut Dattatraya Gaitonde</p>
</div>
<!--close loader-->
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>$(document).ready(function(){
$('.slider').slider({full_width: true});
});</script>
</body>
</html>
The problem seems to be the 'table' tag on line 126 since I can't find it's counterpart anwhere in the code:
[...]
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center> //<-- there is no </table> before </center>
";
[...]
I'm making a website in Wordpress and there's one bit where I need to use a dropdown menu to select different options. I don't know what I did wrong and honestly, I don't really know what I'm doing. The site in question is:
http://www.lukegartland.com/final/
As you can see, there is a dropdown menu that you can't actually click on. But when you hit the TAB key a few times and hit the spacebar, it opens up the menu. I'll link to my sourcecode for the page below.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <main>
* and the left sidebar conditional
*
* #since 1.0.0
*/
?><!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if IE]><script src="<?php echo BAVOTASAN_THEME_URL; ?>/library/js/html5.js"></script><![endif]-->
<?php wp_head(); ?>
</head>
<?php
$bavotasan_theme_options = bavotasan_theme_options();
$space_class = '';
?>
<body <?php body_class(); ?>>
<div id="page">
<header id="header">
<nav id="site-navigation" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<h3 class="sr-only"><?php _e( 'Main menu', 'arcade' ); ?></h3>
<a class="sr-only" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'arcade' ); ?>"><?php _e( 'Skip to content', 'arcade' ); ?></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<?php
$menu_class = ( is_rtl() ) ? ' navbar-right' : '';
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar-nav' . $menu_class, 'fallback_cb' => 'bavotasan_default_menu', 'depth' => 2 ) );
?>
</div>
</nav><!-- #site-navigation -->
<div class="title-card-wrapper">
<div class="title-card">
<div id="site-meta">
<p style="display: inline-block; color: #fff; background-color: #fff; width: 45%; height: 200px; border-radius: 5px; margin: 1em; box-shadow: 0px 4px 11px #000; font-size: font-family: 'Roboto Condensed'; font-size: 22px;
color: #464549;"> // Start of Box
</br></br></br></br>Please select your location:
<h1 style="margin-top: -42%;"><img src="http://lukegartland.com/mykids/wp-content/uploads/2014/11/LogoImagesmall.png"></h1>
// The following is the dropdown in question
<select id="foo">
<option value="#">-</option>
<option value="http://www.lukegartland.com/final/map">Maynooth</option>
<option value="http://www.lukegartland.com/final/map">Celbridge</option>
<option value="http://www.lukegartland.com/final/map">Leixlip</option>
<option value="http://www.lukegartland.com/final/map">Dublin</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
</p>
<h1 id="site-title">
<?php bloginfo( 'name' ); ?>
</h1>
<?php if ( $bavotasan_theme_options['header_icon'] ) { ?>
<i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i>
<?php } else {
$space_class = ' class="margin-top"';
} ?>
<div id="sitedescript"<?php echo $space_class; ?>>
<?php bloginfo( 'description' ); ?>
</div>
</div>
<?php
// Header image section
bavotasan_header_images();
?>
</div>
</div>
</header>
<main>
Yours h1 tag have huge padding-bottom and it is covering select-box remove that padding
h1#site-title {padding-bottom:13%;}
in style.css file
There is a h1 element without content but still covering the select box. This happens because the h1 has a negative margin and relative positioning and therefore gains a higher stacking order than the select.
Either remove the following positioning rules from the h1:
#site-title {
position: relative;
margin: -19%;
}
or give the select higher stacking level:
#foo {
position: relative;
z-index: 100;
}
About CSS Stacking
This question already has answers here:
Reference - What does this error mean in PHP?
(38 answers)
Closed 8 years ago.
I get the following error when I open the index page:
Parse error: syntax error, unexpected $end in C:\xampp\htdocs\... on
line 161
Here is the code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>
<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home / front page.
$site_description = get_bloginfo( 'description', 'display' );
if( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );
?>
</title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
if( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-57-precomposed.png">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php include 'storeclass.php'; ?>
<style>
.navbar .nav li a
{
padding-right: 0px !important;
}
</style>
<?php
if( function_exists( 'teboAnalytic' ) ){
teboAnalytic();
}
?>
</head>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<style>
.container
{
max-width: 300px;
}
</style>
<body style="background-color: #E7EBF2;padding-top:65px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php
}
else
{
?>
<body style="background-color: #E7EBF2;padding-top:45px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php
} ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width:940px;">
<ul class="nav">
<li class="hidden-phone">
<img src="<?php echo BASE_URL.'weblogo.png'; ?>" style="width:270px;">
</li>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<li class="dropdown" style="margin-left:15px;">
<?php
}
else
{
?>
<li class="dropdown offset2">
<?php
} ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding:0;">
<img src="<?php echo BASE_URL; ?>callus.png" style="height:46px;width:203px">
</a>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
callUsBanner('mobile');
}
else
{
callUsBanner('desktop');
}
?>
</li><!-- Regular Menu Ends -->
<li class="divider-vertical">
</li>
</ul>
</div>
</div>
</div>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<link rel="stylesheet" href="mobile-custom.css" />
<style>
.hhd
{
display: inline-block;
height: 5px;
width: 100%;
}
</style>
<?php
} ?>
<div class="container hhd" style="height:41px;">
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<img src="weblogo.png" style="width:270px;">
<div class="row">
<div class="styled-select blue semi-square divsel span12">
<?php menu1(); ?>
</div>
</div>
<?
} ?>
<div class="subnavbar navbar navbar hidden-phone">
<div class="navbar-inner subnav">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<ul class="nav" style="font-size:13px;">
<li class="hidden-phone">
<img src="badge.jpg" style="width:40px;">
</li>
<li class="hidden-phone">
<a href="" style="padding-right: 5px;">
<i class="icon-home">
</i>Home
</a>
</li>
<li class="hidden-phone">
<a href="">
<i class=" icon-th-large">
</i>Store
</a>
</li>
<li class="hidden-phone">
<a href="">
<i class=" icon-tag">
</i>Bursa
</a>
</li>
<li class="divider-vertical subnav">
</li>
<?php menuIjo('desktop','top'); ?>
</ul>
</div>
</div>
</div>
</div>
<script>
$('.renav').click(function(e)
{
//alert('ha');
$('section.dropdown-menu *').removeAttr('data-toggle');
});
</script>
<!-- End Header -->
<!-- Begin Template Content -->
could you help me to solve this problem?
thanks
replace
<? with <?php on line number 132 ( <? } ?> to <?php } ?>
the correct code will be
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );
?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-57-precomposed.png">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php include 'storeclass.php'; ?>
<style>
.navbar .nav li a{
padding-right: 0px !important;
}
</style>
<?php
if ( function_exists( 'teboAnalytic' ) ) {
teboAnalytic();
}
?>
</head>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<style>
.container{
max-width:300px;
}
</style>
<body style="background-color: #E7EBF2;padding-top:65px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php }else{?>
<body style="background-color: #E7EBF2;padding-top:45px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php } ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width:940px;">
<ul class="nav">
<li class="hidden-phone">
<img src="<?php echo BASE_URL.'weblogo.png'; ?>" style="width:270px;">
</li>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<li class="dropdown" style="margin-left:15px;">
<?php }else{ ?>
<li class="dropdown offset2">
<?php } ?>
<img src="<?php echo BASE_URL; ?>callus.png" style="height:46px;width:203px">
<?php if ($detect->isMobile() AND !$detect->isTablet()) {
callUsBanner('mobile');
}else{
callUsBanner('desktop');
}
?>
</li><!-- Regular Menu Ends -->
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<link rel="stylesheet" href="mobile-custom.css" />
<style>
.hhd{
display:inline-block;
height:5px;
width:100%;
}
</style>
<?php } ?>
<div class="container hhd" style="height:41px;">
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<img src="weblogo.png" style="width:270px;">
<div class="row">
<div class="styled-select blue semi-square divsel span12">
<?php menu1(); ?>
</div>
</div>
<?php } ?>
<div class="subnavbar navbar navbar hidden-phone">
<div class="navbar-inner subnav">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav" style="font-size:13px;">
<li class="hidden-phone"><img src="badge.jpg" style="width:40px;"></li>
<li class="hidden-phone"><i class="icon-home"></i>Home</li>
<li class="hidden-phone"><i class=" icon-th-large"></i>Store</li>
<li class="hidden-phone"><i class=" icon-tag"></i>Bursa</li>
<li class="divider-vertical subnav"></li>
<?php menuIjo('desktop','top'); ?>
</ul>
</div>
</div>
</div>
</div>
<script>
$('.renav').click(function(e){
//alert('ha');
$('section.dropdown-menu *').removeAttr('data-toggle');
});
</script>
<!-- End Header -->
<!-- Begin Template Content -->
I have been developing a new skin for mediawiki that follows the CSS and layout of the Brigham Young University webpage https://www.byu.edu
After working on it for a month, making many small changes, it was ready to show people. My coworker tried to view the page on Internet Explorer and immediately all of the horizontal lists that were auto populated in the page became vertical lists.
The site is at https://caedm.et.byu.edu/wiki
Here is the code for the skin, Since I was using the code provided from the university, I imagine that it has to be one of my changes that has caused the problem.
The site appears to function and render properly when browsed from an iPad, from and android cell phone, from Firefox (both in linux and windows) and from Chromium, but it fails stupendously in IE9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" class="no-js">
<head profile="http://gmpg.org/xfn/11">
<title><?php $this->html('title'); ?> – <?php echo($wgSitename); ?></title>
<meta property="og:title" value="<?php $this->html('title'); ?>">
<meta property="og:site_name" content="<?php echo($wgSitename); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="<?php echo($description); ?>"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<?php if ($this->data['content_actions']['edit']) { ?>
<link rel="alternate" type="application/x-wiki" title="Edit" href="<?php echo($this->data['content_actions']['edit']['href']); ?>" />
<?php } ?>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="<?php $this->text('scriptpath'); ?>/opensearch_desc.php" title="<?php echo($wgSitename); ?>" />
<link rel="copyright" href="<?php $this->text('scriptpath'); ?>/index.php/Copyright_Notice" />
<link rel="alternate" type="application/atom+xml" title="<?php echo($wgSitename); ?> Atom feed" href="<?php $this->text('scriptpath'); ?>/index.php?title=Special:RecentChanges&feed=atom" />
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/slider.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/calendar.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/news.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/socialmedia.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="byuskin/template/js/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/wiki/skins/byuskin/template/js/libs/modernizr-2.0-basic.min.js"></script>
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/style.css" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/shared.css" media="screen" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/commonPrint.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<?php print Skin::makeGlobalVariablesScript( $this->data ); ?>
<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"><!-- wikibits js --></script>
</head>
<body class="single single-post">
<header id="main-header">
<div id="header-top" class="wrapper">
<div id="logo">
<img src="/wiki/skins/byuskin/template/img/byu-logo.png" alt="BYU Logo" usemap="#byulogo" />
<map name="byulogo">
<area shape="rect" href="http://www.byu.edu" coords="0,1,63,16" />
<area shape="rect" href="http://beta.et.byu.net" coords="70,0,363,16" />
</map>
</div>
CAEDM
<div id="search-container">
<? if ( !isset( $_COOKIE['CMSUsername']) || $_COOKIE['CMSUsername']=="" || $_COOKIE['CMSPassword']=="" || !isset( $_COOKIE['CMSPassword'] )) {?>
CAEDM Login
<? } else { ?>
Logout
<script>
var IDLE_TIMEOUT = 60*60*4; //seconds->4 hours
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
alert("Time expired!");
document.location.href = "https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogout&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology";
}
}
</script>
<? } ?>
<!-- ENTER YOUR SEARCH URL under action -->
<form action="<?php $this->text('searchaction') ?>" id="searchform">
<input type="text" name="search" id="search" placeholder="Search CAEDM Help Pages" <?php if( isset( $this->data['search'] ) ) { ?>
value="<?php $this->text('search') ?>"
<?php } ?> />
<input type="image" src="/wiki/skins/byuskin/template/img/search-button.png" alt="Search" id="search-button" value="<?php $this->msg('searchbutton') ?>"/>
</form>
</div>
<nav id="secondary-nav" class="no-js">
<ul>
<li class="nochild">MyBYU</li>
<li class="nochild">Learning Suite</li>
<li class="nochild">Contact Us</li>
</ul>
</div>
</nav>
</div>
<nav id="primary-nav" class="no-js">
<ul>
<li>Accounts
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Accounts'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Accounts Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/thumb/f/fd/CAEDM_Intro.png/320px-CAEDM_Intro.png" width="320" height="228">
<p>CAEDM may be new to you, but there are many ways that you can learn how to maximize your experience with CAEDM.</p>
</div>
</div>
</li>
<li>Remote Computing
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Remote Computing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%;margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Remote Computing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/thumb/8/82/CAEDM_wYours.png/320px-CAEDM_wYours.png" width="320" height="228">
<p>CAEDM offers a wide variety of resources that can all be used no matter where you happen to be. From home, work, and even from your phone, your CAEDM needs can be fulfilled.</p>
</div>
</div>
</li>
<li> Files
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Files'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Files Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/Accessing_files.png" width="320" height="228">
<p>CAEDM provides file access anywhere on campus, and from home.</p>
</div>
</div>
</li>
<li> Printing
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Printing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Printing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/c/c2/Printer_menu.jpg">
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> Labs and Software
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Labs'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Labs Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/b/b6/Lab_and_software_menu.jpg">
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> Groups
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Groups'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Groups Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<?php echo htmlspecialchars( $val['text'] ) ?>
</li>
<?php } ?>
</ul>
<div class="highlight"><img src="/wiki/images/thumb/4/43/Groups.png/320px-Groups.png" height="228" width="320">
<p>CAEDM provides many group collaboration resources.</p>
</div>
</div>
</li>
I only included the beginning, as I don't want people to have to debug anything, but is there a common problem with how IE interprets unordered lists, that wouldn't be detected in any other browser?
What are the ways to fix this problem?
Update: section from CSS:
I think that this is the most helpful part, but there could be other things that need to be put in:
ul, ol { margin-left: 1.5em; display: inline;}
ol { list-style-type:decimal; margin-left:2em;}
ol ol { list-style-type: lower-alpha }
ol ol ol { list-style-type: lower-roman }
ol ol ol ol { list-style-type: decimal }
ol ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol ol { list-style-type: lower-roman }
ul { list-style-type: none; margin-left:2em;}
ul ul { list-style-type: none }
ul ul ul { list-style-type: none }
ul ul ul ul { list-style-type: none }
ul ul ul ul ul { list-style-type: none }
ul ul ul ul ul ul { list-style-type: none }
ul ul { margin-top:.25em; margin-bottom:.25em;}
nav ul, nav ul ul { list-style:none}
nav ul, nav li { margin:0;}
dt { font-weight: bold }
dd { padding: 0 0 .75em 1em }
You can define another css file with fixes. Include next code in your head-tags:
<!--[if lt IE 9]>
<link href=".." />
<![endif]-->
<!--[if lte IE 8]>
<link href=".." />
<![endif]-->
<!--[if lte IE 7]>
<link href=".." />
<![endif]-->
<!--[if lte IE 6]>
<link href=".." />
<![endif]-->
Where lt = lower than and lte = lower than or equal to. However this doesn't work for IE10 anymore. There you can use next code in your css:
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
In the end, The answer was a combination of everything that all of you have said. adding display: inline was important, but it caused a lot of problems for other things in other browsers. So I Am going to accept Gothematic's answer as the correct one, because in the end I will have to use it heavily to fix the rendering in IE, but also a lot of thanks to Space Beers for the Inline block.