...

View Full Version : IE 7 Problems wit CSS



l Squid l
07-16-2007, 02:59 AM
Well, for my site I just added drop down menus with transparency I may add, which I am so excited about. http://elementalstudios.freehostia.com/

But if you view that site in IE 7 the nav is messed up, like the spacing is too much between teams and the rest of the nav.

CSS Code

@charset "utf-8";
/* Elemental Studios */

body {
background-repeat: no-repeat;
}
-->
body {
text-align:center;
background:#000000;
margin:auto;
padding:0;
color:#FFFFFF;
font-family:Tahoma, Verdana, sans-serif, Arial;
font-size:11px;
text-decoration:none;
}

#content {
width:770px;
margin:auto;
}

/* Header */

.gapless {
background:url(images/Banner.png);
width:770px;
height:178px;
margin: 0 auto;
}

.left {
background:url(images/Left-Neon-Light.png);
width:121px;
height:592px;
background-repeat:no-repeat;
margin-left:0px;
float:left;
}

.right {
background:url(images/Right-Neon-Light.png);
width:117px;
height:592px;
margin-right:0px;
float:right;
}

/* Nav Start */

.leftpipe{
background:url(images/Left-Pipe.png);
width:50px;
height:36px;
margin: 0 auto;
float:left;
}

.home {
background:url(images/Home.png);
width:70px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}

.team {
background:url(images/Teams.png);
width:56px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}
/* Begin Drop Down Menu */
#teamsdd
{ margin: auto;
padding: 0}

#teamsdd li
{ margin: auto;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#teamsdd li a.menu
{ display:block;
text-align: center;
background:url(images/Teams.png);
margin:auto;
color: #FFF;
width: 56px;
height: 36px;
text-decoration: none}

#teamsdd li a.menu:hover
{ background:url(images/Teams.png);
}

.submenu
{ background: #1e1b1b;
border: 1px solid #920101;
visibility:hidden;
position: absolute;
z-index: 3;
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

.submenu a
{ display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding:3px;
color: #ffffff}

.submenu a:hover
{ background: #1e1b1b;
color: #FFF}

/* End Drop Down Menu */
.video {
background:url(images/Videos.png);
width:56px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}

.graphic {
background:url(images/Graphics.png);
width:76px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}

.forum {
background:url(images/Forum.png);
width:57px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}

.contact {
background:url(images/Contact-Us.png);
width:113px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}

.rightpipe {
background:url(images/Right-Pipe.png);
width:54px;
height:36px;
margin: 0 auto;
float:right;
}

/* Nav End */

/* Content Start */


.headercontent {
background:url(images/Header-Content.png);
float: left;
width: 532px;
height:76px;
}

.textcontent {
font-family:Tahoma, Verdana, sans-serif, Arial;
font-size:11px;
text-indent:20px;
color:#FFFFFF;
text-decoration:none;
}


#contentbox {
overflow: auto;
background : url(images/Content-Box.png) #666767 no-repeat;
width: 532px;
height: 385px;
background-position:center;
float:left;
}

.footer {
background:url(images/Footer.png);
height:95px;
width:532px;
float:left;
}

.indexheader {
background:url(images/Content-Box_UP.png);
width:532px;
height:170px;
float:left;
}


body {
background-repeat : no-repeat;
}

/* Content End */


XHTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta name="keywords" content="halo 2,halo 3, xbox live, montages, videos, graphics, clan, teams, halo 2 help, " />
<meta name="description" content="This Halo 2 website, has teams, clans, host montages,and graphics. Join our forum." />

<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />

<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

var TimeOut = 300;
var currentLayer = null;
var currentitem = null;

var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;

// Open Hidden Layer
function mopen(n)
{
var l = document.getElementById("menu"+n);
var mm = document.getElementById("mmenu"+n);

if(l)
{
mcancelclosetime();
l.style.visibility='visible';

if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';

currentLayer = l;
currentitem = mm;
currentLayerNum = n;
}
else if(currentLayer)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}

// Turn On Close Timer
function mclosetime()
{
closeTimer = window.setTimeout(mclose, TimeOut);
}

// Cancel Close Timer
function mcancelclosetime()
{
if(closeTimer)
{
window.clearTimeout(closeTimer);
closeTimer = null;
}
}

// Close Showed Layer
function mclose()
{
if(currentLayer && noClose!=1)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
}
else
{
noClose = 0;
}

currentLayer = null;
currentitem = null;
}

// Close Layer Then Click-out
document.onclick = mclose;
</script>


<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
.style1 {font-size: 10px}
-->
</style>



</head>

<body>

<div id="content">

<div class="gapless" align="center">
</div>

<div class="left"></div>

<div class="right">
</div>

<div class="leftpipe">
</div>

<a class="home" href="index.html">Home Link</a>

<ul id="teamsdd">
<li>
<a href="html/teams.html" class="menu" id="mmenu1"
onmouseover="mopen(1);"
onmouseout="mclosetime();"></a>
<div class="submenu" id="menu1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Team Element Vl:Pro</a>
<a href="#">Team Element Vl:Semi-Pro</a>
<a href="#">Team Element Vl:Amateur</a>
</div>
</li>
</ul>

<a class="video" href="html/videos.html">Video Link</a>

<a class="graphic" href="html/graphics.html">Graphics Link</a>

<a class="forum" href="http://z7.invisionfree.com/Elemental_Studios/index.php?">Forum Link</a>

<a class="contact" href="html/contactus.html">Contact Link</a>


<div class="rightpipe">
</div>

<div class="indexheader">


<h1><img src="images/Welcome.png" alt="Welcome" width="125" height="38" /></h1>
<p align="center" class="style1"> Hello, and Welcome to Elemental Studios. This section of Elemental Studios is for Halo 2. We are here to help you with you multimedia needs, anything from video editing, to Photoshop, and to your Halo 2 skills! We have a clan, and teams being set-up. So check out our forum, or maybe you would like to see graphics gallery, or check out the videos! Enjoy you stay, here!</p>
<img src="images/LastestNews.png" alt="Lastest News" width="195" height="38" /></div>
<div class="lastestnews">

<p align="center" class="textcontent">&nbsp;</p>
<blockquote>

<p align="left" class="textcontent">Hi guys! Well, its been pretty dead around here. Ads have been disabled. Team Element Vl has spilt up both we have 3 more people interested. Forums are up, and they are look pretty sweet thanks to the guys over at SkinPanel. Drop menus will be added, and site affliations will be coming to get our name around. </p>
<p align="left" class="textcontent"><em>-posted by Squid on July 15th 2007</em></p>

<p align="left" class="textcontent"> Hi guys, todays 7/07/07! Bungie Day! I recommend everyone to go online on Halo 2 at 7:07 pm Pacific time. I heard something big is happening. In other good news we now have a full team, so Team Element: Pro Division is closed for new recruits, please remember that the clan is is looking for memebers also, I will annoce tourneys and such. Now for a couple of side notes, if you are on a team please do not constantly change your Emblem, because I make Team Sigs for the teams which contain the Emblems, If you change your Emblem please think about what you really want, Team Element does not require a certain Emblem or any of that ****. Team Members should have atleast a AIM screen name. Halo3Forum accounts are optional but it would be nice if you did get one, because over there is a wealth of information on Halo 2 and strategies. Also if ou are using IE 7 you may have slight problems viewing the site because ads are now up and I haven't coded to support IE 7 fully yet. If you have Firefox and you are using Adblock please disable for this site.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July 7th 2007</em></p>

<p align="left" class="textcontent">Happy July 4th! I hope you guys had a nice holiday! </p>
<p align="left" class="textcontent"><em>-posted by Squid on July 4th 2007</em></p>


<p align="left" class="textcontent"> Hey, wassup. Within these last two days, you probably have seen many improvements, within the site. The videos page and forums have been added. We are currently having problems, with the video streaming but bear with us, I am talking with support. In other news, soon I will be add more menus to the navigation. If you want to be added to a team just message me on Xbox Live and I will try you out, you will placed in the division where I think fit.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July 3th 2007</em></p>

<p align="left" class="textcontent"> Hi guys, we have three new pages up. The Teams page, Contact Us Page, and the Graphics Page. The forums, and some more graphical upgrades will be coming to the Site. If for any reasons, you are having problems im on AIM at I Squid I, or email me at samyrk@hotmail.com, I check my email daily.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July 2th 2007</em></p>



<p align="left" class="textcontent">Hi all, this is Squid. Today is Grand Opening of Elemental Studios. It was launched before but itwas severely miscoded, in both Firefox and IE. But thanks to a friend of mine named Jutlander I have sucessfully coded it! Please use either Firefox 2 or IE. If you are using an older version of IE please upgrade to IE 7 to view transparent images.</p>
<p align="left" class="textcontent"><em>-posted by Squid on June 30th 2007</em></p>
<p align="left" class="textcontent"><br />
</p>
<p align="left" class="textcontent">&nbsp;</p>
</blockquote>


</div>

<div class="footer">
</div>
</div>




</body>
</html>

colindunn
07-16-2007, 07:24 AM
Browsers render pages differently and IE does not handle the code the same way firefox does (im assuming thats the other browser you are using). One solution is to create two stylesheets, one for IE and another for all other browsers. You can then dictate which stylesheet is loaded using conditional statements. You can learn all about those here (http://www.cssplay.co.uk/menu/conditional.html).

_Aerospace_Eng_
07-16-2007, 07:31 AM
The last site I coded I had minor issues but I fixed them and none of the fixes required me hacking up the layout. Sure I had to for min-height but that was it. Your problem is you haven't set a width on the unordered list. You also need to float it to the left.

#teamsdd {
margin: 0;
padding: 0;
list-style:none;
float:left;
width:56px;
}

l Squid l
07-16-2007, 02:14 PM
Wow, Thank you so much! And
Browsers render pages differently and IE does not handle the code the same way firefox does (im assuming thats the other browser you are using). One solution is to create two stylesheets, one for IE and another for all other browsers. You can then dictate which stylesheet is loaded using conditional statements. You can learn all about those here (http://www.cssplay.co.uk/menu/conditional.html). I am using different stylesheets but i just didnt know what to put on the IE this time.
<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->

l Squid l
07-16-2007, 10:15 PM
Oh man its happening again, I dont know why, I added the code..http://elementalstudios.freehostia.com/

_Aerospace_Eng_
07-16-2007, 10:18 PM
Looks fine here in Ie7.

l Squid l
07-16-2007, 10:23 PM
Oops I should been more specific. When you click like the graphics, or contact us..or teams.

_Aerospace_Eng_
07-16-2007, 10:38 PM
Thats because its not reading the Ie stylesheet anymore because its in the root directory not the html directory. DW didn't update the stylesheet location because it doesn't understand the html in the conditional comments. You do realize that you ONLY need to put the things in the IE stylesheet that you want to overwrite from the default stylesheet? You don't need to put everything in there.

l Squid l
07-16-2007, 10:58 PM
So I just need to change the linking to the IE stylesheet, DAng it not bringing up the browse box to select the file!

Edit: I selected the file now like none of the images except the content box are showing up...

Edit2: I figure, the links were wrong lol!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum