Browser compatibility and css issues

slashjack · 17 Nov 2011 at 23:01

Okay, first of all i just want to rant at how bloody ANNOYING browser compatibility is, i mean would it really be THAT hard for a standard, thats not crap? You do one thing and get everything working great, then boom its looks aweful on another res or another brow. EVERYONE JUST USE CHROME MAKES SO MUCH SENSE! RAWRRRRRR

Okay. Im Done.

Now, straight to the point.
Im struggling to understand why when i put code in line its working perfectly, but when i put the code in the stylesheet it doesnt work, ie, the footer bg and everything disapears and all i see is the text.

Is this something straight forward or is it one of those horrible times where something is over riding it in the stylesheet?

Thanks in advance folks.

jack.mitchell · 17 Nov 2011 at 23:06

Could you post your code? Are you definitely linking in the external stylesheet?

slashjack · 17 Nov 2011 at 23:11

Yeah the link is def there, but i understand why you would say that. Ive looked doezens of time. Its there. It is. Yep. okay.

The code is

Code:

.footer {
    height: 41px;
    width: 895px;
    position: relative;
    margin-top: 20px;
    bottom: 0px;
    border: solid #fff 1px;
    background-color: #0099ff;
    -moz-border-radius-topright: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -webkit-border-top-left-radius: 25px;
    text-align: center;
    color: #fff;
    line-height: 41px;
}

Now that works fine when in line, but as it is in CSS it doesnt work.
The code in the HTML page is this

Code:

<p class="footer">Alex Robertson</p>

Im bewildered...

8t10 · 17 Nov 2011 at 23:24

slashjack · 17 Nov 2011 at 23:30

Code:

oh sh!t yeah your bang on, just went to copy the code and its blah blah hred="styles.css" .... wow i feel like an idiot.

Thanks!

Phunky · 18 Nov 2011 at 09:16

slashjack said:

In future open up Web Inspector or Firebug and see if the element has your styles applied to it, this will help you rule out these kinda mistakes

two00lbwaster · 20 Nov 2011 at 17:43

You should not be using the browser targeted styles for CSS3 unless the specific syntax has not been finalised; which border-radius pretty much has been.

All the browsers now use the standard for boarder radius, and if you are going to use the browser flags for CSS3 that hasn't had it's syntax finalised you should put the current documented and recommended syntax without browser engine specific flags after the targeted CSS. This means that browser not included as targets in your code, such as IE and Opera will render out the same as the other browsers when those browsers add in the support to their browser engines.

Also, regarding browser and platform compatibility in general, you should be aiming to be completely compatible with everything, progressively enhancing where you can and if you have to ignore browser/platform bugs/issues (I'm looking primarily at the iOS devices here, but the single font type in Android devices is also near the top of my list), only do so when you find that it is a well documented bug without a reasonable workaround.

Being able to program your pages to render out correctly in IE6-9, FF, Chrome, Safari and Opera and across Windows NT5/6, OSX and Linux takes no small amount of patience, but it will make you understand CSS and XHTML/HTML so much better, and so make you a much more rounded web developer.

Also, try developing in Firefox with Firebug and the Web Developer toolbar. If you had used the Edit CSS function in the Web developer toolbar you'd have noticed straight away where the issue was as the stylesheet wouldn't have been loaded into the CSS editor as a tab.
[/teaching cap off]