MyBB Community Forums

Other than a few tiny bugs my website is ready for opening, been integrating site and forum and with help from Scoutie44 and combus it has gone really well.

As I was happily checking everything over on my lovely FireFox I thought about other browsers.

Chrome Big Grin

Firefox

Safari

Opera

Internet Explorer Angry

I despise it, but instead of making a thread about my anger, I'll request some help with it!

This may be something really easy to solve but i'm not a valid coder, I just know the basics and usually how to make things tick.

The problem

Screenshots:

This is how it should look like showcased by firefox.

[Image: habbuz_firefox.jpg]

http://www.habbuz.net/habbuz_firefox.jpg

But thankyou IE we have this

[Image: habbuz_ie.jpg]

http://www.habbuz.net/habbuz_ie.jpg

Well here is selected code feel free to ask for the whole code/live preview and i'll send by PM.

CSS

#container {
	width: 850px;
	color: #808080;
	margin: auto auto;
	padding: 0 5px 0 5px;
	text-align: left; /* IE 5 fix */
}

#shadow_left {
        background: transparent url(images/habbuz/shadow_l.gif) top right repeat-y;
        width: 5px;
        display: table-cell;
        border-top: 0;
}

#shadow_right {
         background: transparent url(images/habbuz/shadow_r.gif) top left repeat-y;
         width: 5px;
         display: table-cell;
         border-top: 0;
}

#page {
        border: 1px solid #808080;
        padding: 0 5px 5px 5px;
        background: #fff;
        border-top: 0;
        margin: 0;
        display: table-cell;
}

Shadow left and right is what the problem is, as you can see on the left side of the screenshot where it goes to the top and makes a gap and does the same as the bottom.

Header code

<div id="container">
<div id="shadow_left"></div>
                <div id="page">

		<a name="top" id="top"></a>
		<div id="header">


                         <div id="panel">
				{$welcomeblock}
			</div>

<a href="{$mybb->settings['bburl']}/index.php"><img src="images/habbuz/logo.gif"></a>
<br class="clear" />
			<hr class="hidden" />

		</div>

			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
				</ul>
			</div>

		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			<navigation>
			<br />

Any help will be much appreciated.

Thanks,
Hapatio.

try adding this

html {
  margin: 0px;
  padding: 0px;
}

IIRC IE is one of the few browsers that thinks that <html> is a tag that needs it's own styling.

Edit: After taking a better look at the pictures due to lack of knowing what I was looking for, I have this to add:
Try this for container, and remove shadow_left and shadow_right, unless you absolutely need image borders:

#container {
    width: 850px;
    color: #808080;
    margin: auto auto;
    padding: 0 5px 0 5px;
    text-align: left; /* IE 5 fix */
    border-left: 5px solid #555;
    border-right: 5px solid #555;
}

Thanks for trying to help but I do really need the shadows Sad

Thanks anyway!

Anyone else? Feel free to PM me and i'll give you live website!

I believe it is the table-cell behavior which I used to emulate a table via divs which is causing the problem. If you remove shadow_left & shadow_right and use a fixed shadow (make an image to cover bothe side) it should fix the issue.

Alicksis

Firestryke31

Alicksis

Scoutie44