Cross Browser???

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Cross Browser???

Post by ebgames56 »

Just wondering if there is code i can put in my HTML that will tell what ever Browsers are being used to view as the same as all. Like im viewing in Chrome it looks fine then I open up IE and it is all messed up.

Any help is appreciated thanks
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Cross Browser???

Post by Celauran »

That's IE for you. Things will look the same in most standards-compliant browsers. Your best bet is probably to specify an IE-only style sheet.

Code: Select all

<!--[if IE]>
    <link rel="stylesheet" etc... />
<![endif]-->
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Cross Browser???

Post by ebgames56 »

where do I put that code???? and what else do i put in that code???
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Cross Browser???

Post by Celauran »

Put it in the document head. Treat it like you would any other style sheet.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Cross Browser???

Post by ebgames56 »

What do i put in the .css file?????? im lost
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Cross Browser???

Post by pickle »

To be honest, I would say IE9 could be considered a "modern-browser". Sure it doesn't have all the bells & whistles, but it's close enough now to be considered modern in my opinion.

~ebgames56 Your first step should be to check if your HTML & CSS validate. IE can hardly be blamed if you're not giving it valid code.

If you do need to specify IE-only CSS, the line ~Celauran gave you should be placed in the <head> of your HTML, AFTER the <link> line that links to your regular stylesheet.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Cross Browser???

Post by papa »

Also I suggest using a stylesheet that resets most of the elements for easier cross-browsing. Use blueprint for example.

Something like this:

Code: Select all

/*  RESET */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #FFFFFF; color: #000; text-decoration: none; }
mark { background-color: #FFFFFF; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCCCCC; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: normal; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid {}
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px #EEEEEE; -webkit-box-shadow: 0px 0px 5px #EEEEEE; box-shadow: 0px 0px 5px #EEEEEE; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #EEEEEE; }
::-moz-selection{ background: #EEEEEE; color:#000; text-shadow: none; }
::selection { background:#EEEEEE; color:#000; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #EEEEEE; }
a:hover {text-decoration:underline}
.noUnderline, .noUnderline a {text-decoration:none}
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
But usually you also need a specific stylesheet for IE.
Post Reply