HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
problem with ie6
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Tue Apr 22, 2008 6:23 am     problem with ie6 Reply with quote

I have a link problem with IE6 only, when using this browser the links do not display correctly, they form a vertical line and the picture for the menu, does not align correctly either. I thought I had found a fix, but it does not fix it.

Code:
<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />
<style type="text/css"><!--[if IE]>
 h1.iepara  /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
{padding-top: 1em;}
<![endif]-->
{  }
 </style>
</head>

<body>
<div id="container">
  <div id="header">
   </div>
    <div id="centercontent">
      <ul class="menu">
        <li><a href="index.htm">Homepage</a></li>
        <li><a href="mosaic1.htm">Mosaic 1</a></li>
        <li><a href="mosaic2.htm">Mosaic 2</a></li>
        <li><a href="papier.htm">Papier Mache</a></li>
        <li><a href="news.htm">News</a></li>
        <li><a href="studio.htm">Studio</a></li>
        <li><a href="workshops.htm">Workshops</a></li>
        <li><a href="guestbook3.htm">Guest Book</a></li>
        <li><a href="contacts.htm">Contact Me</a></li>
        <li><a href="links.htm">Links</a></li>
         </ul>
     <br style="clear: left">
       <div id="fullwidth">


the css is:
Code:
.menu{
border-left:0px solid #625e00;
border-right:0px solid #625e00;
border-top:1px solid #625e00;
border-bottom:1px solid #625e00;
margin:0; padding:0; float: left;
width: 100%;
background: black url('images/lista.gif') repeat-x center;
font-style:normal;
font-weight:bold;
font-family:Arial}

.menu li{
display: inline;
}

.menu li a{
float: left;
color: white;
padding: 8px 10px;
text-decoration: none;
border-right: 1px solid white;
}

.menu li a:visited{
color: white;
}

.menu li .current{
color: white;
background: url('images/listb.gif') repeat-x center;
}

.menu li a:hover{
color: white;
background: url('images/listb.gif') repeat-x center;
}

does anyone know what is wrong with this coding? If anything, and why it does not work with IE6
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Tue Apr 22, 2008 6:52 pm     Reply with quote

Works fine for me in IE6, but I do not have the images so I can't troubleshoot what I don't have. Do you have a live link?

Correct way to write a conditional statement is
Code:

<style type="text/css">
...
</style>
<!--[if IE]>
.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;}
<![endif]-->

and it must follow the closing style tag
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Wed Apr 23, 2008 1:56 am     re Reply with quote

I will try and get a free host as it is for someone else. And I will get back when it is online. Just checking is this correct?

<style type="text/css">
</style

<!--[if IE]>
.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;}
<![endif]-->

do I add all this code to the stylesheet? or do I add it on every page of the HTML? thanks
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Wed Apr 23, 2008 3:26 am     Reply with quote

You have to add this to each page because you have no style closing tag on an external style sheet.
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Fri Apr 25, 2008 2:24 pm     re Reply with quote

I will try this, but there is no way I can test the site as browser shots is not showing IE6 even though I keep ticking only IE6 so I have to wait until Tuesday when I go to my client. As I have Vista I cannot install IE6 do you know of a way I can get IE6? Is it possible to have two <style type="text/css"> </sytle> on one page.
<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />
<!--[if IE]>
<style type="text/css">
.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;}
</style>
<![endif]-->

<style type="text/css">
then follows more style
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Fri Apr 25, 2008 7:14 pm     Reply with quote

The standalone versions of IE do not work with Vista. Here's a link that might help get IE6 standalone up and running http://tredosoft.com/IE6_For_Vista_Part_1 or Microoft has a fix by using a virtual pc http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx
The multiple IE installer (for IE3-6) http://tredosoft.com/Multiple_IE
and IE7 http://tredosoft.com/IE7_standalone
I am still using XP so they work fine for me.

Sure you can use two or more stylesheets, plus you can import one or more stylesheets to another stylesheet using the import rule
Code:
@import url("css/mycss.css");

This import rule/s must be the very first entry/ies on the stylesheet.
Or if it is IE specific
Code:
<!--[if IE]>
<link href="css/my.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

Or just list them in the head section as you are doing. Just make sure either way you use them, there are no conflicting class or id elements.
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Thu May 08, 2008 3:01 pm     re menu list in IE6 and IE7 Reply with quote

As regards the above post, I still have problems with the horizontal menu, in IE6 and IE7 I put the conditional statement on all pages, but it is still not working correctly, it was before in IE7 but has now decided to not work. I got an url [url]www.quartzy.007sites.com [/url] with lots of ads, but you can still see that the menu does not work using IE6 and IE7. Appreciate any help with this.
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Thu May 08, 2008 4:22 pm     Reply with quote

Which menu did you use from the dynamic drive site?
If you take it out of quirks mode in ie, ie7 will display it correctly.

Code:
Correct way to keep out of quirks mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage eyecatching arts</title>
<script type="text/javascript" src="http://www.klixmedia.com/ad_serve.aspx"></script>
<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Thu May 08, 2008 4:38 pm     re Reply with quote

this is the link for the horizontal menu. http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/
I did not realise it was in quirks mode, I thought Expression Web would just put the right doc type in. But I will change them now. Tested a page and it does indeed work with IE7 though not published yet.
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Thu May 08, 2008 7:39 pm     Reply with quote

Here's the css to fix ie6, still works in FF and ie7.
Code:

* html > body #container {height: auto;}
* {margin: 0;padding: 0;}

body {
   font-family: tahoma,helvicta,verdana, Arial, sans-serif;
   font-size: 0.88em;
   color: #FFFFFF;
   text-align: center;
   background-image: url('images/background.gif');
   background-repeat: repeat-y;
   background-position: center top;
   background-color: #000000;}
      
#container {
   width: 800px;
   height: 100%;
   margin: auto;
   text-align: left;
   border: 1px solid #625e00;}   
   
#centercontent {
   width: 800px;
   background: #000000;
   color: #FFFFFF;
   display: inline;}
   
#header  {
   width: 800px;
   height:70px;
   background-image: url('images/logo.gif');
   background-color: black;
   background-repeat: no-repeat;
   margin-bottom: 0;
   padding-bottom: 0;}
      
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.menu {
border-left:0px solid #625e00;
border-right:0px solid #625e00;
border-top:1px solid #625e00;
border-bottom:1px solid #625e00;
margin:0;
padding:0;
float: left;
width: 100%;
background: black url('images/lista.gif') repeat-x center center;
font-family:tahoma;
}

.menu li{
display: inline;
}

.menu li a{
float:left;
color: white;
padding: 8px 8px;
text-decoration: none;
border-right: 1px solid #625e00;}

.menu li a:visited{color: white;}

.menu li a:hover, .menu li .current {color: white;
background: url('images/listb.gif') repeat-x center center;}


There are still some problems in FF and ie6.
FF--the image in the <div class="grey"> div extends outside the bottom of the container.

ie6 The content border extends into the left and right background borders. Everything inside aligns on this div, fixing it will align the menu and footer inside the borders of the background.

Quote:
I did not realise it was in quirks mode, I thought Expression Web would just put the right doc type in.


Never assume a wysiwyg will insert code correctly, always check in code view. Nothing can go above the doctype, not even a blank line, to stay out of quirks mode.

Check the first line of your css
Code:
* html > body #container {height: auto;}


 does not belong
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Fri May 09, 2008 1:36 pm     re Reply with quote

thanks for getting back to me. I will check the doctype in future, sorry but I just dont see any squiggles in my pages, like the ones you said remove. I took out the html li a and will check to see if it now works. Also found the mistakes you mentioned. Will upload it all now. And get back if it is still not working.
quartzy



Joined: 26 Dec 2007
Posts: 404

PostPosted: Fri May 09, 2008 3:14 pm     re Reply with quote

uploaded the changes and I cant believe it is now working in IE6 and IE7. Got to work on the centercontent area now, for some reason it is going out of sync. thanks for your help, who would have though that that one line of code for the 3 pixel jog was stopping it working.Wonder what happens now, if it finds a 3 pixel jog? Sometimes I think this is all too much for me.
sticks464



Joined: 31 Dec 2006
Posts: 993

PostPosted: Fri May 09, 2008 6:28 pm     Reply with quote

You don't need the code for a 3 pixel jog except for side by side floated elements. Since the elements you were floating were 100% width it was unnecessary to apply a float and therefore the 3 pixel fix was not needed.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial