SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: IE6 problem

  1. #1
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 problem

    http://209.54.73.18/ronemus/site/standards/indes.html

    The above link points to the problem file.

    http://209.54.73.18/ronemus/site/standards/styles.css

    This points to the css file.

    Why is the box being pushed slightly past the 2 pictures at the bottom?

    In Mozilla and Safari it looks great. Also in IE5 it pretty much looks totally different.

    Any suggestions?

    Thanks
    Rich

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Why is the box being pushed slightly past the 2 pictures at the bottom?
    What box? Can't see a box!

    What 2 Pictures ? can only see one big picture!

    Or am I being thick again

    Looks the same in moz and IE6 to me.

    Paul

  3. #3
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 issue

    Sorry if I was too vague -

    Behind the building pic and the footer graphic, is a light colored area.
    For some reason on my version IE6 for Win it stretches down a few extra pixels, where the pic should just sit at the bottom.

    On Safari on the Mac and Mozilla for Win, it's a lines up perfect.
    Rich


    Quote Originally Posted by Paul O'B
    What box? Can't see a box!


    What 2 Pictures ? can only see one big picture!

    Or am I being thick again

    Looks the same in moz and IE6 to me.

    Paul

  4. #4
    SitePoint Wizard edshuck's Avatar
    Join Date
    Jul 2000
    Posts
    1,200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do not see the two pictures.

    4 rows

    row 1 = menu

    row 2 = header on the left sub header on the right

    row 3 = text on the left photo of bldgs on right

    row 4 = a bottom thing.

    using IE 6.0.2800.1106

    peace

    I just got your last post. Past in cyberspace.

    Yes I see it.

    Just a bit of a horizontal line.

    I have to back off and just listen. I do not know.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think I know what you mean now. Its the slight gap between the two images. You just need to set the img to display block.

    To get the diplay more uniform you may need to set the H2 top margin to zero and the body margins to zero as well. You also had an error in your stylesheet that was actually making it work when it shouldn't have. You missed the closing ";" from the property bottom applied in your #card style. You don't need the property anyway ( as far as I can see - unless i'm missing an image or something).

    This should make the layout the same in IE6,Mozilla 1.2 and Firebird 0.6.
    Code:
    body
    {
    margin:0;padding:0;
    background: #979ea0;
    }
     
    div#layout
    {
    position: relative;
    left: 10%;
    z-index:1;
    }
     
    div#card
    {
    background: #edf0f1;
    width:682px;
    position: absolute;
    left: 0px;
    top: 31px;
    }
     
    div#menu
    	{
    	position: absolute;
    	top:30px;
    	z-index:10;
    	}
     
    div#tag
    	{
    	position: absolute;
    	right:0px;
    	} 
    div#tagline
    	{
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	z-index: 20;
    	}
    div#pic
    	{
    float: right;
    margin-left: 25px;
    	}
     
    div#about
    	 { font-size: 10pt; font-family: "Times New Roman", Times, Georgia, serif; padding-left: 45px; border-left: 2px solid; display: block }
     
    h2.title
    	{
    	font-family: Times New Roman, Times, serif;
    	font-size: 24pt;
    	padding-top: 25px;
    	margin-top:0px
    }
     
    div#footer
    	{
    	z-index: 100;
    	clear:both;
    }
    #pic img, #footer img {display:block}
    Hope that helps.

    Paul

  6. #6
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 issue

    Paul - That was exactly it.

    May i ask, what does the clear:both do?

    Thankss a ton
    Rich

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Clear prevents an element from being displayed next to floated elements. Clear:left clears to the left;clear:right clears to the right and clear:both ensures both sides are clear.

    In your example when the img was set to display block the footer rose up the screen in Firebird and mozilla and so adding the clear:both made it go beneath the floated pic element.

    A float is removed from the flow but content is allowed to flow around it. To make content follow a float you use the clear property.

    I'm not sure I explained that very well

    Paul


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
  •