Member Avatar for Member #949455

Hi

I have a issue with lining up with my logo. IE & Firefox can't line up straight horizontal with the logo.

I also have a random image background php code on the index page, but I can't seem to figure whether the random image script is the reason that it can't line up. I try not put it in there and it still looks the same.

Here is my index.php

<?php
session_start();
header("Cache-control: private");
include("../include/init.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="leftcolumn"></div>
<div id="contentcolumn">
<? include("header.php");?>
<?php
function getRandomFromArray($ar) {
mt_srand( (double)microtime() * 1000000 );
$num = array_rand($ar);
return $ar[$num];
}
function getImagesFromDir($path) {
$images = array();
if ( $img_dir = @opendir($path) ) {
while ( false !== ($img_file = readdir($img_dir)) ) {
// checks for gif, jpg, png
if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
$images[] = $img_file;
}
}
closedir($img_dir);
}
return $images;
}
$root = '';
// If images not in sub directory of current directory specify root
//$root = $_SERVER['DOCUMENT_ROOT'];
$path = 'images/';
// Obtain list of images from directory
$imgList = getImagesFromDir($root . $path);
$img = getRandomFromArray($imgList);
?>
<img src="<?php echo $path . $img ?>" alt="" />
<? include("footer.php");?>
</div>
<div id="rightcolumn"></div>
</body>
</html>

Here is my header.php

<link href="css/style.css" type="text/css" rel="stylesheet">
<style>
a img {border:none}
.clearBoth {clear: both;}
</style>
<div class="logo"><a href="index.php"><img src="image/" alt="" width="299" height="62" /></a></div>
<ul id="minitabs">
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="publications.php">Publications</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>

Here is my style.css

*{margin: 0;padding: 0;outline: none;}
html, body{ font-family:Times New Roman; font-size: 12px; background-color: #ffffff;}
ul, li, h2, p{padding:0;margin:0;list-style:none;}
a {color: #000000; text-decoration: none;outline: none;}
a:hover{text-decoration:underline;}
.clear{clear:left;}
#contentcolumn{
margin: 0 45px 0 45px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 150px; /*Width of left column*/
margin-left: -100%;
background-color: #000000;
}
#rightcolumn{
float: left;
width: 150px; /*Width of right column*/
margin-left: -150px; /*Set left marginto -(RightColumnWidth)*/
background-color: #000000;
}
.logo { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width:300px; float:left;}
/* menu */
ul#minitabs{float: left; position:relative; width:450px; height:18px; left:303px; top:-95px; display: block;
font-family:Times New Roman; font-size: 14px; padding: 70px 0px 0px 0px; text-align: center;}
ul#minitabs li{display: inline-block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px; float:left;}
ul#minitabs a{text-decoration:none; padding: 0px 0px 0px 0px; border-bottom: 0px solid #FFF;color: #000000;}
ul#minitabs a#current{border-color: #000;}
ul#minitabs a:hover{text-decoration:underline;}

I appreciate any help or suggestions to resolve this issue! Thanks

  • 1 Contributor
  • 1 Reply
  • 120 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Short summary: the immediate fix posted by (floating the logo and the menu items) will work, but it’s brittle — especially when combined with negative offsets and mixed positioning. A more robust, cross‑browser approach is to group the logo and the nav in one header container and align them with CSS instead of nudging elements with top/left values.

A robust modern solution is to use a single header wrapper and flexbox so the logo and menu stay vertically aligned regardless of font rendering or image loading:

/* wrapper markup: <header class="site-header"><a class="logo">...</a><nav>...</nav></header> */

.site-header {
  display: flex;
  align-items: center;    /* vertical centering */
  gap: 20px;              /* space between logo and nav */
  height: 62px;           /* match logo height or allow auto */
}

.site-header .logo img {
  display: block;         /* removes baseline gap under images */
  max-height: 100%;
}

.site-header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 16px;
}

Practical checks and troubleshooting:

  • Use a simple HTML5 doctype (<!DOCTYPE html>) to avoid quirks/compatibility modes in IE.
  • Keep the CSS link only in the page head; avoid duplicating it in included header files.
  • Validate header.php for stray or mismatched closing tags that can break flow.
  • If the "random image" is decorative, output it as a CSS background-image or place it in a positioned container so it does not push the header layout.
  • For older browsers that don’t support flexbox, use display:inline-block on the logo and the nav and vertical-align: middle as a fallback.

Checklist: wrap logo+nav in one container, remove negative positioning hacks, use flexbox, validate markup, and test in the target browsers. This will give a stable, maintainable header layout.

Member Avatar for Member #949455

This is the answer to my question it's in the header file I forgot to post the answer last month:

This is the css code I insert into the style:

img {float:left;}
li { float:left; margin-top:0px; margin-left:0px; }

Header File:

link href="css/style.css" type="text/css" rel="stylesheet">

<style>
a img {border:none} // IE 
.clearBoth {clear: both;}
img {float:left;}
li { float:left; margin-top:0px; margin-left:0px; }
</style>

<div class="logo">
<a href="index.php">
<img src="image/" alt="" width="299" height="62" class="left"/> 
</a>
</div>
<ul id="minitabs">
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="publications.php">Publications</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
Edited by Member #949455 because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.