Author Topic: menu shown wrong in Internet explorer 7 ? (Read 6249 times)

Roych · « **on:** March 31, 2010, 09:03:14 AM »

Hi

I have made a WB template from another css template and it works fine. But when someone tries to view the page in internet explorer 7 the menu is shown wrong it is not in a straight line but its shown in steps like this:

RIGHT
link1 | link2 | link3 ....

WRONG
link1 |
link2 |
link3 |
link4 |

I tried everithing but nothing seems to work!
I tried:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6" />

Not working either

Everything looks right in Firefox and all the other browsers even in IE8 everything looks fine only IE7 what should I do?

Thanks in advance!

R.

Roych · « **Reply #1 on:** March 31, 2010, 09:11:08 AM »

This is my index.php code:

Quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6" />

<meta name="description" content="<?php page_description(); ?>" />

<meta name="keywords" content="<?php page_keywords(); ?>" />

<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else
{ echo 'utf-8'; }?>" />

<title><?php page_title(); ?></title>

<link rel="stylesheet" type="text/css" href="

<?php echo TEMPLATE_DIR; ?>/style.css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header">
</div>
<div id="nav"><?php show_menu(1); ?>

</div>

<div id="body">

<div id="body-top">

<div id="body-bot">

<div id="about-box">

<h2>

<?php page_content(1); ?>

</h2>

</div>

<div id="express-box">

<h2>

<?php page_content(2); ?>

</h2>

</div>

<div class="clear"></div>

</div>

</div>

</div>

<div id="foot">

<div id="foot-top">

<div id="foot-bot">

<div id="what-box">

<h2>

<?php page_content(3); ?>

</h2>

</div>

<div id="news-box">

<h2>

<?php page_content(4); ?>

</h2>

</div>

<div class="clear"></div>

</div>

</div>

</div>

<div id="footer">

<p><strong> <?php page_footer(); ?>

</a></strong></p>

</div>

</div>

</body>

</html>

<?php MiniCounter(1 , "Klikov/Hits: " , " [Danes/Today: " , "]" ) ?>

Thx!
R.

chio · « **Reply #2 on:** March 31, 2010, 10:09:26 AM »

The output of showmenu2 is exactly the same in every browser - because it runs on the server and not in your browser.
If there is a css-problem, you have to look if you have ported the template well.

Roych · « **Reply #3 on:** March 31, 2010, 10:16:02 AM »

I have tried to find the problem in my css but no luck so far!
Im not a coder but understand some!

Here is my CSS code:

Code: [Select]

html {


	margin: 0;


	padding: 0;


}


body {


	background: #CDC2B3 url(images/bg.gif);


	text-align: center;


	color: #5F3E2F;


	font: 8px verdana, sans-serif;


	margin: 0px;


	padding: 20px 0px 20px 0px;


}


a {


	color: #5F3E2F;


	text-decoration: none;


}


a:hover {


	color: #1D110B;


	text-decoration: underline;


}


img {


	border: 0px;


}


#wrapper {


	width: 778px;


	margin: auto;


	text-align: left;


}


#header p {


	font-size:12px;


	font-style:italic;


	color:#FFFFFF;


	font-family:Georgia, "Times New Roman", Times, serif;


}


#header p.more {


	padding-right: 22px;


}


#header {


	height: 320px;


	background: url(images/header.jpg) no-repeat;


}


#header div {


	padding: 183px 213px 0px 82px;


}


#header p {


	margin: 0px;


	padding: 0px;


}


#header a {


	color:#;


}


#nav {


	width: 740px;


	height:48px;


	margin: 0px 0px 0px 20px;


	background-image:url(images/nav.gif);


	background-repeat:no-repeat;


	display:inline;


	float:left;


	


}


#nav a {


	font-size:15px;


	font-style:italic;


	color:#260403;


	font-family:Georgia, "Times New Roman", Times, serif;


	margin: 15px 0px 10px 0px;


	padding: 0px 20px 0px 20px;


	float:left;


	border-right-width: 2px;


	border-right-style: inset;


	border-right-color: #76644f;


}


#nav a:hover {


	color:#862e06;


	text-decoration:none;


}

.menu_current {


	text-decoration:underline;
}


.lastchild {


	border-right: none 0px !important;


}


#body {


	background: url(images/body_bg.gif) repeat-y;


	clear: both;


	width: 100%;


}


#body-top {


	background: url(images/body_top.gif) no-repeat;


}


#body-bot {


	background: bottom url(images/body_bot.gif) no-repeat;


	padding: 21px 25px 15px 42px;


}


#about-box {


	float: left;


	width: 315px;


}


#about-box ul {


	margin-left: 8px;


}


#express-box {


	float: right;


	width: 327px;


}


#foot {


	width: 738px;


	margin-left: 20px;


	background: url(images/foot_bg.gif) repeat-y;


}


#foot-top {


	background: url(images/foot_top.jpg) no-repeat;


}


#foot-bot {


	background: bottom url(images/foot_bot.gif) no-repeat;


	padding: 13px 21px 12px 28px;


}


#what-box {


	float: left;


	width: 332px;


}


#what-box img.left {


	margin-left: 10px;


}


#what-box ul {


	float: left;


	margin-left: 2px;


	width: 184px;


}


#news-box {


	float: right;


	width: 316px;


}


#news-box ul {


	float: left;


	margin-left: 2px;


	width: 184px;


}


#footer {


	margin: 14px;


	text-align: center;


}


ul {


	margin: 0px;


	padding: 0px;


}


li {


	margin: 0px;


	padding: 0px 0px 0px 20px;


	list-style: none;





}


p {


	margin-top: 0px;


	margin-bottom: 10px;


}


div.narrow-text {


	margin-right: 18px;


}


img.left {


	float: left;


	padding-right: 14px;


	padding-bottom: 16px;


}


#body p.more {


	padding-top: 6px;


}


#news-box p.more {


	padding-top: 0px;


	margin-top: 0px;


}


p.more {


	text-align: right;


}


.clear {


	clear: both;


}

I think that somewhere in this part of the code is the problem:

Code: [Select]

#nav {


	width: 740px;


	height:48px;


	margin: 0px 0px 0px 20px;


	background-image:url(images/nav.gif);


	background-repeat:no-repeat;


	display:inline;


	float:left;


	


}


#nav a {


	font-size:15px;


	font-style:italic;


	color:#260403;


	font-family:Georgia, "Times New Roman", Times, serif;


	margin: 15px 0px 10px 0px;


	padding: 0px 20px 0px 20px;


	float:left;


	border-right-width: 2px;


	border-right-style: inset;


	border-right-color: #76644f;


}


#nav a:hover {


	color:#862e06;


	text-decoration:none;


}

Thx!

schwoortz · « **Reply #4 on:** April 08, 2010, 06:02:58 PM »

(just guessing) try

display: inline-block;
float: left;
min-width: ??;
min-height: ??;

(at least for all IE but IE6 and older)

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: menu shown wrong in Internet explorer 7 ? (Read 6249 times)

Roych

menu shown wrong in Internet explorer 7 ?

Roych

Re: menu shown wrong in Internet explorer 7 ?

chio

Re: menu shown wrong in Internet explorer 7 ?

Roych

Re: menu shown wrong in Internet explorer 7 ?

schwoortz

Re: menu shown wrong in Internet explorer 7 ?