Margin not working in IE

Discussion in 'CSS' started by svenfran, Feb 19, 2010.

  1. #1
    Hi, I'm having a really big issue with my site goformat . com. The css layout works perfectly in Firefox, opera, safari, chrome, etc. But in IE, for some reason it is completely ignoring the margin settings that I have set for my side bars. Here is the CSS code for my side content that isn't working:

    <code>#rightcontent {
    position: absolute;
    right:0px;
    background:white;
    top:0px;
    width:200px;
    padding:10px;
    height:200%;
    text-align:left;
    border:0px solid ;
    border-left:1px dotted;
    border-bottom:1px dotted;
    position:fixed;}

    #leftcontent {position: absolute;
    left:20px;
    background:white;
    top:10px;
    width:200px;
    height:200%;
    margin:-10px;
    border-right:1px dotted;
    position:fixed;}
    </code>

    Or maybe If you don't see the issue you could look at the placement within the source code at goformat . com

    I edited one of my pages to mimic what it looks like on IE... goformat . com/contact . html

    Also, for some reason, when i save this code into a .css file and call on it from the page, it doesn't work? For example:

    If I do...

    <code><style type="text/css" src="http://www.goformat.com/example.css"></style></code>

    Nothing happens, and it just doesn't work? :~


    Thank you in advance for all of your help! :D
     
    svenfran, Feb 19, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I would say it's not working in Opera given that all of your content is chopped off on the right side... that and I'm NOT seeing the same layout across all browsers here so you've got some deeper issues than you are asking. When I see four different appearances in four different browser engines, you've got problems.

    That said, I'm willing to bet 99% of your problem is absolute positioning **** that shouldn't be absolute positioned. It's called flow; Use it.

    Your problems START with your outdated and invalid HTML. With a 1 in 4 ratio of validation errors to lines of code you don't have HTML, you have gibberish. Inlined presentation, inlined style, obvious list not marked up as a list, three or four times as many DIV as neccessary, line-breaks doing padding's job, bold tags instead of headings, outdated tages like CENTER, content BEFORE you even open the body tag, table for layout, non-breaking spaces to do align's job, paragraphs around non-paragraph elements, no labels, invalid javascript methods, no graceful fallbacks for when javascript isn't present, empty heading tags for god knows what reason (and whiskey tango foxtrot is a h5 doing in there with no h4, h3, h2 or h1 preceeding it?) tags opened that don't even seem to be used (or used properly)

    The only problem with your CSS is you don't have proper HTML to apply it to. I mean seriously:

    
    </head>
    <div id=leftcontent>
    <script type="text/javascript"><!--
    google_ad_client = "pub-6048972718815909";
    /* 160x600 side ads */
    google_ad_slot = "7544987752";
    google_ad_width = 160;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    <div id=rightcontent>
    <b>Advertisments</b><br><br>
    <small>Add your link here for only $10/month!</small>
    <small><a href="http://www.goformat.com/advertisements.html">Learn more</a></small> 
    </div>
     <body>
    
    Code (markup):
    Do we see a problem here?
     
    deathshadow, Feb 20, 2010 IP
  3. svenfran

    svenfran Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for all your critiques. At least now I know where all my problems are coming from.
     
    svenfran, Feb 20, 2010 IP