Forum Moderators: not2easy
Ok, i have a few problems with a site i've been building. I got to a point where many of the pages were built and the client (a friend's parent) was happy with the site.
I'm not a designer/coder by day but i know enough to get by (normally!). The CSS layout i'm using works fine in IE7, Firefox, Opera and all earlier versions of IE apart from IE6. In IE6 the right and left column both display over to the left instead of centered. I've had a look forums and tried different things but nothing seems to sort it out.
Also the small left hand menu uses a css rollover effect which goes mental in IE6 (menu items overlap one another, etc).
Does anyone know what i've done wrong? The site in question is in my profile ;)
Many thanks in advance,
Will
Many designers use specific style sheets for certain browsers that will not display pages as they have set out, their are other ways of getting specific browsers to display how you want but this involves placing 'hacks' into your style sheet.
I as do many others use this way, here I have specified that any users on browser IE6 will be directed to styles different than your original style sheet. Place this line below your original style sheet and above </head>
<!--[if IE6]><link rel="stylesheet" type="text/css" media="screen" href="ie6.css" /><![endif]-->
Now for the fun part, create a 2nd emply style sheet and call it what you want, here i have called mine ie6, dreamweaver automatically adds .css
This is where it get usefull, say I have created a div called info:
<div id="info"></div>
Info div has black border, white inner and is 100px x 100px with a margin of 50px from the left.
IF IE6 does everything right but places the 'info' div say 30px from the left, here is how to sort it.
In your new IE6 style sheet you could add this:
div#info {
margin-left: 70px;
}
What I have done here is left all the other css rules the same as the original style sheet, ie border/background ect and JUST targeted the margin-left. You would of course need to play around with the IE measurements and check they look in the same place. I personally do this by checking in one browser, minimizing and then checking in another and flipping back and forth to see any positioning changes.
I hope this helps, im only on intermediate CSS level stuff so some of the great guys/gals way more advanced than me in here may have a completely better option.
Take care dude, happy CSS'ing
Geoffb
<!--[if IE 6]>
For more to read on the subject:
[webmasterworld.com...]
Does anyone know what i've done wrong? The site in question is in my profile ;)
As to specifically why your site is messing up in IE6, you'll need to paste a code example (and your DOCTYPE)... I see no link in your profile :? It *may* still be possible to serve all browsers with the same stylesheet.
body {
margin: 20px;
padding: 0px;
font: .75em/1.5em Arial, Helvetica, sans-serif;
color: #666666;
background-image: url(../images/bg_main.png);
background-repeat: repeat-x;
background-color: #B3B3B3;
}
p {
margin-top: 0;
}
em {
font-family: Georgia, Times, "Times New Roman", serif;
}
.header {
width: 715px;
margin: 0 auto;
background-color: #DDDDDD;
}
.content {
width: 700px;
margin: 0 auto;
background-color: #DDDDDD;
padding: 20px 5px 10px 10px;
}
.header {
border-bottom: 3px solid #999999;
/*padding-bottom: 1.0em;*/
/*margin-bottom: 1.0em;*/
}
.textlink {
font-size: 9px;
}
.leftcol,.rightcol {
position: absolute;
top: 0;
left: 0;
}
.leftcol{
width: 200px;
left: -23px;
}
.rightcol{
width: 484px;
left: 200px;
}
.clear_children,.cc_tallest {
position: relative;
}
/*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
#subnav ul {
list-style-type: none;
}
#subnav li {
list-style-type:none;
height: 16px;
display: block;
/*margin-bottom: 5px;*/
background-image: url(../images/subnav.gif);
}
#subnav a:link, #subnav a:visited {
text-decoration:none;
display: block;
height: 16px;
line-height: 15px;
font-weight: normal;
padding-left: 20px;
color: #fff;
}
#subnav li.current a:link, #subnav li.current a:visited {
color: #D46669;
}
#subnav a:hover, #subnav a:active {
background-image: url(../images/subnav-over.gif);
}
#subnav li.current a:hover, #subnav li.current a:active {
color: #f50;
}
h1 {
font-size: 1.80em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
color: #C04E01;
}
h2 {
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
color: #A2723E;
}
h3 {
font-size: 0.77em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
color: #111;
}
h4 {
font-size: 0.7em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
}
.product_title {
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
color: #666666;
}
.prices {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-weight: bold;
color: #A2723E;
}
.bold {
font-weight:bold;
}
a{
text-decoration: none;
color:#990000;
}
a:hover{
text-decoration: underline;
}
.product_image{
border: #990000 solid 1px;
margin: 0px 14px 4px 4px;
}
And here's the HTML for the homepage:
<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Meta" --><title>Past Time Gifts - 50th, 60th and 70th Birthday Presents</title><!-- InstanceEndEditable -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><a href="index.html"><img src="assets/images/pasttimegifts.jpg" alt="Past Time Gifts" width="715" height="100" border="0" title="Past Time Gifts" /></a></div>
<div class="content clear_children">
<div class="leftcol">
<br />
<ul id="subnav">
<li><a href="index.html">Home </a></li>
<li><a href="unique-gifts/index.html">Unique & Unusual Gifts </a></li>
<li><a href="personal-gifts/index.html">Personal Gifts </a></li>
<li><a href="books-dvd-music/index.html">Books, DVDs & Music </a></li>
<li><a href="toys-games/index.html">Toys and Games</a></li>
<li><a href="food-fayre/index.html">Food Fayre </a></li>
<li><a href="why-buy.html">Why Buy?</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
<p align="center" style="margin-left: 39px;"><img src="assets/images/free-giftwrap.jpg" alt="Free Gift Wrapping & Personal Message with every order" width="160" height="175" /></p>
<p align="center" style="margin-left: 39px;"><img src="assets/images/paypal.jpg" alt="We accept major debit and credit cards using PayPal" width="160" height="140" /></p>
</div>
<div class="rightcol cc_tallest">
<!-- InstanceBeginEditable name="MainContent" -->
<h1>Looking for a 50th Birthday Present?</h1>
<p style="margin-top: -8px;"></p>
<h2>We specialise in 50th, 60th and 70th birthday presents</h2>
<p style="margin-top: -6px;">Unsure of what to buy your grandparents, parents,
elderly relatives or in fact anyone over the age of 50? We offer an ideal
personalised gift for any occasion such as birthday, anniversary, retirement
or Christmas.</p>
<p class="product_title"><a href="unique-gifts/index.html"><img src="assets/images/unique-unusual.jpg" alt="Unique & Unusual Gifts" width="200" height="150" align="right" class="product_image" />Unique & Unusual
Gifts</a> </p>
<p>Ideal presents for Grandparents or Parents. Looking for the perfect 60th
birthday gift or special anniversary we have the very thing. From a unique
memory gift tin, exclusive to Past Time Gifts, to beautiful gifts of elegant
tableware.</p>
<p> <a href="memory-tins.html" class="prices">View all Unique & Unusual Gifts</a></p>
<br />
<br />
<p class="product_title"><a href="personal-gifts/index.html"><img src="assets/images/personal-gifts.jpg" alt="Personal Gifts" width="200" height="150" align="right" class="product_image" />Personal Gifts</a> </p>
<p>Finding it difficult to find that something special for Grandma, Grandad,
Mum, Dad or elderly relative? We have the perfect solution, with both useful
presents and practical gifts for any birthday, retirement or Christmas.</p>
<p> <a href="memory-tins.html" class="prices">View all Personal Gifts</a></p>
<br />
<br />
<p class="product_title"><a href="books-dvd-music/index.html"><img src="assets/images/books-dvds-cds.jpg" alt="Books, DVDs and Music" width="200" height="150" align="right" class="product_image" />Books,
DVDs & Music</a></p>
<p>Our specially selected range of books, DVDs and CDs are ideally suited
for the older generation. For those in their 60s, 70s or 80s our personalised
choice of birthday or anniversary gifts are sure to please even the most
discerning.</p>
<p> <a href="memory-tins.html" class="prices">View
all Books, DVDs & Music</a></p>
<br />
<br />
<p class="product_title"><a href="toys-games/index.html"><img src="assets/images/toys-games.jpg" alt="Toys and Games" width="200" height="150" align="right" class="product_image" />Toys and Games</a> </p>
<p>Let memories be rekindled as Grandma and Grandad show the younger generation
the toys and games of their childhood. All will enjoy the traditional selection
of classic toys of yesteryear, an ideal gift for children of all ages.</p>
<p> <a href="memory-tins.html" class="prices">View all Toys & Games</a></p>
<br />
<br />
<p class="product_title"><a href="food-fayre/index.html"><img src="assets/images/food-fayre.jpg" alt="Food Fayre - Tea, Sweets and more" width="200" height="150" align="right" class="product_image" />Food Fayre </a></p>
<p>Select from our unusual fayre of old fashioned sweets and traditional
gift of world finest teas. A wonderful present for any elderly relative
or friend, which will be thoroughly enjoyed and always appreciated. A real
winner!</p>
<p> <a href="memory-tins.html" class="prices">View all Food Fayre </a></p>
<p> </p>
</div>
<!-- InstanceEndEditable -->
<p align="right" class="textlink"><a href="index.html">Home</a> ¦ <a href="unique-gifts/index.html">Unique
and Unusual</a> ¦ <a href="personal-gifts/index.html">Personal Gifts</a> ¦ <a href="food-fayre/index.html">Food
Fayre</a> ¦ <a href="books-dvd-music/index.html">Books, DVDs & Music</a> ¦ <a href="toys-games/index.html">Toys & Games</a> ¦ <a href="why-buy.html">Why
Buy?</a><br />
<a href="payment-shipping.html">Payment & Shipping</a> ¦ <a href="returns-policy.html">Returns
Policy</a> ¦ <a href="contact-us.html">Contact
Us</a> ¦<a href="sitemap.html">Sitemap</a> ¦ All Content Copyright
MBM Gifts 2007 ©<br />
<span style="margin-left: 39px;"><img src="assets/images/fd.jpg" alt="Site by FiberDesign" width="104" height="25" /></span></p>
</div>
<script type="text/javascript" src="assets/script/si-clear-children.js"></script>
</body>
<!-- InstanceEnd --></html>
I'm pretty sure the HTML validates ok but the CSS could be a different matter!
(I'll check my profile to make sure the site is listed in it)
Thanks again,
Will
The problems are with your CSS.
Problem 1 - left and right cols appearing over to the left in IE6. ie. your layout is not being centred. This is because of this line in your CSS:
/*\*/* html .clear_children { display: inline;}/**/I really don't *think* you need it! IMO just delete it! :o This solves the problem! This is a combination of hacks ("backslash comment" and "* html") that supposedly targets just IE5 Win (according to the documentation in your JS, IE5 Win requires display:inline to be set in this case) - but I tried your code in IE5 Win and it *seems* to work OK without, and besides IE5 is an *OLD* browser. You do not want to set display:inline (in this case) in any other browser, but the problem is that this hack also targets IE6!
I'm no expert on hacks (best avoided), but... The 'backslash comment' hack hides that style from IE5 Mac (another *OLD* and possibly long-gone browser). The '* html' (star-html) hack specifically targets just IE, but not IE7 in 'standards mode' (they 'fixed' it).
If, however, you decide that you do still badly need this rule for IE5 Win, then use a conditional comment as mentioned above...
<!--[if IE 5]>
.clear_children {display: inline;}
<![endif]-->
Problem 2 - "left hand menu uses a css rollover effect which goes mental in IE6 (menu items overlap one another, etc)."
This is because you are setting the initial background-image on the <li> but setting another background-image on the a:hover. Only set the background-image on the <a> and not on the <li> (in this case). IE6 is just not clearing the :hover correctly - forcing the page to redraw (like resizing the window slightly) clears it.
#subnav li {
list-style-type:none;
height: 16px;
display: block;
/*margin-bottom: 5px;*/
/*background-image: url(../images/subnav.gif);*/ /* REMOVE THIS */
}#subnav a:link, #subnav a:visited {
text-decoration:none;
display: block;
height: 16px;
line-height: 15px;
font-weight: normal;
padding-left: 20px;
color: #fff;
background-image: url(../images/subnav.gif); /* PUT IT HERE! */
}
Thanks a lot for taking a look at the code. The layout issues look to be fixed now (phew!)
However, the menu is still playing up. It seems to overwrite the text when you mouseover and sometimes displays small parts of other images. Very strange.
Will
However, the menu is still playing up. It seems to overwrite the text when you mouseover and sometimes displays small parts of other images. Very strange.
Yeah, that was Problem 2, as mentioned above. Although I was able to sort this by simply removing the background-image from the #subnav li rule (the <li> tag) and putting it on the #subnav a:link, #subnav a:visited rule (the <a> tag) - which is more logical - and having tested it, it did solve the problem. (You are currently setting the mouseover image on the a:hover rule which is correct.)
Note, in the code snippet above, I have just commented out (/*...*/) the style rule from the <li> tag, as opposed to actually removing it, so you can see where it was.
If you have tried this already, and it's still not playing ball, then paste your edited CSS back here for another look (just down to the h1 { line).
Thanks again for your reply.
The menu still isn't working quite right. When i mouseover the links in IE6 (i'm using multiple IE installs on an XP machine) i either get a flicker of the above link or the image below in the background. It's quite hard to explain and so i've taken a screenshot of what i see.
I've put the link to the screenshot in my profile, if you could take another look i'd be most grateful!
Here's the code i have now.
body {
margin: 20px;
padding: 0px;
font: .75em/1.5em Arial, Helvetica, sans-serif;
color: #666666;
background-image: url(../images/bg_main.png);
background-repeat: repeat-x;
background-color: #B3B3B3;
}
p {
margin-top: 0;
}
em {
font-family: Georgia, Times, "Times New Roman", serif;
}
.header {
width: 715px;
margin: 0 auto;
background-color: #DDDDDD;
}
.content {
width: 700px;
margin: 0 auto;
background-color: #DDDDDD;
padding: 20px 5px 10px 10px;
}
.header {
border-bottom: 3px solid #999999;
/*padding-bottom: 1.0em;*/
/*margin-bottom: 1.0em;*/
}
.textlink {
font-size: 9px;
}
.leftcol,.rightcol {
position: absolute;
top: 0;
left: 0;
}
.leftcol{
width: 200px;
left: -23px;
}
.rightcol{
width: 484px;
left: 200px;
}
.clear_children,.cc_tallest {
position: relative;
}
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
#subnav ul {
list-style-type: none;
}
#subnav li {
list-style-type: none;
height: 16px;
display: block;
/*margin-bottom: 5px;*/
}
#subnav a:link, #subnav a:visited {
text-decoration:none;
display: block;
height: 16px;
line-height: 15px;
font-weight: normal;
padding-left: 20px;
color: #fff;
background-image: url(../images/subnav.gif);
}
#subnav li.current a:link, #subnav li.current a:visited {
color: #D46669;
text-decoration: none;
}
#subnav a:hover, #subnav a:active {
background-image: url(../images/subnav-over.gif);
}
#subnav li.current a:hover, #subnav li.current a:active {
color: #f50;
}
Thanks,
Will
...When i mouseover the links in IE6 (i'm using multiple IE installs on an XP machine) i either get a flicker of the above link or the image below in the background. It's quite hard to explain...
As hard as it might be to explain, it does sound very much like the effect I was getting too. (Although I still can't see any link in your profile?!) However, I'm not running multiple IE installs.
It may sound silly, but have you cleared your browser cache?
Apart from that I can only really offer a couple of minor suggestions...
[1] Try setting a background-color as well as an image. It is always good practise to set a background-color in case the background-image does not show. The image should always appear on top of the colour.
[2] You don't want the background to repeat, so set background-repeat:no-repeat.
To set all properties (including the position - 0 0), you could use the shorthand:
background:#f00 url(../images/subnav.gif) 0 0 no-repeat;
...and set these properties for both rules.
[3] Instead of using the selector:
#subnav a:link, #subnav a:visited { #subnav a { And for:
#subnav a:hover, #subnav a:active { #subnav a:hover { Hope that helps.
Brilliant, the first point seems to have fixed the menu!
I've used the second point as well for good practice. Thanks for the quick reply and great help.
I think the link doesn't appear in my profile because i'm not a "member"? Anyway, just take out all the spaces and the the site is at www. past time gifts .co .uk (i'm not sure if thats allowed? I know i'm not allowed to put a working link though)
Many, many thanks,
Will
