PDA

View Full Version : css code issue with IE6



trigger_tre
Nov 22nd, 2006, 03:06 AM
OK I have a few problems.

I have tested in FireFox and IE7 and the site renders properly. However, testing in IE6 I get a few minor errors.

Here is the page in question... http://bettyscountry.com/testpage.php

Ok, and here is the css code I have so far.


html, body {
margin:0;
padding:0;
background:#FFF;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
body {
padding:10px 0;
}
#wrapper {
width:960px;
margin:auto;
background:#030;
}
#header {
line-height:0px;
font-size:0;
width:900px;
height:90px;
padding:10px 30px 0px;
background:#030;
color:#FFF;
}
#navbar {
width:950px;
color:#030;
text-align:center;
padding:2px 5px 0px;
float:left;
background:#C93 url(images/rc_title.gif) repeat-x;
font-size:1.5em;
}
.subheadtitle {
width:220px;
height:50px;
color:#FFF;
float:left;
text-align:center;
padding:0px 10px;
line-height:55px;
margin:0;
font-size:2.0em;
}
#subheadleft {
width:720px;
height:165px;
background:#030 url(images/bg_subheadleft.gif) no-repeat;
float:left;
}
#subheadright {
width:240px;
height:140px;
padding:25px 0px 0px;
background:#030 url(images/nav_bottom.gif) repeat-x;
float:left;
}
#right-col {
width:220px;
padding:0px 10px;
float:right;
color:#030;
display:inline; /*fixes IE double margin bug*/
}
.rc-title {
width:210px;
padding:2px 5px 0px;
float:left;
color:#030;
text-align:center;
background:#C93 url(images/rc_titletop.gif) repeat-x;
font-size:1.5em;
}
.rc-content {
width:210px;
padding:10px 5px 5px;
float:left;
font-size:1.25em;
background:#FFF url(images/rc_content.gif) repeat-x;
}
#left-col {
width:720px;
float:left;
background:#FFF url(images/bg_leftcol.gif) repeat-y;
display:inline; /*fixes IE double margin bug*/
}
.product {
width:180px;
height:200px;
float:left;
}
.spacer-240 {
width:240px;
height:20px;
float:right;
}
.spacer-720 {
width:720px;
height:20px;
float:left;
}
.spacer-960 {
width:960px;
height:20px;
float:left;
}
a img {
border:0;
}
#toe {
height:20px;
width:960px;
clear:both;
}

#1.) the right column (id=#right-col) should have some space between it and the left column. However it is budding up against the left column.

#2.) the left column (id=#left-col) should start parallel with the right column. However, it is currently getting dropped below the the right column in IE6.

I think is some margin bug or display inline thing but all my attempts have failed.

thanks,

trigger

AJW06
Nov 22nd, 2006, 05:42 AM
#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}

#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}

#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}

try that if it don't work get back to me.

when you say problem with ie6 does that mean it works with other browsers?

why you using ie6 god that is old don't you know ie7 is out

trigger_tre
Nov 22nd, 2006, 06:06 AM
I have tested in FireFox and IE7 and the site renders properly. However, testing in IE6 I get a few minor errors.

I tested your code and it doesnt work. It actually caused FF and IE7 to act the way that IE6 does.

No, I dont use IE6 (I dont even use IE, I use FF) however building this site I would like it to be cross-browser compatible and concidering there are alot of people who still have IE6 this is currently an issue I would like to address.

any other suggestions?

_Aerospace_Eng_
Nov 22nd, 2006, 06:10 AM
No its not the double margin bug. If the right column came before the left column and you floated it right then it would work but in this case its after the left column so you need to float it left instead. Once you do this you need to clear your floats. Also what was up with those spacer divs? Why not just use margin? You had a case of divitis for your products, I think a list better suffices. Same goes for the right side nav. Also why did you float everything? That was part of your problem as well. Not everything needs to be floated. Try this

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Betty's Country Store</title>
<base href="http://bettyscountry.com/" />
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#FFF;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
body {
padding:10px 0;
}
#wrapper {
width:960px;
margin:auto;
background:#030;
}
#header {
line-height:0px;
font-size:0;
height:90px;
padding:10px 30px 0px;
background:#030;
color:#FFF;
}
#navbar {
color:#030;
text-align:center;
padding:2px 5px 0px;
background:#C93 url(images/rc_title.gif) repeat-x;
font-size:1.5em;
}
.subheadtitle {
width:220px;
height:50px;
color:#FFF;
float:left;
text-align:center;
padding:0px 10px;
line-height:55px;
margin:0;
font-size:2.0em;
}
#subheadleft {
width:720px;
height:165px;
background:#030 url(images/bg_subheadleft.gif) no-repeat;
float:left;
margin-bottom:20px;
}
#subheadright {
width:240px;
height:140px;
padding:25px 0px 0px;
background:#030 url(images/nav_bottom.gif) repeat-x;
float:left;
margin-bottom:20px;
}
#right-col {
width:220px;
padding:0px 10px;
float:left;
color:#030;
}
.rc-title {
padding:2px 5px 0px;
color:#030;
text-align:center;
background:#C93 url(images/rc_titletop.gif) repeat-x;
font-size:1.5em;
}
.rc-content {
padding:10px 5px 5px;
margin-bottom:20px;
font-size:1.25em;
background:#FFF url(images/rc_content.gif) repeat-x;
}
#left-col {
width:720px;
float:left;
background:#FFF url(images/bg_leftcol.gif) repeat-y;
}
.product {
margin-bottom:20px;
color:#000;
}
.product ul {
margin:0;
padding:0 20px;
list-style:none;
}
.product li {
width:170px;
height:200px;
float:left;
background:#030;
}
.rc-content ul {
margin:0 0 20px 0;
padding:0;
list-style:none;
}
.spacer-960 {
width:960px;
height:20px;
float:left;
}
a img {
border:0;
}
#toe {
height:20px;
width:960px;
clear:both;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/betty_logo.gif" alt="" /></div>
<div id="navbar">HOME</div>
<div id="subheadleft">
<h1 class="subheadtitle">Shop Online</h1>
</div>
<div id="subheadright"><img src="images/betty_sublogo.jpg" alt="" /></div>
<div class="clear">&nbsp;</div>
<div id="left-col"><img src="images/bg_space1.gif" alt="" />
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</div>
<div id="right-col">
<div class="rc-title">Online Products</div>
<div class="rc-content">
<ul>
<li>♦ Apparel</li>
<li>♦ Gifts</li>
<li>♦ Jams &#38; Jellies</li>
<li>♦ Salad Dressings</li>
<li>♦ Steak Sauces</li>
</ul>
</div>
<div class="rc-title">Shopping Cart</div>
<div class="rc-content">You currently have 0 item(s) in your shopping cart.</div>
</div>
<div class="clear">&nbsp;</div>
<div id="toe"></div>
</div>
</body>
</html>

trigger_tre
Nov 22nd, 2006, 06:30 AM
No its not the double margin bug. If the right column came before the left column and you floated it right then it would work but in this case its after the left column so you need to float it left instead.

Thats how I originally had it. But it didnt work so since I first posted I have been making several attempts to correct the problem. Moving the right column below the left column in my html code was just another attempt to see what might happen (I guess I never changed it back).

As for the spacer divs. Some were there so I could test things visually with confusing myself by constantly altering code for visual aspects of things. In the end the only spacer will be a 720wide x 20high pixel spacer between my products.

The reason for this was to have 4 products per row with unlimited rows. The products div tag wouldnt have an assigned height incase users alter text size. Considering that the text for various items wont all be the same....I added a spacer after each 4 items so each of the following rows would start off beling lined up evenly. hopefully that makes since.

I will go test your code now...

-trigger

AJW06
Nov 22nd, 2006, 06:46 AM
Is it ok if i have a look at the website source code and css?

AJW06
Nov 22nd, 2006, 06:55 AM
i am currently looking at the link now in ie6 i can't see either of the problems
there is a gap between the main and right col and they are parrel. make sure the

trigger_tre
Nov 22nd, 2006, 07:11 AM
thanks once again Aerospace,

I still have sooooo much to learn in respect to clean and functual coding.

My spacer tags were my interpretation of your .clear tag....I just didnt realize I could get the same result without the element actually needing to having any volume.

thanks once again.

-trigger

_Aerospace_Eng_
Nov 22nd, 2006, 07:15 AM
The clearing div was there to clear the floats, I actually added bottom margins to some of the divs. Read this to find out more about clearing floats.

http://www.positioniseverything.net/easyclearing.html

IE6 really doesn't need it but sometimes using it actually fixes some bugs.

trigger_tre
Nov 22nd, 2006, 07:24 AM
Hmmm,

One more problem popped up. This time it displays in both IE6 and IE7.

If you look below the 2nd and 3rd row for my products I get an extra wide vertical gap that isnt apparent after the 1st row.

Also in the right column under the Online products there is an extra wide gap (in white) at the end of the last item.

Again these display in both IE7 and IE6.

The only thing I altered was the changed the #right-col to float:right and then switched the location of the left and right columns in the html code.

your thoughts.

-trigger

EDIT
Okay the extra space below the items in the right column was just a matter of setting the margin under the rc-content ul to 0

_Aerospace_Eng_
Nov 22nd, 2006, 07:40 AM
They aren't problems, they are just things that I changed that you didn't even bother to study. You just copy and pasted everything.

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Betty's Country Store</title>
<base href="http://bettyscountry.com/" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background:#FFF;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
body {
padding:10px 0;
}
#wrapper {
width:960px;
margin:auto;
background:#030;
}
#header {
line-height:0px;
font-size:0;
height:90px;
padding:10px 30px 0px;
background:#030;
color:#FFF;
}
#navbar {
color:#030;
text-align:center;
padding:2px 5px 0px;
background:#C93 url(images/rc_title.gif) repeat-x;
font-size:1.5em;
}
.subheadtitle {
width:220px;
height:50px;
color:#FFF;
float:left;
text-align:center;
padding:0px 10px;
line-height:55px;
margin:0;
font-size:2.0em;
}
#subheadleft {
width:720px;
height:165px;
background:#030 url(images/bg_subheadleft.gif) no-repeat;
float:left;
margin-bottom:20px;
}
#subheadright {
width:240px;
height:140px;
padding:25px 0px 0px;
background:#030 url(images/nav_bottom.gif) repeat-x;
float:left;
margin-bottom:20px;
}
#right-col {
width:220px;
padding:0px 10px;
float:right;
color:#030;
}
.rc-title {
padding:2px 5px 0px;
color:#030;
text-align:center;
background:#C93 url(images/rc_titletop.gif) repeat-x;
font-size:1.5em;
}
.rc-content {
padding:10px 5px 5px;
margin-bottom:20px;
font-size:1.25em;
background:#FFF url(images/rc_content.gif) repeat-x;
}
#left-col {
width:720px;
float:left;
background:#FFF url(images/bg_leftcol.gif) repeat-y;
}
.product {
color:#000;
}
.product ul {
margin:0 0 20px 0;
padding:0 20px;
list-style:none;
}
.product li {
width:170px;
height:200px;
float:left;
background:#030;
}
.rc-content ul {
margin:0;
padding:0;
list-style:none;
}
a img {
border:0;
}
#toe {
height:20px;
width:960px;
clear:both;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/betty_logo.gif" alt="" /></div>
<div id="navbar">HOME</div>
<div id="subheadleft">
<h1 class="subheadtitle">Shop Online</h1>
</div>
<div id="subheadright"><img src="images/betty_sublogo.jpg" alt="" /></div>
<div class="clear">&nbsp;</div>
<div id="right-col">
<div class="rc-title">Online Products</div>
<div class="rc-content">
<ul>
<li>♦ Apparel</li>
<li>♦ Gifts</li>
<li>♦ Jams &#38; Jellies</li>
<li>♦ Salad Dressings</li>
<li>♦ Steak Sauces</li>
</ul>
</div>
<div class="rc-title">Shopping Cart</div>
<div class="rc-content">You currently have 0 item(s) in your shopping cart.</div>
</div>
<div id="left-col"><img src="images/bg_space1.gif" alt="" />
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</div>
<div class="clear">&nbsp;</div>
<div id="toe"></div>
</div>
</body>
</html>

trigger_tre
Nov 22nd, 2006, 07:52 AM
They aren't problems, they are just things that I changed that you didn't even bother to study. You just copy and pasted everything.

No I tried my own way first SEVERAL times. I didnt even add your .product or any of the lists. or the clear tag or even use the way you ordered the HTML code. I actually switched the margins at first but it didnt work. So then I thought I would just copy your code to see it was something I did. But still got some of the same errors.

When I first posted this topic I had already spent about 3-4 hours trying to remedy my coding errors on my own and from researching thinking it might be margin errors or perhaps peekaboo bug. but nada.

So when I did finally copy and paste to see if it would work actually work, I had already been at this for hours.

trigger_tre
Nov 22nd, 2006, 07:58 AM
I actually edited an above post were I had altered the margin in the right column. getting it to work but didnt see what was causing the extra margin in the products.

I am not trying to be picky but I did study your code I actually opened open two windows side by side so that I could study your code next to mine. If I just was to copy code I would have posted this problem long before I wasted 3-4 hours on my own. And I did notice the changes to width sizes that didnt need to be their as well as display inline etc, etc.

-trigger

trigger_tre
Nov 22nd, 2006, 08:29 AM
Well I tried again but now FF leaves gaps at the top.

I think I might just use my original .products tag

thanks for your help,

-trigger

Solution to the problem:

I replaced your .clear tag in the html code with an 720 pixel width spacer and removed the margins. all is working now.:thumbsup:

_Aerospace_Eng_
Nov 22nd, 2006, 03:15 PM
Sighs. Thats not really a solution. If you are going to use the "spacer" div you might as well go back to using tables. CSS is there for a reason. There are also margins for a reason. Try this

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Betty's Country Store</title>
<base href="http://bettyscountry.com/" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background:#FFF;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
body {
padding:10px 0;
}
#wrapper {
width:960px;
margin:auto;
background:#030;
}
#header {
line-height:0px;
font-size:0;
height:90px;
padding:10px 30px 0px;
background:#030;
color:#FFF;
}
#navbar {
color:#030;
text-align:center;
padding:2px 5px 0px;
background:#C93 url(images/rc_title.gif) repeat-x;
font-size:1.5em;
}
.subheadtitle {
width:220px;
height:50px;
color:#FFF;
float:left;
text-align:center;
padding:0px 10px;
line-height:55px;
margin:0;
font-size:2.0em;
}
#subheadleft {
width:720px;
height:165px;
background:#030 url(images/bg_subheadleft.gif) no-repeat;
float:left;
margin-bottom:20px;
}
#subheadright {
width:240px;
height:140px;
padding:25px 0px 0px;
background:#030 url(images/nav_bottom.gif) repeat-x;
float:left;
margin-bottom:20px;
}
#right-col {
width:220px;
padding:0px 10px;
float:right;
color:#030;
}
.rc-title {
padding:2px 5px 0px;
color:#030;
text-align:center;
background:#C93 url(images/rc_titletop.gif) repeat-x;
font-size:1.5em;
}
.rc-content {
padding:10px 5px 5px;
margin-bottom:20px;
font-size:1.25em;
background:#FFF url(images/rc_content.gif) repeat-x;
}
#left-col {
width:720px;
float:left;
background:#FFF url(images/bg_leftcol.gif) repeat-y;
}
.product {
color:#000;
margin-bottom:20px;
}
.product ul {
padding:0 20px;
list-style:none;
}
.product li {
width:170px;
height:200px;
float:left;
background:#030;
}
.rc-content ul {
margin:0;
padding:0;
list-style:none;
}
a img {
border:0;
}
#toe {
height:20px;
width:960px;
clear:both;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.product ul {
height:1%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/betty_logo.gif" alt="" /></div>
<div id="navbar">HOME</div>
<div id="subheadleft">
<h1 class="subheadtitle">Shop Online</h1>
</div>
<div id="subheadright"><img src="images/betty_sublogo.jpg" alt="" /></div>
<div class="clear">&nbsp;</div>
<div id="right-col">
<div class="rc-title">Online Products</div>
<div class="rc-content">
<ul>
<li>♦ Apparel</li>
<li>♦ Gifts</li>
<li>♦ Jams &#38; Jellies</li>
<li>♦ Salad Dressings</li>
<li>♦ Steak Sauces</li>
</ul>
</div>
<div class="rc-title">Shopping Cart</div>
<div class="rc-content">You currently have 0 item(s) in your shopping cart.</div>
</div>
<div id="left-col"><img src="images/bg_space1.gif" alt="" />
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
<div class="product">
<ul>
<li>product</li>
<li>product</li>
<li>product</li>
<li>product</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</div>
<div class="clear">&nbsp;</div>
<div id="toe"></div>
</div>
</body>
</html>

Note: the div with class="clear" is NOT a spacer div.

I don't get it. People come here asking for help on sites that they are building for clients. Why even attempt to build something for a client if you can't do it on your own? That wasn't aimed at anyone in particular, its a general statement meaning more people seem to be doing it. Seriously if the site is for a client you shouldn't be asking for help on the site. That just shows you weren't the right person for the job in the first place.

trigger_tre
Nov 22nd, 2006, 05:30 PM
Sighs. Thats not really a solution. If you are going to use the "spacer" div you might as well go back to using tables.

That to me is just an ignorant comment. Using the same spacer tag a few times is in no way comparable to using tables.


CSS is there for a reason. There are also margins for a reason.

Duh! Your right CSS is there for a reason. Thats why I am using it. Its not my fault that IE6 cannot render the code properly and it has to be tricked into working properly. I had tried using margins earlier (2 weeks ago) but as I am still making alot of graphical and layout changes the margin bugs were annoying so I reverted to spacer div tag dividers to TEMPORARILY remedy the solution. I guess you missed that in an earlier post.


Note: the div with class="clear" is NOT a spacer div.

I never said it was. As I stated EARLIER I had inserted some spacer divs while I was still designing the site. I know what the clear:both property does and was already using it before I asked for help on this topic.


I don't get it. People come here asking for help on sites that they are building for clients. Why even attempt to build something for a client if you can't do it on your own? That wasn't aimed at anyone in particular, its a general statement meaning more people seem to be doing it.....

Sorry to burst your bubble but no one is perfect NOT EVEN YOU. Unless you just woke up one morning and knew everything there was to know about CSS and coding. Everyone has to start somewhere, as you your self did I am sure.


Seriously if the site is for a client you shouldn't be asking for help on the site.

I thought asking for help was the entire reason for this website. I see lots of people from professional sites post here for help on all sorts of stuff. NO ONE is limited to making mistakes or learning something new.


That just shows you weren't the right person for the job in the first place.

Perhaps your right. Perhaps she could have paid lots of money to have some professional company build a site for her. However, she didnt, she asked me and I agreed at a next to nothing price because of my current design and coding skills or lack of them. Where her business is located people arent used to paying large sums of money for websites. Perhaps thats why she doesnt already have a site :rolleyes:

Aerospace, let me say that I am grateful to your help on this matter as well as many other posts where you have been able to remedy some problems I had encountered. However, if helping others(newbies) upsets you then perhaps you should refrain from commenting.

I recommend some reading for you below:
http://www.codingforums.com/showthread.php?t=91276

-trigger

ahallicks
Nov 23rd, 2006, 09:48 AM
A little tip. When you can't understand why something does not look right, or there are extra large gaps, particularly in Firefox, why not get the colorZilla add-on and mix it with the EditCSS and when you click on the eye dropper and move it over the page it will highlight each individual div you have created with a small red dotted border so you can see where each div is being placed on the page. That way if something has the wrong width, or height or is not in the right place you can more easily see why.

For IE create a 1px red border around everything to see where they are being placed and what size they are showing at. This doesn't work in firefox because the 1px pushes everything around but seems to work fine in IE.

I definitely recommend getting the color/EditCSS mix tho because it becomes invaluable to designers of web pages with CSS as you can see, on the live site, where the browser is putting things. I also recommend getting the IETab addon for Firefox as it saves you having to use two browsers and simply renders IE in the Firefox Window :)