First aid needed - compatibility - FF - IE - CSS

[lironl]

Hello!

I'm new to css (like everyone in the beginning... ).


Last Thursday I've decided for the first time to try and seriously understand what I can do with css (new potential costumers should see the gallery - that gave me the push).
My method was very primitive, like some other mammals I was trying to pull every lever possible (some of them accidentally) and go with a good outcome.
In other words I didn't really understand what I was doing (mostly copy-paste-give credit if it works - many thanks to flemmingbo - http://www.pbase.com/flemmingbo/main - for inspiration and some of the code).
Never mind that, at what I was thinking to be the end I was satisfied with the general result.
That was yesterday.
Today I opened my satisfying page with Internet Explorer for the first time .
It doesn't look good.

I was working with Mozilla Firefox and web developer. With Firefox everything works fine but with IE (7) I'm loosing the html background (I hope I describe it correctly).

Anyway, I'm pulling my hair now, help is needed.
I would be thankful.

Here's my page: http://www.pbase.com/lironl

Thank You very much.
Liron

[alangrant]

I just looked at your root gallery in IE7 and FF. The difference didn't seem that big to me - just that in Firefox there are black areas to the right and left that don't appear in IE. Is that the difference you are talking about?

[lironl]

Since posting I've managed to fix some of the problems, assisted by previous posts.
Panic is over.
Now it's acceptable in both browsers except for the html background (dark margins at both sides of the page) that gets lost with Internet Explorer.
If anybody has any fix to share I'd be grateful.

Thanks Alan, for paying attention. You are right, it's not such a difference now.

Liron

[flemmingbo]

Great work, and thanks for crediting me in your css!!!

Exact same thing happened to me - I tried resizing my sub galleries using "width" on BODY and it looked great in Firefox. But.....IE doesn't understand this

So I did some serious IE CSS hacking to get my gallery pages (not the front page, but my galleries) working in IE. In every sub gallery I am importing this CSS in the description using STYLE:

Code: Select all

/*
CSS to import to style Gallery pages ONLY!
Flemming Bo Jensen Photography - www.flemmingbojensen.com
I am using underscore hack to create some IE only stuff
*/

HTML
{
  background : rgb(111,106,99) url(http://www.pbase.com/image/90494255/original.jpg) repeat-x fixed;
}

BODY
{
_background : rgb(111,106,99) url(http://www.pbase.com/image/90494255/original.jpg) repeat-x fixed;
  width:860px;
  margin-left:auto;
  margin-right:auto;
}

TABLE
{
_background: white;
_width:860px;
}

#PAGE-1
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}

#PAGE-2
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}

#PAGE-3
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}
#PAGE-4
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}
#PAGE-5
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}
#PAGE-6
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}
#PAGE-7
{
_background : white;
_width:860px;
_margin-left:auto;
_margin-right:auto;
}


It uses the "underscore" hack, meaning only IE will understand all the definitions with underscore, so in IE I am actually loading the background image for the BODY, and resizing the PAGE-1 etc divs. Gets a bit confusing, but it works like a charm

regards,

Flemming

[dang]

Hi,
I had a look with Safari also, and it's the same as with Firefox and really looks nice. Unfortunately, I'm not aware of an easy fix either. I took a different approach to IE reading the entire table as 100%, using a "wrapper" in my "root" gallery. Once added to the CSS, it needs division tables for each section within the html description also.

If you view the CSS in my root gallery, you'll see multiple sections as such:

Code: Select all

#wrap {
background: #D8D0BB;
color: black;
border:  none;
margin: 0 auto;
width: 790px;
}

#header {
color: gray;
clear: both;
margin: 0px 0em 0px 0em;
padding: 0;
height: 75px;
background-color: #000000;}

#header h3 {
width: 350px;
margin: 0px 0px 0px 15px;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: right;
color: #a0a0a0;
margin: 0px 20px 0px 0px;
font-size: 0.8em;
line-height: 1.2em;
height: 35px;}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;


Which is then followed in the html with corresponding division ID's containing the content between each:

Code: Select all

<center><div id="wrap">
</div>
****************
<div id="header"><br>
<h3>Dang</h3>
</div>
***************
<div id="content">
</div>
***************
<div id="avmenu">
<h2 class="hide">Menu:</h2>
***************
<div id="footer">


Of course, I used different coding in my gallery pages, which is more basic. As Flemming said, it gets confusing. So I generally look for coding on the web I can adapt with permission.

[lironl]

Thank you both.

Flemming you've been very helpful to me, even more than you know. I reviewed your galleries many times and I find them interesting and well designed.

Thank you too dang, your galleries are very informative and I find this info interesting and useful.

As for me, In the meanwhile Firefox users will enjoy slightly better design visiting my galleries.

Liron.