Printable View
http://www.trasion.com/website/
On my site, it looks bad in IE, but perfect in FF.
Firefox:
http://img14.imageshack.us/img14/2816/87670994.jpg
Internet Explorer:
http://img8.imageshack.us/img8/185/24990486.jpg
Why does it mess up in Internet Explorer?
Can someone tell me what's wrong?
Every browser is setup differently. It may look the same in google chrome and internet explorer, that is the tricky part of web design. Its hard to tell what part of your coding is wrong without seeing it. Would you be able to post it here? Will need prolly your index.html or .php file, and your CSS sheet with it
index.html:
stylesheet.css:Code:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<?xml version="1.0"?>
<html>
<head>
<title>Trasion Test Layout</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="js/mouseovertabs.js" type="text/javascript"></script>
</head>
<body>
<center>
<div class="header"></div>
<div class="navigation_border">
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.trasion.com/index.html" rel="gotsubmenu">Homepage</a></li>
<li><a href="http://www.trasion.com/communityforum/" rel="gotsubmenu">Community</a></li>
<li><a href="http://www.trasion.com/software.html" rel="gotsubmenu">Software</a></li>
<li><a href="http://www.trasion.com/customise.html" rel="gotsubmenu">Customise</a></li>
<li><a href="http://www.trasion.com/supportforum/" rel="gotsubmenu">Blogs</a></li>
<li><a href="http://www.trasion.com/developers.html" rel="gotsubmenu">Developers</a></li>
<li><a href="http://www.trasion.com/contactus.html" rel="gotsubmenu">Contact Us</a></li>
</ul>
</div>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<a href="submenucontents.htm">Loading the Links..</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)
</script>
</center>
<div class="content_border"><div class="content">
test
</div></div>
<div class="footer"></div>
</body>
</html>
Code:body
{
background: #1b1b1b;
color: #373737;
font: 12px Arial;
margin: 0px;
padding: 0px;
}
.header
{
display: block;
background: url('images/header.gif');
width: 786px;
height: 130px;
border-right:2px solid #373737;
border-left:2px solid #373737;
border-top:none;
border-bottom:none;
}
.content
{
margin: 0 auto;
padding: 0;
text-align: left;
width: 780px;
background-color: #e6e6e6;
color: #2f3b4b;
}
.content_border
{
margin: 0 auto;
padding: 0;
text-align: left;
width: 786px;
background-color: #e4e4e4;
color: #2f3b4b;
border-right:2px solid #373737;
border-left:2px solid #373737;
border-top:none;
border-bottom:none;
}
.footer
{
margin: 0 auto;
padding: 0;
width: 786px;
height: 20px;
background: url('images/nav_bottom_bg.gif');
color: #FFFFFF;
text-decoration: none;
font: bold 10px Arial;
border-right:2px solid #373737;
border-left:2px solid #373737;
border-top:none;
border-bottom:2px solid #373737;
}
.navigation_border
{
margin: 0 auto;
padding: 0;
width: 790px;
background-color: #373737;
color: #FFFFFF;
text-decoration: none;
font: bold 10px Arial;
border: 0px;
}
/* ######### CSS for top level tabs ######### */
.tabsmenuclass ul{
overflow: hidden;
width: 786px;
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: url('images/nav_top_bg.gif');
color: white;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
font: bold 13px Arial;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: url('images/nav_top_hover.gif');
font: bold 13px Arial;
}
/* ######### CSS for sub menu container below ######### */
.tabsmenucontentclass{
clear: left;
background: url('images/nav_bottom_bg.gif');
color: white;
width: 766px;
height: 14px;
padding: 10px;
text-decoration: none;
font: bold 10px Arial;
border-right:2px solid #373737;
border-left:2px solid #373737;
border-top:none;
border-bottom:none;
}
.tabsmenucontentclass a{
clear: left;
background: #154c89 url('images/nav_bottom_bg.gif');
color: white;
width: 766px;
height: 14px;
padding: 10px;
border: 0px;
text-decoration: none;
font: bold 10px Arial;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
Just as a hint, typically its css that is the problem. The hardest thing to overcome between ie and ffox is the difference in positioning. I believe ie and ffox construct padding/margins differently, but I'm not 100%.
I think it's because you closed the center tag too earlyCode:</center>
<div class="content_border"><div class="content">
test
</div></div>
<div class="footer"></div>
</body>
</html>
Try this, I made it so the body content doesn't get centered with the div:
(The footer stays centered)Code:
<div class="content_border" style="text-align:left"><div class="content">
test
</div></div>
<div class="footer"></div>
</center>
</body>
</html>
Now it's centered, but everything is different sizes...
Try change the `tabsmenucontentclass` width to 786px not 766px which will account for the 10px padding either side.
I've been looking for that :drool:Quote:
Originally Posted by foxx
Simple. IE IS SHIT :)
Issue Solved :)
man IE is good because its good when it comes to debugging...
if you want your site to be cross browser you must use table less layout and external css :)
it's kind a easy though...
LMFAO! Very good point :P:.Quote:
Originally Posted by coolep6
Thankyou :)Quote:
Originally Posted by YeImANutter