Hello I have been making a template or site, but the menue or navigation done't look right it IE. Its perfect in FF. I think it has to do with the type of navigation I am using you will see in the code, but I don't really know. Does anyone know why it does this? I don't really know how to describe the problem but I think I read that somewhere you arn't able to make navigation that has auto size for Ie, but I bassically got the basic code for the navigation from hear.
http://www.cssplay.co.uk/menus/centered.html menu 2
Hears what it does...
FF
http://i93.photobucket.com/albums/l7..._Bouzy/ada.jpg
IE
http://i93.photobucket.com/albums/l7...Bouzy/adaa.jpg
(I have the margin problems fixed just not how the navigation works.
I always have problems with my sites in IE (But they always look perfect the first time in FF. Is this because of some bad coding habits or what???
Code:
#menu {
padding: 0px;
margin: auto;
white-space: nowrap;
background-image: url(Images/navigation.jpg);
margin-left: 4px;
background-repeat: no-repeat;
height: 32;
width: 742;
list-style-type:none;
margin-bottom: 4px;
}
#menu li {
display:table-cell;
}
#menu a {
width: auto;
display:block;
padding:5px 17px;
color:#7699b5;
background:#b0cfe1;
text-decoration:none;
}
#menu a:hover {
color:#b0cfe1;
background:#7699b5;
}
.container {text-decoration:none;}
* html .container {display:inline-block;}
Code:
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Blog</a></li>
<li><a href="#nogo">Portfolio</a></li>
<li><a href="#nogo">About</a></li>
<li><a href="#nogo">Contact</a></li>
</ul>
That is in an include file from the main xhtml like this
Code:
<div id="header">
<!-- HEADER CODE -->
<img src="Images/header.jpg" alt= "Banner and title of site" />
</div>
<!-- ************************ -->
<!-- NAVIGATION CODE -->
<!-- CSS NAVIGATION -->
<del class="container">
<?php
@include('Includes/links.html');
?>
</del>
<!-- ************************ -->
<div id="conttop">
<!-- PUT MAIN COLUMN_T CODE HERE -->
</div>
<!-- ************************ -->
<div id="content">
<!-- PUT MAIN COLUMN CODE HERE -->
<!-- PUT YOUR MAIN HEADING FOR THE PAGE AND CONTENT BETWEEN THE HEADING TAGS <H> AND THE PARAGRAPH TAGES <P> -->
<h2 class="contentheading">Heading</h2>
<p class="contentparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu enim quis odio blandit malesuada. Vivamus tristique, felis eu tristique tincidunt, ipsum libero tempor lectus, sed feugiat lectus urna non risus. Suspendisse ac elit. Nam nec erat. Nulla posuere nisi at magna venenatis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare, felis malesuada fermentum sagittis, justo nibh interdum tortor, sed ullamcorper purus dui at pede. Maecenas suscipit justo non ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pede. Fusce lobortis euismod diam. Morbi ullamcorper laoreet nibh. Mauris elementum, dui ut facilisis pretium, urna dolor rhoncus mi, ut tempor metus neque sed justo. Nulla vel tellus in nisl ultrices suscipit. Ut nisl. Quisque turpis libero, fermentum sed, nonummy non, eleifend eu, ipsum. Ut sit amet nunc. Mauris a neque sit amet purus volutpat cursus. Quisque sem.
Suspendisse sed risus eget odio imperdiet tristique. Sed urna neque, facilisis ut, pulvinar sit amet, hendrerit id, urna. Morbi congue diam id eros. Phasellus sit amet lorem. Mauris sollicitudin. Cras gravida, lectus quis dictum auctor, elit tortor semper libero, viverra tincidunt justo ligula venenatis ipsum. Integer eget libero. Aliquam dapibus sem nec ipsum. Vestibulum augue. Phasellus a nisl semper urna venenatis tristique. Quisque eu purus. Nunc eu sapien sodales neque fermentum blandit. Donec molestie libero et metus egestas dictum. Praesent magna lorem, faucibus sit amet, semper sit amet, porta a, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec justo. Proin ultricies interdum erat. Pellentesque nec nunc. In volutpat lacus ac mauris. Nulla mauris neque, mollis a, faucibus vitae, posuere et, lacus.</p>
</div>
<!-- ************************ -->
<div id="contentb">
<!-- PUT MAIN COLUMN_B CODE HERE -->
</div>
<!-- ************************ -->
<div id="footer">
<!-- PUT FOOTER CODE HERE -->
<p id="copy">©
<?php ini_set('date.timezone', 'American/Eastcoast');
$startYear = 2007;
$thisYear = date('Y');
if ($startYear == $thisYear) {
echo $startYear;
}
else {
echo "{$startYear}-{$thisYear}";
}
?>
Goldfish Graphics</p>
</div>
<!-- Closing container div -->
</div>
If anyone could help that would be great seeing as this is for someone. (P.S. everything validats I think)
