FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

IE CSS problems

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


GB
Hello,
I've done a lot of helping and critiquing of your websites, and now I need some help on one of mine.



As you can see, in all IE browsers (pictured is IE 5.23 for Macs, but it occurs in IE6 as well) there are mysterious gaps in the background. I used CSS tables to construct the site and it works in standards compliant browsers such as Firefox and Safari (no gaps).

Basically, the way it is constructed is three CSS tables, and each table is divided into three horizontal boxes. A background image is applied to each cell and is set to repeat-x so that the image scales with the rounded box. To make the footer, I used a .clearfix:after from Position is Everything. Now I need to find the problem and the fix for the gaps. Do you know what the IE fix is for it?

My CSS code:
Code:

.colcont_head { position: relative; top: 20px; width: 100%; height:75px ; min-width: 600px; max-width: 1000px; }
.colboxleft_head {
   background-image: url(images/top-left.jpg);
   background-repeat: no-repeat;
   width:30px;
   height: 75px;
   float:left
   }
.colboxright_head {
   background-image: url(images/top-right.jpg);
   background-repeat: no-repeat;
   width:35px;
   height: 75px;
   float:right;
   }
.colboxmiddle_head {
   background-image: url(images/top.jpg);
   background-repeat: repeat-x;
   width:auto;
   margin-left:30px;
   margin-right:35px;
   }
.colcont_footer {
   width: 100%;
   height:35px;
   min-width: 600px;
   max-width: 1000px;
   }
.colboxleft_footer {
   background-image: url(images/bottom-left.jpg);
   background-repeat: no-repeat;
   width:30px;
   height:35px;
   float:left
   }
.colboxright_footer {
   background-image: url(images/bottom-right.jpg);
   background-repeat: no-repeat;
   width:35px;
   height:35px;
   float:right
   }
.colboxmiddle_footer {
   background-image: url(images/bottom.jpg);
   background-repeat: repeat-x;
   width:auto; height:35px;
   margin-left:30px;
   margin-right:35px
   }
.twocolcont_header {
   width:100%;
   min-width: 600px;
   max-width: 1000px;
   padding: 10px;
   }
.twocolboxl_header {
   width:50%;
   float:left;
   }
.twocolboxr_header {
   margin-left:50%;
   width:auto;
   }
.colcont_main {
   width: 100%;
   overflow: hidden;
   min-width: 600px;
   max-width: 1000px;
   }
.colboxleft_main {
   background-image: url(images/leftside.gif);
   background-repeat: repeat-y;
   width:205px;
   height: 100%;
   float:left ;
   /* hide from IE mac \*/
   margin-bottom: -9999px;
   padding-bottom: 9999px;
   /* end hiding from IE5 mac */
   }
.colboxright_main {
   background-image: url(images/rightside.gif);
   background-repeat: repeat-y;
   width:210px;
   height: 100%;
   float:right;
   /* hide from IE mac \*/
   margin-bottom: -9999px;
   padding-bottom: 9999px;
   /* end hiding from IE5 mac */
   }
.colboxmiddle_middle {
   width:auto;
   height: 100%;
   margin-left:210px;
   margin-right:205px;
   /* hide from IE mac \*/
   margin-bottom: -9999px;
   /* end hiding from IE5 mac */
   padding-right: 10px;
   /* hide from IE mac \*/
   padding-bottom: 9999px;
   /* end hiding from IE5 mac */
   padding-left: 10px;
   }
.navcont_nav links {
   height: 30px;
   padding: 5px;
   }
.navbox_nav links {  }
#breadcrumb {
   bottom: 5px;
   position: relative;
   visibility: visible;
   }
#layer1 {
   bottom: 5px;
   position: relative;
   visibility: visible;
   }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
@media all and (min-width: 0px) {
.colboxleft_main, .colboxright_main, .colboxmiddle_middle
   {
   padding-bottom: 0;
   margin-bottom: 0;
   }
.colboxleft_main:after, .colboxright_main:after, .colboxmiddle_middle:after
   {
   content: '';
   display: block;
   background: inherit;
   padding-top: 9999px;
   margin-bottom: -9999px;
   height: 0;
   }
}


Thank you for any help you can offer. I can post the actual web page if needed.
LukeakaDanish
I'm not sure whether it is possible to solve your problem within tables.

I do however have a suggested solution, which is actually very simple.

Change your site to floats.

Have one surrounding div, with the background. Then put floated elements inside it and let them control the height of the surrounding div.

Its that simple!

With div's and floats you'll generally get more predictable behaviour than tables. IE 5 and 6 still SUCK but fixes for various problems are well documented.


If it turns out to be impossible, my suggestion is that you always design the graphics for pages thinking HOW your going to make it into a page, not ONLY what looks pretty.
cavey
It would be better if you posted a link to your webpage so we could se the bug in action + all the code.
LukeakaDanish
cavey wrote:
It would be better if you posted a link to your webpage so we could se the bug in action + all the code.


I agree - without seeing the html, the css is almost useless.
GB
Hello,
Thanks for your replies. This is a link to the page.

@LukeakaDanish: I will try the surrounding div with the background, but will I be able to control it so that rounded corner box can extend horizontally and vertically depending on the user's screen and length of content?

I did design this with thought to how it would work. To this end the rounded box is split into 8 different sections:

1 2 3
4    5
6 7 8

Where sections 2, 4, 5, and 7 are thin images that are set to repeat-x or repeat-y depending on if it is to expand horizontally or vertically.
LukeakaDanish
Here's a quick example of what i think WILL do that design without any IE problems:

Code:
<div style="background-image: url(horisontal_border.png); background-repeat: repeat-x;">

    <div style="background-image: url(vertical_border.png); background-repeat: repeat-y;">

        <img src="top_left_corner.png" style="position: absolute; top: 0px; left: 0px;" />
        <img src="top_right_corner.png" style="position: absolute; top: 0px; right: 0px;" />
        <img src="bottom_left_corner.png" style="position: absolute; bottom: 0px; left: 0px;" />
        <img src="bottom_right_corner.png" style="position: absolute; bottom: 0px; right: 0px;" />

        <div style="width: 100%;">

            <!--PUT THE CONTENT HERE-->

        </div>

    </div>

</div>


- Hope that helps...
Dragonfly-online
Well, i dont see why anyone at all uses IE 6 or below anymore anyway. It has SOOOOOO many security and CSS flaws.. so little control over anything... I would very much reccomend firefox over IE anyday. And if you have alot of ram, i would use Opera anyway.
LukeakaDanish
Dragonfly-online wrote:
Well, i dont see why anyone at all uses IE 6 or below anymore anyway. It has SOOOOOO many security and CSS flaws.. so little control over anything... I would very much reccomend firefox over IE anyday. And if you have alot of ram, i would use Opera anyway.


There may not be any real reason, but fact-of-the-matter is that A LOT of users use IE6 - and will continue to do so for at least another year or two (IE5.5 still isn't entirely gone)

Also, 99% of users dont care about CSS flaws, and a fair few dont understand that using another browser doesnt mean using another internet.
GB
Quote:
and a fair few dont understand that using another browser doesnt mean using another internet.

True. I remember reading and also observing users who type the full web address (http://www. et al.) into a Yahoo or Google search page and then click on it when it shows up in the search results. The book I read, Don't Make Me Think by Steve Krug, showed that they thought that Google or Yahoo was the internet!

In any case, backwards compatability is important to this site and most others as you cannot control which browser people will use to access your site.

Thank you for your help I will definitely try your suggestion, LukeakaDanish. Fortunately, the current design looks a little better in IE7, but I definitely want to find a way to make it look pretty good in IE6.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.