IE completely wrecks my design

  • zigmund619

    (@zigmund619)


    14 years, 7 months ago

    Hello everyone,

    my blog is at: http://hamasbir.com/ (view in IE vs. FF)

    I’m currently using WordPress 2.8.4 in hebrew. I’m using a theme called Simple v2 2.0, which was heavily modified by me. Unfortuneately, I know next to nothing about CSS or HTML, so I assume this is what caused the problem.

    The blog looks just fine in FF, but pretty much unviewable in IE.

    *Edit* some important notes:

    – the problem seems to be on the homepage and on single posts pages.
    – in IE, the dashed border under the links is applied also to H2’s, even though they are excluded in my CSS, and they would not “hide” when text is hovered.

    here’s my css:

    @charset "utf-8";
/*
Theme Name: Simple v2
Theme URI: http://bob.my/wordpress-theme-simple-version-2-is-out/
Description: Simple one ;)  <br /> התאמה לעברית <a href="http://www.we-cms.info/blog">ארז וולף</a>
Version: 2.0
Author: Bob Jiwakacau
Author URI: http://bob.my/
Tags: blue, white, fixed width, two columns, widgets, rounded corners
*/

/*...... body ........*/
* { margin: 0px; padding: 0px; list-style:none; text-decoration:none; }
body { background:url(images/topbkg.gif) repeat-x; font:0.75em arial, sans-serif; color:#333; direction:rtl;}

/*...... links ........*/
a { color:#ef1111; border-bottom: 1px dashed #999; font-weight: bold;}
a:hover { color:#ef1111; text-decoration: underline; border-bottom: hidden;}

/*...... main and sticky footer ........*/
html, body { height: 100%;  }
#main { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px; }

/*...... h2/h3 ........*/
h2 { font:2.2em strong arial, sans-serif; display:block;  }
h3 { font:1.58em arial, sans-serif; padding:5px; margin-bottom:10px;}
h2 a { color:#000000; border-bottom: hidden; }
h2 a:hover { color: #ed0d0d; }
.clear { clear:both;}

/*...... WRAPPER ........*/
#wrapper { width:910px; margin:auto; }
#top { height:150px; width:910px; }

/*...... logo { with logo or text just remove one of them} ........*/
#logo { float:none; width:910px; height:150px; text-decoration: none;}
#logo h1 { text-indent:-9999px; font-size:10px; text-decoration: none; }
#logo h1 a { display: block; height:150px; width:910px; background:url(images/logo.jpg) no-repeat; border-bottom: hidden; text-decoration: none;}
/*#logo h1 { font:normal 20px Georgia, Times, serif; line-height:30px; text-decoration: none; }
#logo h1 a { color:#fff; text-decoration: none;}
#logo h1 a:hover {color:#e4f2fd; text-decoration: none;}*/

/*...... top menu ........*/
#menu { width:600px; float:left; height:30px; color:#ccc; display: none; }
#menu ul { margin-top:5px; float:left; display: none;}
#menu ul li { float:right; height:20px; margin:0 0 0 5px; display: inline; line-height:20px; display: none;}
#menu ul li a { display: block; padding:0 10px 0 10px; color:#ccc; display: none;}
#menu ul li a:hover{ color:#fff; display: none;}
#menu ul li.current_page_item {background: #000 url(images/mright.gif) no-repeat left; display: none;}
#menu ul li.current_page_item a{background: url(images/mleft.gif) no-repeat right; display: none; }
#menu ul li#searchbox { width: 152px; height: 20px; background: url(images/go.gif) no-repeat; margin-left:0px; display: none;  }
#menu ul li#searchbox #s { float: right; margin: 4px 6px  0 0; border: 0; width: 110px; background: none; color:#333; font-size:10px; display: none; }
#menu ul li#searchbox #go { float: left; width:25px; height:20px; display: none;  }

/*...... content ........*/
#split { width:700px; float:right;}
#content { width:910px; margin:auto; padding-top:10px;}
#content p { padding-bottom:10px;}

/*...... entry ........*/
.ctop { width:701px; height:17px; background:url(images/ctop.gif) no-repeat; margin-bottom:-12px;}
.cbottom { width:701px; height:17px; background:url(images/cbottom.gif) no-repeat; margin-top:-12px; }
.box { width:680px; padding:10px; background:#fdfdfd; border-right:1px solid  #f0f0f0; border-left:1px solid  #f0f0f0;}
.box span.date { font-size:11px; font-weight:normal; padding-right:10px; }
.box p.dpost { display:block; background:#f6f6f6; padding:5px 10px 5px 5px; margin:10px 0 0 0; clear:both;}
.box p.dpost a { font-weight:normal; }
.box p a { font-weight:bold;}
.box p { line-height:140%;}
.meta { display:block; background:#f6f6f6; padding:10px; margin:10px 0 5px 0; }
.meta p { padding-bottom:10px;}
.meta a {font-weight: normal; border-bottom:hidden;}
.space { display:block; height:15px;}
.nifty { display:block; padding:10px; margin-bottom:10px; background:#ffffff; }
.box img { border:0px solid #dadada; padding:3px;}
.box img.wp-smiley { border:none; vertical-align:middle;}

/*...... sidebar ........*/
.sidebar {  width:190px; float:left; padding:12px; margin-top:5px; margin-bottom:20px;}
.sidebar h2 { display:block; padding:5px; margin-bottom:10px; border:0px solid #f0f0f0; font-size:1.5em;}
.sidebar ul { }
.sidebar ul li { padding-bottom:10px;}
.sidebar ul li a { padding-right:0px; border-bottom: hidden; }
.sidebar {font-size: 1em;}

/*...... misc ........*/
img.centered { display: block; margin-right: auto; margin-left: auto; }
img.alignright { padding: 4px; margin: 0 7px 2px 0; display: inline; }
img.alignleft { padding: 4px; margin: 0 2px 7px; display: inline; }
img.centered a:link, img.alignright a:link, img.alignleft a:link { border:none;}
.alignright { float: left; }
.alignleft { float: right }
html>body .box ul { margin-right: 0px; padding: 0 30px 0 0; list-style: none; padding-right: 10px; text-indent: -10px; }
html>body .box li { margin: 7px 10px 8px 0; }
.box ul li:before{ content: "0BB 020"; }
code { font: 1.1em ‘Courier New’, Courier, Fixed; display:block; padding:5px 5px 0 5px; border:1px solid #dadada; background:#fff; margin-bottom:-5px; }
p code { padding:20px;}
blockquote { font: 1.1em ‘Courier New’, Courier, Fixed; display:block; padding:5px 5px 0 5px; border:1px solid #dadada; margin-bottom:10px; background:#f8f8f4;}
acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; }
.box .smallattachment { text-align: center; float: right; width: 128px; margin: 5px 0px 5px 5px; }
.box .attachment { text-align: center; margin: 5px 0px;}
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px;
	-webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { border: 0 none; }
.wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; }

/*...... comments ........*/
h3#comments, h3#respond { font:1.3em Georgia, serif; margin-bottom:30px; background:#fcfcfc; display:block; padding:5px; border-bottom:1px dashed #ccc; text-transform:uppercase; }
.box ol.commentlist { width:670px; clear:both; padding: 0 -25px 0 0;  }
.box ol.commentlist li.alt { background:#fafafa; color:#333; padding:5px; margin-bottom:5px; list-style:none;  }
.box ol.commentlist li { color:#333; padding:5px; margin-bottom:5px;  }
.box ol.commentlist li .gravatar { float:right; border:3px double #dadada; width:55px; margin-left:5px;}
.box ol.commentlist li .gravatar img { border:none;}
.box ol.commentlist li .comments { float:left; width:580px; }
.box ol.commentlist li .comments p { padding-top:10px;}
#commentform { margin-right:10px;}
#author,#email,#url,#comment { color: #333; border: 1px solid #d7d7d7; width:400px; display:block; padding: 4px; margin-bottom: 0.6em; background: #fff url(images/inputbg.gif) repeat-x top right;}
#author:focus,#email:focus,#url:focus,#author.sffocus ,#email.sffocus ,#url.sffocus  { color: #000; border: 1px solid #afc9de; width:400px; display:block; padding: 4px; margin-bottom: 0.6em; background: #fff url(images/inputbg.gif) repeat-x top right;}
#comment { width:520px;}
#comment:focus,#comment.sffocus { color: #000; border: 1px solid #afc9de; width:520px; display:block; padding: 4px; margin-bottom: 0.6em; background: #fff url(images/inputbg.gif) repeat-x top right;}

/*...... footer ........*/
#footer { background:url(images/foobkg.gif) repeat-x; clear: both; position: relative; z-index: 10; height: 31px; }
.footer, #push { height:30px; width:905px; margin:auto; padding-top:1px; }
#footer p { line-height:31px; color:#fff;}
#footer p a { color:#cccccc;}
#footer p.fooleft { float:right;}
#footer p.fooright { float:left; text-indent:-9999px;}
#footer p.fooright a { display:block; background:url(images/top.gif) no-repeat 100% 8px; width:27px; height:31px;}

    Thanks in advance for any help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter zigmund619

    (@zigmund619)

    14 years, 7 months ago

    UPDATE: frontpage issue fixed, remaining issues:

    – dashed borders still displayed under post titles, even though CSS excludes them.

    – some sidebar links aren’t working properly.

    – the footer overlaps the text of the last post.

    Thread Starter zigmund619

    (@zigmund619)

    14 years, 7 months ago

    UPDATE: fixed all these problems except the footer, see how it overlaps the last post’s metadata?? I still have no idea why it’s doing that..

    krembo99

    (@krembo99)

    14 years, 7 months ago

    put this is your footer

    #push
    {
    #height: 120px;
    }

    and ddelete the #push from .footer, #push

    anyhow, your footer is OUT of the Main div, or the wrapper, also you have both footer ID and footer class defined .. This is not so healthy.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘IE completely wrecks my design’ is closed to new replies.

Tags