SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Layout Displays Improperly - Can't Find the Problem!

    Can anyone take a look at this page:

    http://www.stoneycreekwebdesign.com/...content_id=352

    and suggest to me what I can do to make IE display it properly? FF displays it correctly, with the two images floated to the right side and the text running up the left side of the images.

    Thanks again, everyone!

    - dwz
    Web Design, Marketing, Etc .............
    ....

  2. #2
    SitePoint Wizard gate2vn's Avatar
    Join Date
    Jan 2004
    Location
    Oslo, Norway
    Posts
    1,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Viewing in Safari and IE on my MAC, it's fine. A good layout
    Clustered CloudLinux Hosting | WordPress Hosting |
    Advanced Antispam | Managed Xen VPS
    in US West coast and Asia-Pacific datacenters
    Contact us now on Twitter @vietnap

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gate2vn,

    Thanks for the kind words. Are you saying that you see the text flowing on the left side and the two images floated to the right in IE Mac?

    If I change the width of the container the images are in from width:auto to width:300px, all works fine. But my images will vary in width, so I need to set it at :auto --- It seems this is the source of the problem that I see in IE Win.

    - dwz
    Web Design, Marketing, Etc .............
    ....

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You need to give the float a width.

    Code:
    #content_d1 .rtcol_d3_logo
    {
      clear:right;
     float:right;
     width: 233px;
     min-height:400px;
     height: 400px;
     margin: -113px 20px 10px 12px;
     padding: 0 0px 0 0;
     border: 0px solid blue;
    position:relative;
    text-align:center;
    }
    Also there is no point in setting height and min-height in the same block as the min-height is just cancelled out.

  5. #5
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I discovered that earlier, but the images vary in size in that division, so that causes me another problem...

    Dave Z.
    Web Design, Marketing, Etc .............
    ....

  6. #6
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Payul,

    If you go to this page (same content, different PHP file)

    http://www.stoneycreekwebdesign.com/...content_id=352

    The layout sits to the right as intended, and this is the CSS for that using width:auto:

    #content_d1 .rtcol_d3
    {
    background-color:transparent;
    clear:right;
    float:right;
    width: auto;
    min-height:400px;
    height: 400px;
    margin: 15px 10px 0px 0px;
    padding: 0 0px 0 0;
    border: px solid blue;
    position:relative;
    text-align:center;

    As you can see, that is what confuses me...the width auto works here, but not in the original example. On the other hand, if you can tell me how to modify this CSS here so the 20-year logo is centered over the other image, then I can just use this CSS to control the problem page....

    Dave
    Web Design, Marketing, Etc .............
    ....

  7. #7
    SitePoint Wizard gate2vn's Avatar
    Join Date
    Jan 2004
    Location
    Oslo, Norway
    Posts
    1,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwzemens
    Are you saying that you see the text flowing on the left side and the two images floated to the right in IE Mac?
    basically yes, the images on the right and the text on the left. However, I see the difference now: in Safari, it's fine. But in IE, the images is a bit over the text. See the attached image
    Attached Images Attached Images
    Clustered CloudLinux Hosting | WordPress Hosting |
    Advanced Antispam | Managed Xen VPS
    in US West coast and Asia-Pacific datacenters
    Contact us now on Twitter @vietnap

  8. #8
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Through trial and error, I have it working properly in IE and FF. However, I need to have the images centered in the container so that the 20 year logo sits centered above the photograph. I am really stumped and cannot get this to work. Here is the CSS for the controlling division. I know it is a mess, but I am going to clean it up once I get it working! Thanks....

    http://www.stoneycreekwebdesign.com/...content_id=352

    Code:
    #content_d1 .rtcol_d3_logo
    {
    	background-color:transparent;
    	clear:right;
    	float:right;
    	width: auto;
    	min-height:400px;
    	height: 400px;
    	margin: -113px 20px 10px 12px;
    	padding: 0 0px 0 0;
    	border: px solid blue;
    position:relative;
    text-align:center;
    }
    
    * html #content_d1 .rtcol_d3_logo {	margin:-113px 10px 10px 12px;} 
    
    #content_d1 .rtcol_d3_logo img 
    {
    float: left;
    clear:both;
    	padding:0px 15px 13px 15px;
    	margin: 0 0 12px 0;
    	background-color: transparent;
    	border: 0px solid red;
    display: block;
    margin: 0 auto 0 auto;
    }
    
    #content_d1 .rtcol_d3_logo p {
     clear:both;
     margin:0px auto 1em auto;
     padding:5px 0 0 0px;
     width:200px;
     color:black;
     line-height:10px;
     font-size:10px;
     letter-spacing:.6px;
     background:#fff;
     position:relative;
     border:0px solid black;
    }  
    * html #content_d1 .rtcol_d3_logo p {margin:0px 0 1em 0;}
    Web Design, Marketing, Etc .............
    ....

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Sorry I didn't get back in time but it seems you have it working now

  10. #10
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks, I worked it out...here is a new problem, however:
    http://www.stoneycreekwebdesign.com/...content_id=337

    I gave the main body graphic a negative left margin because client wanted the text to align with the content...FF has it the way I want it - the left side of the 'one year after installation' bracket shows in the left margin. But, alas, IE hides the bracketed part in the negative left margin .... how can I make it show in IE?

    Thanks,

    - dwz
    Web Design, Marketing, Etc .............
    ....

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Try this:

    Code:
    #content_d1 .d2_img_1
    {
    margin: 10px 0 0px -12px;position:relative;
    }
    Ie quite often needs position:relative on negative margins to stop the negative part from going underneath.

  12. #12
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Of course, it works. Thanks so much once again.

    My wife and I are traveling to the UK for a vacation in May - can I buy you dinner?

    - dwz
    Web Design, Marketing, Etc .............
    ....

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Steak and chips sounds fine


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
  •