/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Browser compatibility problem!!!

Copy linkTweet thisAlerts:
Dec 26.2008

Hi folks,
I am aware of browser compatibility issues, specifically between Firefox and explorer. However, I have it a “brick wall”…. A site that I have designed is looking (and behaving) very differently. I’d really appreciate some support.

The site is up and running, [url]www.ritamagalhaes.com[/url], so you can check for yourself the differences between Firefox and explorer.

I just don’t understand why it is behaving soooo differently, namely:
– visited link color on the left sided lists (in all pages)
– content jumps down in pages where there is text

The CSS I am using is:

[CODE]
body {
background-color:#000000;
font-size: 13px;
color: #999999;
margin: 0px;
padding: 0px;
}

body, th, td, input, textarea, select, option {
font-family: “Times New Roman”, Times, serif;
}

h1, h2, h3 {
text-transform: none;
font-family: “Century Gothic”, Helvetica, sans-serif;
font-weight: normal;
color: #999999;
}

h1 {
letter-spacing: -2px;
font-size: 2.5em;
}

h2 {
letter-spacing: -1px;
font-size: 1.4em;
}

h3 {
font-size: 1em;
}

a {
color: #FFFFFF;
}

a:hover {
color: #FFFFFF;
}

/* Content */
#content {
width:90%;
border:1px solid #000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
#outcover {
margin: 100px 20px auto 26%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}

#cover {
background-image: url(images/INICIO2.jpg);
background-repeat: no-repeat;
margin-top: auto;
margin-bottom:auto;
}

/* Sidebar */

#sidebar {
float: left;
background-image: none;
padding-top: 5px;
margin-top: 10px;
margin-left: 0px;
width: 14%; /* since this element is floated, a width must be given */
text-align:center;
border:none;
}

#sidebar ul {
padding-top: 0px;
padding-right: 11px;
padding-bottom: 3px;
padding-left: 0px;
margin-top: 10px;
list-style-type: none;
text-decoration:none;
}

# li {
border-bottom: 1px dotted #999999;
background-image: none;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
text-decoration:none;
}
#sidebar a
{
display: block;
color: #000000;
}
[/CODE]

Any ideas??
Cheers
Gus

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@freddygustoauthorDec 26.2008 — Let's start by cleaning up the errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ritamagalhaes.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606[/QUOTE]

You are right Charles...

Done!

Compatibility problems still present... any thoughts?
Copy linkTweet thisAlerts:
@drhowarddrfineDec 27.2008 — There are no compatibility issues between Firefox and IE. There are, generally, only issues with IE regarding proper standards support. Again, generally, Firefox will display what you wrote while you never know for sure what IE is going to do. So, look at FF and say that's what I wrote, now what is IE doing and google for the hacks to fix IE as they are well known.

Now, I don't have IE available but I don't see what's different between the two (looking in an online renderer).
Copy linkTweet thisAlerts:
@felgallDec 27.2008 — Steps for resolving browser compatibility problems.

  • 1. Fix any validation errors.

  • 2. Get the page displaying the way you want in Firefox, Safari, Opera, Chrome and other modern browsers.

  • 3. Identify what isn't displaying properly in antiquated browsers that you want to support and then locate and apply an appropriate fix for it. In the case of the most commonly used antiquated browsers (IE7 and IE6) there are well known fixes for hundreds of the issues that those browsers have for displaying web pages properly that can be targetted to the specific browser using Microsoft conditional comments.
    • ×

    Success!

    Help @freddygusto spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...