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.

My CSS is messed up in IE and I can't figure out whats wrong

Discussion in 'CSS' started by TuxNerd, Aug 25, 2007.

  1. #1
    Hi guys, I am working on a new site and cannot for the life of me figure out what is wrong with my CSS, it looks exactly how I want it to in firefox, but once I check it in IE everything is messed up....

    the entire main content gets shifted down to the bottom of the page, while the menu and ads stay in place on the left and right side. I'd appreciate any help guys.

    here is my site, http://coolnfreepix.com
    the css is http://coolnfreepix.com/stylesheet.css
    and there is an ie fix
    http://coolnfreepix.com/ie.css

    Thanks a ton

    TuxNerd
     
    TuxNerd, Aug 25, 2007 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Oh boy, what a mess. :(

    I played around with the .contenthead and .center classes, and reduced the width to about 501px and it seemed to have fixed the problem, or atleast the content problem. Although I stopped here since It seems like it'll be more hassle than it's worth since it's coded improperly to begin with. I would really suggest you recode the layout as it's doesn't appear to be very complicated at all.

    What I highly recommend you do is google "3 columns css" and you'll get a bunch of results, and likely already a coded version of your current design, but a functional one, lol. :)

    All I have to say is that you have too many containers, whereas there should really be 5 or 6. One for the layout to hold it together, 1 for header, and 3 for each column, and possibly one for footer.

    What I would suggest to you and everyone else is ALWAYS keep in mind IE6 is necessery for any css coder, as you WILL most certainly run into problems and you will need to verify it with IE6, Firefox and all other modern browsers will display everything as it should, IE6 will not, as such it should have more attention paid to.
     
    GWiz, Aug 25, 2007 IP
  3. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #3
    ^ I agree with GWiz here. Your code needs a complete overhaul.

    But in case you don't have that much time, here's a quick fix:

    stylesheet.css
    
    * {margin: 0; padding: 0;}
    html, body { height: 100%; }
    body {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    background:#000000;
    }
    
    
    /* Start of clearfix */
    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .clearfix {
    display: inline-block;
    }  
    
        /* Holly Hack Targets IE Win only \*/
        * html .clearfix {height: 1%;}
    	.clearfix {display: block;}
        /* End Holly Hack */
    	
    /* end of clearfix */	
    
    
    /*
    _________________________________________________________
    
    Start of upper section
    _________________________________________________________	
    */	
    .mainarea { 
    width: 860px;
    margin: 0 auto;
    background: #CCCCCC;
    border-right: #000 1px solid;
    border-left: #000 1px solid;
    background-image: url(images/bg.jpg);
    background-repeat: repeat-y;
    min-height: 100%;
    }
    .line {
    height: 0px;
    border: 0px solid #000;
    background-color: #CCCCCC;
    }
    .location {
    padding: 7px 10px 3px 10px;
    font-size: 12px;
    color: #FFF;
    height: 18px;
    border: 1px #666666 solid;
    border-bottom: 0;
    background-color: #999999;
    border-top: 0;
    }
    .head {
    background: #999999;
    height:100;
    width:859px;
    }
    
    /*
    _________________________________________________________
    
    End of upper section
    _________________________________________________________	
    */
    
    
    
    /*
    _________________________________________________________
    
    Start of navigation section
    _________________________________________________________	
    */
    
    .nav {
    border: 1px solid #000;
    border-top: 0;
    width: 160px;
    background:#666666;
    float: right;
    }	
    .nav h3 {
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 3px 3px 3px 5px;
    background: #333333;
    border-top: 1px solid #FFF;
    }
    .nav h4 {
    font-size: 12px;
    font-weight: bold;
    color: #009900;
    padding: 3px 3px 3px 5px;
    background: #333333;
    }
    .nav p {
    
    }
    .nav ul{
    list-style-type: none;
    }
    	
    	.nav li {
    		font-size: 11px;
    		list-style-type: none;
    		}
    .nav a {
    background: #666666;
    font-size: 12px;
    color: #CCCCCC;
    text-decoration: none;
    font-weight: bold;
    padding:0;
    padding-left: 20px;
    display: block;
    }
    .nav a:hover {
    border-left: 5px solid #294159;
    padding:0;
    padding-left: 15px;
    color: #FFFFFF;
    background: #666666;
    }
    .nav a:visted {
    	background: #666666;
    	font-size: 12px;
    	color: #cccccc;
    	text-decoration: none;
    	font-weight: bold;
    	padding:0;
    	padding-left: 20px;
    	display: block;
    }
    
    /*
    _________________________________________________________
    
    End of navigation section
    _________________________________________________________	
    */
    
    
    
    
    /*
    _________________________________________________________
    
    Start of main content
    _________________________________________________________	
    
    */
    
    .center {
    float:none;
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
    margin-bottom: 60px;
    }
    .contenthead {
    background: #cccccc;
    height: 70px;
    padding: 15px;
    }
    .contenthead h1 {
    color: #000000;
    font-size: 25px;
    text-align:center;
    }
    .contenthead i {
    color: #000000;
    font-size: 16px;
    margin-left: 50px;
    }
    .maincontent {
    background: #cccccc;
    border-top: 1px solid #FFF;
    padding: 10px;
    }
    .maincontent h2 {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px dotted #3300FF;
    }
    .maincontent p {
    color: #000;
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 25px;
    }
    /*
    _________________________________________________________
    
    End of main content
    _________________________________________________________	
    */
    
    
    /*
    _________________________________________________________
    
    Start of footer section
    _________________________________________________________	
    */
    
    .footer {
    clear: both;
    margin: 0 auto;
    background: #666666;
    width: 860px;
    height: 50px;
    margin-top: -51px;
    border-top: 1px solid #FFF;
    position: relative;
    text-align: center;
    }
    .footer p {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    margin: 3px;
    text-decoration: none;
    }
    .footer a {
    color: #0000FF;
    }
    
    /*
    _________________________________________________________
    
    End of footer section
    _________________________________________________________	
    */
    .ad {
    border:none;
    width: 160px;
    background: #666666;
    float: left;
    }	
    .ad h3 {
    font-size: 13px;
    font-weight: bold;
    color: #009900;
    padding: 3px 3px 3px 5px;
    background: #3300CC;
    }
    .ad h4 {
    font-size: 12px;
    font-weight: bold;
    color: #FFCC33;
    padding: 3px 3px 3px 5px;
    background: #3300CC;
    }
    .ad p {
    
    }
    .ad ul{
    list-style-type: none;
    }
    	
    	.ad li {
    		font-size: 11px;
    		list-style-type: none;
    		}
    .ad a {
    background: #56718d;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    padding-left: 20px;
    display: block;
    }
    .ad a:hover {
    padding-left: 15px;
    color: #000;
    background: #98aabc;
    }
    .ad a:visted {
    	background: #56718d;
    	font-size: 12px;
    	color: #FFF;
    	text-decoration: none;
    	font-weight: bold;
    	padding-left: 20px;
    	display: block;
    }
    
    Code (markup):
     
    VimF, Aug 25, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I'm with the crowd - chuck it and start over. The HTML isn't TOO bad, but you've got a few things like the .clearfix method which is just a total /FAIL/

    Much less that whole IE conditional just asking for the whole layout to break... If you have to feed a separate stylesheet for IE6, you are probably doing something wrong.

    Of course, it would actually help if you opened your HTML, instead of jumping straight from doctype to HEAD. That alone could also be tossing IE into quirks mode.

    Some tab indents that make sense wouldn't hurt either... You might also want to try a thing called validation which would point out the invalid bits like trying to use align on a DIV - there is no align attribute for DIV.

    ...and since those titles on your anchors are IDENTICAL to your anchor content, they serve NO PURPOSE. (not that ANYTHING pays attention to the title attribute in a meaningful manner in the first place) so axe those... Which by all indictaions would shave 20-30% off your HTML...

    <li><a href="Ben-Affleck.php" title="Ben-Affleck">Ben Affleck</a></li>

    Seriously, what purpose does that title serve?

    Took me a moment to figure out why you had a big empty column on the left - my bad, adblock. I'd put SOMETHING else there alongside the advertising just so it doesn't look stupid to people that consider google adsense to be #DDD


    Do I even want to know why this is in the middle of your content?
    <link href="../stylesheet.css" rel="stylesheet" type="text/css" />

    Much less this? Table for a single column?!?

    <table align="center" class="maincontent">

    You should probably be marking your paragraphs up as paragraphs, assigning classes to style your UL's instead of inlining an attribute (type) that DOES NOT EVEN EXIST...

    That you are calling separate .php files for each and every topic is also a bit... troubling to me. Kind of defeats the purpose of using php unless you are doing a 'poor mans' - in which case I'd bite the bullet and use a real database back-end given the volumn of pages.

    I've got no idea what that train wreck of javascript at the bottom is supposed to accomplish, apart from breaking in everything except netscape 4.

    and that's before I even get into the CSS - which either looks like too much CSS, or not enough - at the same time. Things I'd expect to see nowhere to be seen, and a bunch of stuff (like that stupid clearfix nonsense) that shouldn't even be needed - much less an entire separate IE stylesheet, something that there is NO GOOD REASON TO EVER DO.

    If I have time later, I'll do up an example of that main page the way I'd code it.
     
    deathshadow, Aug 25, 2007 IP
  5. bnandika

    bnandika Well-Known Member

    Messages:
    1,079
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    140
    #5
    bnandika, Aug 25, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Ok, here's how I'd code it:

    http://battletech.hopto.org/for_others/tuxnerd/template.html

    and the CSS:
    http://battletech.hopto.org/for_others/tuxnerd/screen.css

    The HTML is much the same as yours - except I switched it to a 'source order' column method putting your page content before the sidebars... and I think I saw the remnants of a 100% height-model code in your page, so I ressurrected that as functional... I also made your content links into 3 columns 'the simple way'. Biggest changes just being removal of unneccessary code and switching some of your classnames to the ID's I usually use in a layout.

    While the HTML doesn't need too much explanation, I'll go through my CSS choices.

    Your original nulled all margins and padding - I agree on that, it's the best way to handle cross-browser issues...

    I set the height to 100% on BOTH HTML and BODY, this way our 100% height model works cross-browser with a minimum of headaches.

    Set the font - I do NOT trust default line-heights, so I always explicitly declare them. Programming 101 - NEVER assume the value of any variable.

    While at it, we'll axe all image borders.

    Now for #container. much like yours it gets width, auto margins, min-height:100%, background, etc. The major difference is the use of overflow:auto which will make #container wrap the full height of any floats inside it anything newer than IE6. I made this two px narrower because the image you were tiling did not line up right - in fact your side borders appear to only be 159px, not 150px, and your header image is 858px,

    The next section we use a "* html" hack to just target IE6 with the little tiny difference of setting overflow to the default of visible (overriding our previous) and setting height to 100%. IE6 and earlier treat height as min-height, and wraps floats inside div's - so that's a quick and easy fix.... and the ONLY code we need to feed IE that is any different from the rest of the page!

    The page header on my version is radically different from your original as I do not inline the image. In the HTML you'll see that it is:

    <h1>
    <strong>CoolNFreePix.Com</strong>
    Free Myspace Graphics and Pictures
    <span><!-- image replacement --></span>
    </h1>

    The reason for this is we want to make it so that when images are off but CSS is on the user has something similarly formatted to look at - and with CSS off they get a meaningful header wrapping the page.

    First we set the height equal to your image, as the width will auto-expand to match our #container. We'll set the font size and line-height for the second line of text, then
    we set the strong text to display:block to put it on and big text with a negative bottom margin equal to it's height. Padding-right on the h1 and margin-left on the 'h1 strong' move the text in a bit, giving us a nice appearance images off.

    Then comes the span we'll stuff our image into. Because we set the h1 to position:relative anything absolute positioned will be set inside the container, so top:0; left:0; with the same dimensions as our H1 will put that background-image right on top of the H1 text.

    Result: best of both worlds. CSS on, Images on = normal appearance. Images off, CSS on = decent appearance. CSS off = degraded but meaningful markup - aka search engines get something to look at. (I would probably also add some text to describe what page you are actually on)

    #breadcrumbs is simple - padding, font - if we use line-height we can set the height much simpler, though if your breadcrumb line is going to get long enough to wrap, I'd switch back to using top/bottom padding with a smaller line-height. My version of course is a list with the LI set to inline.

    Next is our column layout code. I chose a simple 'extra div' content first column layout as it's the simplest cross-browser solution.

    First we set the outermost container around our content column to float:left and width:100%; then an inner 'wrapper' to have big enough margins for our columns.

    Then we set both of our side columns to float:left and the same width. The right column gets a margin-left equal to it's width, which 'tricks' the rendering engine into thinking the column is 0px wide - suddenly making it able to 'fit' next to our outer wrapping #content DIV. Because it is margin-left the actual visible content gets slid right where we want it.

    The lefthand column is a bit more complex - we use margin-right:-159px to also make it's positioning box 0px wide, letting it stack atop #content on the left - but this time it's rendering box is outside #container. Position:relative and left:-100% slides it left our #container width, putting the column right where we want it.

    All three columns then get padded on the bottom 76px to make room for our footer.

    We'll skip the rest as that's all FAIRLY self explanatory, and get right to #footer. Instead of putting it inside #container we put it after, putting it past our max content and/or min-height. A negative top margin equal to it's height rides it up over our #container, resulting in our total content again being min-height:100%;

    Hmm... other than that I cleaned up the rest of the content/column css slightly - that #navbar ul li {display:inline} is to make IE7 not wierd out on the anchors inside it (it adds extra padding without that) - and I did measure my padding a little different - deleting things like your 'line' class for a border-bottom on #content h2.

    But for the most part, that's it.

    Hope this helps. Any questions, fire away.
     
    deathshadow, Aug 25, 2007 IP
    TuxNerd likes this.
  7. TuxNerd

    TuxNerd Well-Known Member

    Messages:
    121
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #7
    Just wanted to say thanks to everyone... I knew the answer wouldn't be fun, but was hoping there would be an easy way out of it... anyways thanks
     
    TuxNerd, Aug 25, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I don't understand what is going on with two htmls:

    
    body, 
    html {
    	height:100%;
    }
    
    Code (markup):
    
    * html #container {
    	overflow:visible;
    	height:100%; /* IE treats height as min-height */
    }
    
    Code (markup):
    So, even though "html" was added next to the "body" and height declared 100%, you have to do it again next to #container? Why doesn't the #container (or the rest of the page) follow the original "body, html"?
     
    Stomme poes, Aug 25, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    "* html" is a hack targeting just IE6 and earlier. Any class or ID started with * html is only applied to IE6/5.x. In this case we are applying height as 100% since IE has no min-height, but treats height AS min-height. Since we are using height, the overflow:auto declared above would give us an extra scrollbar in IE5/6... the only reason we have overflow:auto in #container is to make #container obey the height of floats inside it - which is IE6 and earliers default behavior ANYWAYS... so we just set overflow back to the default value of visible.

    Using the * html hack lets us quickly inline our one tiny hack right alongside our real code without any of that conditional bullshit or separate css file nonsense. WebDevOut has a good article on the subject.
    http://www.webdevout.net/css-hacks

    I usually frown on hacks, and 99.99% of the time will avoid them like the plague, but there are some things you cannot do with div's without them- so when I am forced to use them it's ALWAYS IE as the odd man out, so I only use the 'easy selector' methods in my CSS. (since I've NEVER needed to feed different HTML)

    This same layout could actually be done without a 'real' (conditional or selector error) hack in sight - but it means using a table. (funny thing is, it just might be less code that way)

    As to "Why doesn't the #container (or the rest of the page) follow the original "body, html"?" the default height of all elements is auto - and auto shrinks to however much content there is.

    Oh, BTW - the height:100% on body and HTML is treated as min-height - BY the specification so we can feed that safely to all browsers and get min-height there.

    Why do we have to set it at all? Simple, by the specification any % setting of an element does not work if it's parent container does not have a explicit height declared. If you don't declare a height on body, a % height on container - even 100% would be automatically changed to height:auto - shrinking to however short the content inside it is. If we don't set it on HTML, height:100% on body becomes height:auto. If we don't set it on both, height:100% on #container becomes height:auto (and shrinks to content), if we don't set it on #container, it defaults to height:auto and as such will shrink to fit the content... All of this is to make sure our minimum height equals screen height.

    This is actually why the height:1% 'Holly hack' for haslayout works and can usually be fed to all browsers, but every once and a while messes up. MOST of your containers rarely ever have a height declared on them - as such height:1% becomes height:auto... You try the holly hack inside a container set to height:300px and you will get a 3px tall container - try it inside a container with no height set, and you trip haslayout but still get height:auto;

    It all boils down to the quirks of the box model - both the actual specification and the various browser interpretations of it.
     
    deathshadow, Aug 25, 2007 IP