WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: 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.
-
This is my index.php code:
<!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.
-
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.
-
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:
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:
#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!
-
(just guessing) try
display: inline-block;
float: left;
min-width: ??;
min-height: ??;
(at least for all IE but IE6 and older)