MyBB Community Forums

Full Version: Problems with theme while using IE
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hey! I got a little problem with my theme. When I see my site with Firefox, it works completely fine, but when I check it with IE (v.6), it shows all messed up.

Firefox: http://finpixel.org/graphics/bluebeig/bluebeig2.png
IE: http://finpixel.org/graphics/bluebeig/bluebeig1.png

And the site is of course http://finpixel.org

I really don't care about IE but I still would like to get it work. I've tried everything but I guess my skills just aren't enough. Smile
This belongs in the 'Templates, Theme Sets and Graphics' forum.
xiao Wrote:This belongs in the 'Templates, Theme Sets and Graphics' forum.
I thought about that but since I wasn't sure I put it in here since I thought I might get my answer quicker. Toungue
Look though the CSS of the themes header to see if everything is in order.
Jag100 Wrote:Look though the CSS of the themes header to see if everything is in order.
I've tried but I just can't find the problem. :/

Here's the css if you want to have a look:
http://finpixel.org/css.php?theme=5

And here is the code for the upper part:
http://sooda.dy.fi/paste/?eRi

I'm not really good with this kind of stuff so non of that will probably look very professional. Big Grin

  1. first you should change
    .top_img {
    background: url(images/rounded/bordertop.gif);
    width: auto !important;
    height: auto !important;
    }
    
    .lefttop_img {
    background: url(images/rounded/borderlefttop.gif);
    width: auto !important;
    height: auto !important;
    }
    
    to
    .top_img {
    background: url(images/rounded/bordertop.gif) top left repeat-x;
    height: 5px;
    }
    
    .lefttop_img {
    background: url(images/rounded/borderlefttop.gif) top left no-repeat;
    height:5px;
    width:5px;
    }
    
    the same way is for other: left, bottom...

    It's important: you need set
    no-repeat for corners,
    repeat-y for left/right
    repeat-x for top and bottom

    You can set width/height in style - but not to "auto" Smile

  2. Next you need change template "footer":
        <td width="5px" height="5px" class="leftbottom_img" valign="top">
    
    <img src="http://finpixel.org/images/rounded/borderleftbottom.gif" alt="borderleftbottom"/>
        </td>
        <td class="bottom_img">
        </td>
        <td width="5px" height="5px" class="rightbottom_img" valign="top">
    <img src="http://finpixel.org/images/rounded/borderrightbottom.gif" alt="borderrightbottom"/>
        </td>
    
    You have defined classes "leftbottom_img", "bottom_img", "rightbottom_img" but you don't have this in styles (additional css)
    So you can add this class - is like ".lefttop_img"

    next you can delete <img ... /> because you have background for TD in styles

if you use no-repeat, then always background image is painted only 1 time. Sometimes width of column or height of row can change, so image can be repeated (without this code)
. . .
You need do this for other borders/corners.

I hope i wrote this clear Smile
Hi one more time Smile

look for any <img src="...topleft.gif"> and top.gif, left.gif....
You have this in templates:
header,
footer,
welcome_xxxx

you can delete this.

In welcome_xxx you have:
<td height="5px" width="5px" id="w_topleft">

you need change this to
<td height="5px" width="5px" class="w_topleft">

and next you must add style .w_topleft.
The same way for w_topright, w_bottomleft/right

there you have valid additional css (i think is valid Wink )
.top_img {
background: url(images/rounded/bordertop.gif) top left repeat-x;
height: 5px;
}

.lefttop_img {
background: url(images/rounded/borderlefttop.gif) top left no-repeat;
height:5px;
width:5px;
}

.righttop_img {
background: url(images/rounded/borderrighttop.gif) top left no-repeat;
width: 5px !important;
height: 5px !important;
}

.left_img {
background: url(images/rounded/borderleft.gif) top left repeat-y;
width:5px;
}

.right_img {
background: url(images/rounded/borderright.gif) top left repeat-y;
width:5px;
}

.bottom_img {
background: url(images/rounded/borderbottom.gif) top left repeat-x;
height:5px;
}

.rightbottom_img {
background: url(images/rounded/borderrightbottom.gif) top left no-repeat;
height:5px;
width:5px;
}

.leftbottom_img {
background: url(images/rounded/borderleftbottom.gif) top right no-repeat;
height:5px;
width:5px;
}
.w_right {
background: url(images/welcome/right.gif) top left repeat-y;
width: 5px;
}

.w_left {
background: url(images/welcome/left.gif) top left repeat-y;
width: 5px;
}

.w_bottom {
background: url(images/welcome/bottom.gif) top left repeat-x;
height:5px;
}

.w_top {
background: url(images/welcome/top.gif) bottom left repeat-x;
height:5px;
}
.w_topleft {
background: url(images/welcome/topleft.gif) bottom left no-repeat;
height:5px;
width:5px;
}
.w_topright {
background: url(images/welcome/topright.gif) bottom left no-repeat;
height:5px;
width:5px;
}
.w_bottomleft {
background: url(images/welcome/bottomleft.gif) bottom left no-repeat;
height:5px;
width:5px;
}
.w_bottomright {
background: url(images/welcome/bottomright.gif) bottom left no-repeat;
height:5px;
width:5px;
}

I do this quickly, but i chack this on my localhost - everything look good
Thank you so much! Smile It did the trick! I really appreciate that you took your time to check up my messy code Smile Owe you one mate!
So.. If i do what was suggested the colors on my forum will look the same TO ALL no matter the browser?
there you can see safe colors: http://www.templatesforall.com/websafe.html
If i good remember IE have problem with "gold" color.

If you want rounded corners or something like: my test forum template you can make gif images with transparent color, or other file types, but "background" in this image must be the same like on your site background.

If you are not sure that some color look the same in all browsers, you can make small gif image e.g. 9x9 pixels filled in your color. Then you can put into css style something like:

background: url(url_to_gif);

Is much more to do, but it's working.

If you use repeat and gif's width 1px then some browsers can show this not correctly - you can have diagonal lines.
-------
If you want have image only in specific place (like top of TR/TD-element) you can do something like:

<TR class="myTR">...

and in the css:
.myTR {
background: url(...) top left repeat-x;
}

you can use 'bottom left' if image must be on the bottom of element

if you want have TD-element as a "border" of other element (like in Artsu's problem, you must define in css height & width - this should be the same as size of image.
Generally:
corners: set width & height & no-repeat
top/bottom: set height & repeat-x
left/right: set width & repeat-y

-------
The best practice is, if you have most popular browsers installed in your system.

-------
If you have TD with some backgroundImage with "repeat-x"
and you want put there an image (<IMG src="yourPicture".../> tag)
and height of "yourPicture" = height of the TD
then
sometimes IE can change TD-height, even if you have "height:10px".
So better is if "yourPicture" height is less than TD-height
If not: - IE you can render this really "not good"
-------
Maybe one more thing:
- IE have problem with empty cells (TD). If you have somewhere an empty cell, then IE don't show this correctly, so you need use & nbsp; code (without space after '&')
In myBB templates it's little not comfortable, because when you use this code in one tmplate, and later you want re-edit this... myBB editor don't show code & nbsp; only normal space. So you need always remember about change this space to & nbsp;

! If you want re-edit something, MyBB editor always change all html entities Sad not only 'space' so be care.


I hope that this info was what you require and is usefull Smile
Pages: 1 2