A CSS issue

Rails
1

Hey,
This question is actually more of a css issue than anything I
believe. Hopefully that is alright, I have been posting my questions
on here for a while and figure most of the rails community is probably
familiar with css. My website: www.uberpwner.com displays correctly
in safari and firefox, but in IE it is completely screwed. I don’t
even know where to begin to fix it. Can anyone take a quick glance
and let me know what might be up?

Thanks,
JB

2

On Sun, Dec 28, 2008 at 3:06 PM, Jables [email protected] wrote:

Hey,
This question is actually more of a css issue than anything I
believe. Hopefully that is alright, I have been posting my questions
on here for a while and figure most of the rails community is probably
familiar with css. My website: www.uberpwner.com displays correctly
in safari and firefox, but in IE it is completely screwed. I don’t
even know where to begin to fix it. Can anyone take a quick glance
and let me know what might be up?

The problem is IE and your HTML/CSS isn’t working well for it. If
you’re unsure, you should contact a CSS guru to help you figure out
how to work with the beast that is known as Internet Explorer.

Robby

–
Robby R.
Chief Evangelist, Partner

PLANET ARGON, LLC
design // development // hosting w/Ruby on Rails

http://www.robbyonrails.com/
aim: planetargon

+1 503 445 2457
+1 877 55 ARGON [toll free]
+1 815 642 4068 [fax]

3

That is what I am hoping to find here…a css guru. Any idea where I
might be able find one otherwise?

4

On Sun, Dec 28, 2008 at 5:47 PM, Jables [email protected] wrote:

That is what I am hoping to find here…a css guru. Any idea where I
might be able find one otherwise?

On a “CSS mailing list”? (hint: see first google hit on that phrase)

Also, neither your markup nor your CSS validate. Fix those first and
then see if you still have problems to address.

FWIW,

Hassan S. ------------------------ [email protected]

5

Hassan S. wrote:

On Sun, Dec 28, 2008 at 5:47 PM, Jables [email protected] wrote:

That is what I am hoping to find here…a css guru. Any idea where I
might be able find one otherwise?

On a “CSS mailing list”? (hint: see first google hit on that phrase)

Also, neither your markup nor your CSS validate. Fix those first and
then see if you still have problems to address.

You’ll find a fairly chilly reception on the list Hassan recommends if
you
go to them without first fixing your markup and CSS. OTOH, if you’ve
got
your house in order, they’ll absolutely tell you how, precisely, to fix
the
problem. It’s an amazing list.

HTH,
Bill

6

validate your CSS here
http://jigsaw.w3.org/css-validator/#validate-by-input

Validate your HTML here:

just paste them in and you will be told about any errors.

Good Luck

7

Check your html first. You’ve got quite a few unclosed tags and typos.

View the source code in Firefox and look for anything in red.

8

in addition to everything that has been said already:

  • get the firefox-plugins “firebug” and “web-developers toolbar”. they
    are very helpful for creating and validating html- and css-code
  • for internet-explorer to show your css properly try to use padding
    and margin as little as possible (google for “IE margin padding” and
    you will find a lot of people with problems). there are many ways to
    get this to work, but no generic solution. personallly i use
    transparent borders instead of padding/margin, when i encounter such a
    problem.
9

Excellent, thanks for all the help guys.

10

Box models

here’s a handy IE toolbar

Internet Explorer Developer Toolbar
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

I don’t consider myself a guru.
In looking at your CSS there could be a lot of cleaning up done.
Example. you declare font-family in many places.
You could make a “main.css” and do

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
}

That way your fonts are the same and since you’re declaring it once
less to download.
You could go further and make a “type_001.css” and just declare all
your typography in it.
When you want to change you font change the file to say “type_002.css”
that way the cached css won’t be pulled and you wonder why the type
hasn’t changed.

You could do the same for:
reset (CSS Tools: Reset CSS)
layout (positioning)
style (colors and other eye candy)

my 2 cents

John

On Dec 29, 4:01 am, Fernando P. [email protected]

11
12

Thanks again to everyone for the top notch replies.

13

MaD wrote:

personallly i use
transparent borders instead of padding/margin, when i encounter such a
problem.
That’s an excellent piece of advice, and it is what I also use, but it
doesn’t work all the time if there is a special background. Another
problem are floating elements, try switching them from left to right and
switch the order they appear in the html, sometimes it will avoid IE
adding a double margin.