IE CSS Help!

A

Ainsley

New Member
I'm just coding a html/css template and it looks fine in Firefox but awful in Internet Explorer! The sidebar and post section is all wrong!

I've just started learning about css and now I'm not sure how to do the css for ie browsers. Can anyone help?

Here's the basic page I created (i'm not finished yet so the page isnt 100%):
http://bloomwebdesign.net/Learning/index.html

Any help would be appreciated, thanks! :)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ok the site looks fine in IE8 but is broken in earlier versions. Here is how to fix it. Starting with the left side...

div.post-img
  1. remove all padding (use margin instead)
  2. increase the right margin, add associated values from the removed padding
Code: 
div.post-img {
width:173px;
height: 159px;
float:left;
margin:10px 25px 0 10px;
}

div.post-title
  1. Remove this div no need for it. add the style to the h1 tag
  2. Remove the left padding from the post-title class (that is causing the item to drop below the float)
  3. Change the paragraph to a h5, style it the same as the paragraph (maybe call it post-subtitle)
  4. Add the bottom margin to the post-subtitle
Code: 
h1.post-title {
font:normal 18px/34px Verdana, Arial, Helvetica, sans-serif;
color:#1b2531;
}
h5.post-subtitle {
font:italic 12px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
margin-bottom:10px;
}

div.post-desc (and its children)
  1. No need to float this. Remove it.
  2. Remove the left padding
  3. No need to wrap the link (child) in a paragraph
  4. Just change the link to block level element and add a top margin.
Code: 
div.post-desc {
text-align:justify;
width:336px;
}
div.post-desc a {
display:inline-block;
margin-top:10px;
}
div.post-desc a:hover {
/* Add hover state styles here */
}

To get the right "sidebar" to move up so its parallel with the left, just remove the width from the "left-content" div.
Code: 
div#left-content {
width:602px;
}

See how this works and let us know if you still need help.

Good luck!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I am assuming you want the footer to be locked to the bottom of the browser window...if so this is how I would go about it:

Clears wont help (they only create a break in floated elements)
What you need to use is fixed position

div.footer
Remove the height. No need for it.
Remove the clear.
Set the element to fixed position.
Set the bottom value to zero.
Code: 
div.footer {
background:url("http://www.webdesignforum.com/images/footerbg.png") left top repeat-x;
bottom:0;
position:fixed;
width:100%;
}

Method to the Madness
By using fixed position you take the footer element out of the normal flow of the document. However by doing this, the remaining content on the page will fall behind this element, so we need to adjust for that. The easiest way to do this, is to add padding to the wrapper element (your main content).

Before we do this, you wrapper element do not have a height. This is because all of it children are floated elements. by default, floated elements will not cause their parent to expand. In order to get this "auto-expansion" for the parent (wrapper) you must set the overflow to hidden. So hopefully i did not loose you there...these adjustments also need to be added:

div.wrapper
Set the overflow property to hidden
Add the bottom padding to adjust for the height of the footer (estimated 220px)
Code: 
div.wrapper {
margin:0 auto;
overflow:hidden;
padding-bottom:220px;
width:900px;
}

div.left, div.right
Remove the height from these two elements


That should do the trick. Let me know if there are any other issues.

FYI, you have a few other issues where you are using tags correctly (i.e menu in the bottom of each post)
 
You must log in or register to reply here.
Top