1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

FF or IE or both, which should valid CSS show up in?

Discussion in 'CSS' started by Grand, Jan 4, 2007.

0
  1. #1
    I've done a little test page in CSS which I was quite happy with, until I tried opening it in Internet Explorer 6. Then everything didn't look very good at all. So I was wondering, should good CSS and HTML show up correctly in both browsers? I'd assume so, just thought I'd check.
     
    Grand, Jan 4, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yes. As well as Opera, Safari, and Konqueror (at the very least).
     
    Dan Schulz, Jan 4, 2007 IP
  3. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok then. So does Firefox kind of fill in the gaps in the code?
     
    Grand, Jan 4, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    ??? What do you mean? Show us your test case.

    cheers,

    gary
     
    kk5st, Jan 4, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Can you share the code you are using?
     
    Dan Schulz, Jan 4, 2007 IP
  6. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I will do, first I'll just tidy it up and see if the problem is too obvious, I'll post it tomorrow if it's still the same.
     
    Grand, Jan 5, 2007 IP
  7. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #7
    IE is very likely displaying it wrong. Firefox is a much better browser to see if your CSS is correct.
     
    AdamSee, Jan 5, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It could also be that the code wasn't written correctly too. I see it a lot, both here and on SitePoint.
     
    Dan Schulz, Jan 5, 2007 IP
  9. pr0xy122

    pr0xy122 Peon

    Messages:
    1,649
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #9
    opera, IE, and FF.
     
    pr0xy122, Jan 5, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Actually, concentrate on the four major rendering engines, and you'll cover all the major browsers in one fell swoop.

    Trident (Win-IE)
    Gecko (Mozilla, Netscape, and its various offshoots)
    Presto (Opera)
    KHTML/WebKit (Konqueror, Safari, and IIRC OmniWeb as well, though that might be running Presto as well)
     
    Dan Schulz, Jan 5, 2007 IP
    KC TAN likes this.
  11. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks for that, I forgot to post the code before sorry. Well I guess there's no harm in showing you all my embarrassing code. It's all validated, but it still doesn't work. Keep in mind however that I don't really know anything about CSS and "relative" positioning bamboozles me (I mean I know what it is, I just can't use it correctly). By the way, this page is just a test, nothing more.

    http://www.grandfiles.com/test/index.html
    http://www.grandfiles.com/test/css.css

    It Firefox it looks fine. In IE the images are out of line, the rollover menu on the left is completely crazy, the paragraphs are messed up and it's hard to highlight text for some reason.

    As you can see I'm a poor misguided soul and I need some CSS skills. Does anyone know of any (preferably free) resources about using and positioning with CSS? Thanks.
     
    Grand, Jan 10, 2007 IP
  12. rb3m

    rb3m Peon

    Messages:
    192
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #12
    The problem is that Firefox and IE render margins and borders differently. For one their part of the box, for the other they're additional to the box. Can't remember which does what.

    The easiest way to save yourself the troubles is to program for Firefox and then use conditional comments to get IE to use different positions for the divs.
     
    rb3m, Jan 10, 2007 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    First thing; valid html. How rare is that? :) Good job.

    Second thing; lose all absolute positioning. It is very tempting, just Bam! Tell the element where to be. That's just like the prints shop's paste up board. Trouble is, the web's not print, and absolute positioning has gotchas with big teeth. As you learn css positioning, do it without absolute positioning.

    Here is a simple two column layout that has a bunch of bells and whistles for you to study. It can be seen at http://garyblue.port5.com/webdev/2col.html. I'm posting the code here since my (free) host seems to be choking on something at the moment. 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <link rel="shortcut icon"
        href="/favicon.ico" />
  <meta name="description"
        content=
        "A demo of two column layouts using faux columns and overlapping borders to appear like columns are equal height." />

  <title>2 Column - Apparent Equal Height | Gary Turner's html &amp;
  css playpen</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    padding: 0;
    margin: 0;
    }

body {
    font: 100% Tahoma, sans-serif;
    color: black;
    background-color: white;
    text-align: center; /*IE centering hack*/
    }

em {
    font-style: italic;
    }

p {
    font-size: 1em;
    }

h1, h2 {
    font-family: tahoma, helvitica, sans-serif;
    text-align: center;
    margin: 0;
    }

h1 {
    margin: .67em 0;
    }

ul {}

li a {
    display: block;
    text-decoration: none;
    }

li a:hover {
    text-decoration: underline;
    }

blockquote {
    margin: 0 3em;
    text-align: justify;
    font: 1em serif;
    line-height: 1.1em;
    }

blockquote p {
    margin-bottom: 0;
    }

blockquote p:before {
    content: "\201c";
    font-size: 3em;
    color: #ccc;
    vertical-align: text-bottom;
    }

blockquote p.last:after {
    content: "\201d";
    font-size: 3em;
    color: #ccc;
    vertical-align: -.75em;
    }

/*The background image should be the width of
  the sidebar.  Its purpose is to simulate a
  column of full height.*/
#wrapper {
    position: relative;
    width: 750px;
    margin: 0 auto; /*proper centering*/
    text-align: left; /*return to normalcy*/
    border: 1px solid #333;
    background: #eee url(navcolbg.jpg) top left repeat-y;
    }

#banner {
    background-color: white;
    border-bottom: 1px solid #555;
    position: relative;
    }

#pageheader {
    border: 0 none;
    padding-left: 5px;
    display: table;
    width: 60%;
    }

#pageheader p {
    color: #a00;
    float: left;
    font-family: georgia, serif;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2;
    margin: 0.67em 0 0;
    }

#pageheader p span.light {
    color: #669;
    float: right;
    font-size: .75em;
    font-weight: normal;
    }

#pageheader a {
    display: block;
    color: #a00;
    text-decoration: none;
    }

#pageheader hr {
    clear: both;
    height: 1px;
    color: #999;
    background-color: #999;
    margin: 0 0 0 2em;
    }

#sidebar {
    float: left;
    width: 160px;
    padding: 1em 5px 0;
    border-right: 1px solid #555;
    }


/*See my article, "white space bug revisited" at
  http://www.csscreator.com/node/6745
  for an explanation of the next hack*/

/* \*
* html li a {
    height: 1px;
    }
/* */

#main {
    margin-left: 170px; /*adjust for overlap with sidebar border*/
    border-left: 1px solid #555;
    padding: 1em;
    line-height: 1.3em;
    }

#footer {
    font-size: 0.8em;
    text-align: center;
    margin-top: 0;
    }

/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* hides from IE/Mac \*/
* html .clearing { 
    height: 1%;
    }

.clearing {
    display: block;
    }
/* end hide from IE-Mac */
/*** end clearing hack ***/

.def {
    border-bottom: 1px dotted #666;
    cursor: help;
    }

/*]]>*/
</style>

</head>

<body>
  <div id="wrapper"
       class="clearing">
    <div id="banner">

      <div id="pageheader">
        <p><a href="../index.html">Gary <span class=
        "kern">T</span>urner’s<br />
        <span class="light">html and css playpen</span></a></p>
        <hr />
      </div>

      <h1>2 Column—Apparent Equal Height</h1>

    </div><!-- end banner -->

    <div id="sidebar">
      <h2>Menu</h2>

      <ul>
        <li><a href="#"
           onclick="this.blur()">menu item</a></li>

        <li><a href="#"
           class="out">menu item</a></li>

        <li><a href="#">menu item</a></li>

        <li><a href="#">menu item</a></li>
      </ul>

      <p>The background image in #wrapper extends the full length of
      the page. So, it looks like the column is full length.</p>
    </div><!-- end sidebar -->

    <div id="main">
      <h2>Main Content</h2>

      <p>The borders are set to <span class="def"
            title="one lies over the other">overlap</span>. If you know
            which column will always be the longer, you may use only
            that column's border. If you use color to separate the
            columns, the background image in #wrapper should be total
            width of the float column. Like the overlapping borders,
            this makes it appear that both columns are full length.</p>

      <p>This demo has been modified to include an actual background
      image. I have also lengthened the content to more clearly show
      that the navcol <em>seems</em> to extend the full height of the
      content.</p>

      <blockquote>
        <p class="last">Aliquam odio wisi, molestie quis, hendrerit
        non, tempus ut, felis. Sed a augue. Fusce metus justo, faucibus
        in, sagittis dignissim, porttitor id, risus. Praesent sit amet
        velit. Aliquam erat volutpat. Pellentesque ut diam. Nam
        venenatis, metus sed scelerisque semper, tellus libero placerat
        tellus, vel aliquam risus lorem sed dui. Cras lacus. Nullam
        venenatis adipiscing neque. Maecenas et metus nec libero
        vehicula congue. Vestibulum vestibulum odio ullamcorper lacus.
        Etiam odio eros, aliquet et, volutpat eu, porta laoreet, orci.
        Donec sodales massa tincidunt est.</p>
      </blockquote>
    </div><!-- end main -->
  </div><!-- end wrapper -->

  <p id="footer">Footer Stuff ©2005</p>

  <p><a href="../">⇐ home</a></p>

  <p><a href="#wrapper">⇑ Return to top of page</a></p>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 10, 2007 IP
  14. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Thank a lot, I'll look at that sometime soon.
     
    Grand, Jan 12, 2007 IP
  15. MrsNBayley

    MrsNBayley Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I am using a CSS at work that works with IE 6/7 and Opera but won't work in FF or Netscape. I have nearly given up on the issue but have a client that is insisting we fix the problem. I have posted the code and problem in another thread.
    :( :confused:
     
    MrsNBayley, Jan 22, 2007 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Is Opera set to identify itself as Opera, or is it identifying (or worse, masking) itself as Internet Explorer?
     
    Dan Schulz, Jan 22, 2007 IP
  17. ThePirate

    ThePirate Peon

    Messages:
    40
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Well actually neither are totally compliant to Valid css coding, but then **good css should show well in ALL browsers ;)
     
    ThePirate, Jan 22, 2007 IP