[HTML/CSS] Website / Browsers
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?
Re: [HTML/CSS] Website / Browsers
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
Re: [HTML/CSS] Website / Browsers
index.html:
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>
stylesheet.css:
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;
}
Re: [HTML/CSS] Website / Browsers
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%.
Re: [HTML/CSS] Website / Browsers
Code:
</center>
<div class="content_border"><div class="content">
test
</div></div>
<div class="footer"></div>
</body>
</html>
I think it's because you closed the center tag too early
Try this, I made it so the body content doesn't get centered with the div:
Code:
<div class="content_border" style="text-align:left"><div class="content">
test
</div></div>
<div class="footer"></div>
</center>
</body>
</html>
(The footer stays centered)
Re: [HTML/CSS] Website / Browsers
Now it's centered, but everything is different sizes...
Re: [HTML/CSS] Website / Browsers
Try change the `tabsmenucontentclass` width to 786px not 766px which will account for the 10px padding either side.
Re: [HTML/CSS] Website / Browsers
Re: [HTML/CSS] Website / Browsers
Quote:
Originally Posted by
foxx
I've been looking for that :drool:
Re: [HTML/CSS] Website / Browsers
Simple. IE IS SHIT :)
Issue Solved :)
Re: [HTML/CSS] Website / Browsers
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...
Re: [HTML/CSS] Website / Browsers
Quote:
Originally Posted by
coolep6
Simple. IE IS SHIT :)
Issue Solved :)
LMFAO! Very good point :P:.
Re: [HTML/CSS] Website / Browsers
Quote:
Originally Posted by
YeImANutter
LMFAO! Very good point :P:.
Thankyou :)