HTML/CSS issue

[AttackBunnyPro]

So, I have a page which looks fine in most browsers, but has problems with Internet Explorer and Opera.

This contains screenshots of all of the browsers, etc. http://browsershots.org/http://www.attackbunnygames.com/test.php

This is the CSS that is probably affecting it:

body
{ font-family: calibri;
background-color: black;
color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
font-size: 18px;
}
div.loginBox
{
height: 96px;
margin: 4px;
background-color: #0094FF;
float: right;
width: 520px;
}
div.navBox
{
height: 96px;
margin: 4px;
background-color: #7F0000;
float: right;
width: 520px;
}
div.newsBox
{
margin: 4px;
background-color: #B200FF;
float: left;
width: 264px;
}
div.currBox
{
margin: 4px;
background-color: #0094FF;
float: left;
width: 264px;
}
div.aboutBox
{
margin: 4px;
background-color: #FDB739;
float: right;
width: 520px;
}
div.gamesBox
{
margin: 4px;
background-color: #7FFF8E;
float: right;
width: 520px;
}

 

[kbjradmin]

use a condition comment tag to add some css for only ie.

<!--[if IE]><link rel="stylesheet" href="ie.css" /><![endif]-->

 

[ichwar]

yes, use that code for ie

I'm not sure about opera though. try a google search on opera conditional comments.

 

[RRJJMM]

You might get more consistent results across browsers if you try something like this:

create an outer "wrapper" for centering.
build a header within the wrapper.
add an internal wrapper for your main content.
create a two column layout with the "main content" div.

There are several examples of how to produce a two column layout here. It is possible that they have a better way of organizing your entire page than I suggested. Anyway, once you have the two column layout constructed, adding your colored boxes within one of the columns as "classes" should be relatively easy.

I hope this helps. My experience is limited by I have found by experimentation that grouping elements within wrappers tends to make things more predictable.

Good Luck,

 

[libecono]

Perhaps you could put "width: 800px;" in a div which you put directly under the body instead of formatting the body. It could be possible that IE and Opera don't accept CSS for the body.

 

[kbjradmin]

It could be possible that IE and Opera don't accept CSS for the body.

i'm not sure about opera, but i'm pretty sure ie does.

 

[freecrm]

I have this problem a lot so I have written a simple page (in php) that will allow you to alter .css and test it without having to change- upload-test etc.

The page layout already has the standard container/header/content/columns/footer layout so you can just play around with it.

Just remember to change the extention to .php before you ftp to the server.

Hope it helps.

 

[libecono]

Alternatively, you can use Firebug (extension for Firefox), if you want to test modifications to html or css (even when surfing across the internet, you can instantly view and edit the source, because the result is only applied temporarily).