| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 390
|
 Posted: Tue Apr 22, 2008 6:23 am problem with ie6 |
 |
|
|
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: 892
|
| Posted: Tue Apr 22, 2008 6:52 pm |
|
|
|
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: 390
|
| Posted: Wed Apr 23, 2008 1:56 am re |
|
|
|
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: 892
|
| Posted: Wed Apr 23, 2008 3:26 am |
|
|
|
| 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: 390
|
| Posted: Fri Apr 25, 2008 2:24 pm re |
|
|
|
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: 892
|
| Posted: Fri Apr 25, 2008 7:14 pm |
|
|
|
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: 390
|
| Posted: Thu May 08, 2008 3:01 pm re menu list in IE6 and IE7 |
|
|
|
| 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: 892
|
| Posted: Thu May 08, 2008 4:22 pm |
|
|
|
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: 390
|
| Posted: Thu May 08, 2008 4:38 pm re |
|
|
|
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: 892
|
| Posted: Thu May 08, 2008 7:39 pm |
|
|
|
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: 390
|
| Posted: Fri May 09, 2008 1:36 pm re |
|
|
|
| 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: 390
|
| Posted: Fri May 09, 2008 3:14 pm re |
|
|
|
| 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: 892
|
| Posted: Fri May 09, 2008 6:28 pm |
|
|
|
| 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. |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
