Why do IE & Firefox display some pages differently

[cits_4_pets]

Why do pages appear differently in different browsers?

I have a gallery that is displayed differently in IE 7 & FF 3. Why does this happen? IE could not even open one page until I deleted the video and lyrics scroller that I had changed their display size. I embedded them again using untweaked embedding code and the page loaded fine.
http://www.pbase.com/cits_4_pets/09_feb_pad is the new gallery and page style... In the gallery page, the border lines on the title look better in IE but is too close in FF. The thumbnail text works in FF but is different size in IE. The comments left boxes are only half way across the page in FF but margin to margin in IE.
The image page, the title box looks great in FF but does not have the background color in IE.

I checked my IE settings and did some tweaking but it did not change the look.
I did not know where to look in the forums & I am sure other people have had the same problem.

[mardoli]

Hello Flo!
As far as I know there is nothing you can do to force the two browsers to display your page exactly in the same way.
There are features which are visible in IE and not in Firefox and there are slight different also in the way they display the same element.
So in my opinion you have not to check your IE settings to solve the problems, but simply to check your style-sheet in both browsers and then to adapt it in a way that its look can be acceptable in both.
For example Firefox cannot display gradients filters effect, as IE, so if you adopt it in IE, use a suitable background colour in your style-sheet for that element, because Firefox users will see only the background colour, not the effect of the gradient filter.
I hope it can help.
Marisa

[mardoli]

Hello again,
I have given a quick look to your style-sheet...I think you need to fix some bugs.
As for your title border lines, try with this code, it seems that if works well in Firefox too

Code: Select all

h1, h2 {
        border:  #9999FF 3px ridge;
        margin-bottom: 1em;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        width: 100%;
        display: block;
        background:transparent;
        color:  #9999FF;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 10px;
        text-align: center;
        position: relative;
    }


I hope it can help you
Marisa

[mardoli]

Flo, I suggest you to check your style-sheet carefully, because there are several things to arrange in order to see it working well in FF and IE.
For example you complained because the title of the image doesn't show any background in IE, but you didn't set any background colour.
This is that part of your style-sheet

Code: Select all

.title {
      color:  #339933;
      font-size: 26pt Verdana, Arial, Helvetica, sans-serif;
       
font-style: normal;
     
     background:   ;
       
}

As you see there is not any value to indicate the background colour, so add one and you'll see it correctly.
for example

Code: Select all

.title {
      color:  #339933;
      font-size: 26pt Verdana, Arial, Helvetica, sans-serif;
       
font-style: normal;
     
     background: #ffff99   ;
       
}

Best
Marisa

[dougj]

A CSS that has been validated as error-free has a better chance of looking the same in different browsers. You can validate your CSS either with the Web Developer plugin for Fire Fox. After installing it, go to the tools menu and you'll see the option for CSS validation. Alternatively, you can go directly to the W3C validation site and entering in the URL: http://jigsaw.w3.org/css-validator/

Here is the link for your page: http://jigsaw.w3.org/css-validator/vali ... 09_feb_pad

There are a number of errors that you can correct, one way is to use the Web Developer in Fire Fox, make changes and see the results, which are temporary. Copy the edited CSS text to notepad and then to the actual CSS.

[alangrant]

I agree with the suggestion to validate your CSS. At the moment there are a lot of syntax problems, which carry the risk that different browsers will make different guesses at how to interpret the code. For example, what does "border-top: -#e62526 7px ridge;" mean - a negative colour??

There can be genuine reasons to include CSS code that doesn't validate, but it's easier to start with valid code and work from there. And there is no guarantee that valid CSS will look the same in all browsers, but again, it's easier to understand the differences from the starting point of clean, valid code.

[cits_4_pets]

Mardoli, Thank you! Your fixes worked and your showing me what was missing and the correction made sense! I had just copied and pasted the stylesheet then changed for my colors.

As suggested I added the Web Developer to FF. It did validate the page as a CSS level 2.1 No errors mentioned.

When I used the link that Dang had http://jigsaw.w3.org/css-validator/vali ... 09_feb_pad
I got a lot of errors and am totally clueless how & what to correct. What I need is a good book to understand it all! LOL.

I am totally clueless on parts of a stylesheet such as ".sb" I figure the { } refer to that section's code. I notice there is no background color... is there a place I can visit explains even the VERY BASIC terminology or a book you can recommend. (HTML for Dummies?)
.sb{
background: #;
color: <getvar color1>;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;

Thanks to all for trying to help!!!
Flo

[dougj]

Flo, here is an online resource that should help with learning some of the characteristics of CSS.

http://www.w3schools.com/css/css_intro.asp

The above website also has some good reference information for colors, etc., check the table of contents on the left side of the page.

[cits_4_pets]

Thanks Doug...I played around with the FF Web Developer plug in. Found the editing feature where I could edit the CSS page and see an immediate change. That will come in handy for colors! I probably should get a program I can play with on my computer. Thanks for the link! Flo