SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS + IE = Perfect Nightmare

    I give up... please see http://www.spicyglitters.com, looks good in FF but not in IE (using IE6), I have tried everything I can - including banging my head to the keyboard if it counts -.

    I have tried to adjust these in wp_style.css:
    #container
    .width
    * html .minwidth
    * html .holder
    #content

    Would anyone help me on this?

    Thanks in advance.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They look the same in Firefox2 and IE6. May be I am not looking at the right thing. Can you explain the problem you notice in IE6 ?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh sorry... forgot to say it's not correct in 800x600 resolution... or when we resize IE window smaller.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try floating the white box to the right.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still going down... and now on FF too...

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try positioning the menu using absolute. Float the white box to the left with [the width of the menu as ] left margin.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no need to. I haven't looked at the code, but if the container is being pushed down, then you need to double-check your math and make sure that everything adds up.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks semantic7, but from the css, it seems it had already been like that, but I'm not sure.

    if the container is being pushed down, then you need to double-check your math and make sure that everything adds up.
    Yeah, that's the problem, this is a pre-defined template and I can't understand the whole codes, look like I lost in CSS jungle now

    Ok here is some codes (the divs) that I suspect might raise the problem:

    On html page:
    Code:
    <!-- wrapper to keep IE from overlapping right sidebar with main content -->
    <div class="width">
    <div class="minwidth">
    <div class="holder">
    <!-- End IE wrapper -->
    
       <div id="container">
          <div id="wrap">
             <div id="leftside">
             <div id="content">  --> this one is the 'white box'
    and the CSS:
    Code:
    .width {
    	width:100&#37;;
    	min-width:1000px;
    }
    
    * html .minwidth {
    	border-left:850px solid #fff;
    	position:relative;
    	float:left;
    	z-index:1;
    }
    
    * html .holder {
    	margin-left:-850px;
    	position:relative;
    	float:left;
    	z-index:2;
    }
    
    
    #container {
    	color:#303030;
    	margin:0;
    	min-width:1000px;
    	padding:0;
    	text-align:left;
    	width:100%;
    }
    
    #wrap {
    	clear:both;
    	font-size:0.9em;
    	padding:0;
    	margin-top: 5px;
    }
    
    #leftside {
    	margin:0;
    	padding:0 10px 10px;
    	width:165px;
    }
    
    #leftside {
    	float:left;
    	margin-right:10px;
    }
    
    #content {
    	background-color:#fafcff;
    	border:1px solid #909090;
    	color:#2a2a2a;
    	padding:15px 20px 5px;
    }
    
    #content {
    position:relative;
    float:right;
    margin:0 20px 0 200px;
    }
    
    *html #content {
    	display:inline-block;
    	position:relative;
    }
    Hope it can help you to point out which one is not correct.
    As Dan's suggestion, I had tried to change the '1000px' to larger number '1500px', but still messy in IE.

    Please notice that the problem is not the big white box only, but also these things (on stupid IE):
    1. The main menu bar (HOME,UPLOAD FILE etc) isn't fully to the right.
    2. The 'category' bar inside the big white box

    But let's focus on the 'big white box' problem first...

    Thanks guys... appreciate your help here...

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yay... at last...

    changed width:100&#37; to
    Code:
    width:1000px;
    width /* */:100%;
    seems it works now... spent 2 days just to find it
    does anyone have IE7? I hope it works ok in IE7

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    Ohio
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by explorer11 View Post
    yay... at last...

    seems it works now... spent 2 days just to find it
    does anyone have IE7? I hope it works ok in IE7
    Doesn't look like anything is out of place to me with IE7.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good!... it should be so, as IE7 is more "CSS friendly" than previous ones. But I do like FF muchhh better, if only Windows came with FF so no one use IE


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •