[HTML/CSS] Website / Browsers

[Mike]

http://www.trasion.com/website/

On my site, it looks bad in IE, but perfect in FF.

Firefox:

Internet Explorer:

Why does it mess up in Internet Explorer?

Can someone tell me what's wrong?

 

[stealarcher]

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

 

[Mike]

index.html:

<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:

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;
}

 

[Wh005h]

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%.

 

[s-p-n]

</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:

<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)

 

[Mike]

Now it's centered, but everything is different sizes...

 

[Parker]

Try change the `tabsmenucontentclass` width to 786px not 766px which will account for the 10px padding either side.

 

[foxx]

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 

[s-p-n]

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

I've been looking for that

 

[coolep6]

Simple. IE IS ****

Issue Solved

 

[billiejoe]

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...

 

[YeImANutter]

Simple. IE IS ****

Issue Solved

LMFAO! Very good point :.

 

[coolep6]

LMFAO! Very good point :.

Thankyou